templates/basePages/page/product_page.html.twig line 1

Open in your IDE?
  1. {# <pre>
  2.   {{ dump(content) }}
  3. </pre> #}
  5. <script>
  6. const slides = {{ content.aboutProduct.about_photos|length }};
  7. const productId = "{{ app.request.get('id') ~ "-" ~ app.request.get('hash') }}";
  8. </script>
  10. {% set currentPath = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
  12. <section class="product-preview">
  13.   <div class="product-preview-image">
  14.     <div class="product-preview-image-bubbles app-imagesBubblesList" {% if content.aboutProduct.about_photos|length < 2 %}style="opacity:0.2;user-select:none;pointer-events:none;"{% endif %}>
  15.       <div class="product-preview-image-view-arrow app-imageBubbleController" data-control='-1' onclick="changeProductPhoto(null, this)">&#xF284;</div>
  16.       {% for itmco in 0 .. min(content.aboutProduct.about_photos|length, 5) - 1 %}
  17.         <div class="product-preview-image-view-bubble app-imageBubble" {% if itmco == 0 %} data-active='1' {% endif %} data-control='{{ itmco }}'></div>        
  18.       {% endfor %}
  19.       <div class="product-preview-image-view-arrow app-imageBubbleController" data-control='{% if content.aboutProduct.about_photos|length >= 1 %}1{% else %}-1{% endif %}' onclick="changeProductPhoto(null, this)">&#xF285;</div>
  20.     </div>
  21.     <label class="product-preview-image-wishlist">
  22.       <input autocomplete="off" type="checkbox" value="1" {% if content.wish.status %}checked{% endif %} onchange="this.checked = !this.checked; {% if acc.if %}changeWishStatus(!this.checked, '{{ content.wish.hash }}', this);{% else %} window.location.href = '{{ path('auth_site', {log_type: 'login'}) }}?routeTo={{ currentPath|url_encode }}'; {% endif %}">
  23.       <div class="product-preview-image-wishlist-group">
  24.         <div class="on">
  25.           <svg style="height:37px;width:37px;fill:#101010;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
  26.             <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
  27.           </svg>
  28.         </div>
  29.         <div class="off">
  30.           <svg style="height:37px;width:37px;fill:#101010;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
  31.             <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
  32.           </svg>
  33.         </div>
  34.       </div>
  35.     </label>
  36.     <div class="product-preview-image-window app-imagePreview">
  37.       {% if content.aboutProduct.about_photos|length > 0 %}      
  38.         {% for itmco in 1 .. content.aboutProduct.about_photos|length %}
  39.           <img {% if itmco == 1 %} data-active='1' {% endif %} class="app-imgePreviewImage" src="{{ content.aboutProduct.about_photos[itmco - 1].url }}" alt="prekes-nuotrauka">
  40.         {% endfor %}
  41.       {% else %}
  42.         <img data-active='1' class="app-imgePreviewImage" src="https://srv1.cnts.venderes.com/resources/uploads/items/@default.png" alt="nera-nuotraukos">
  43.       {% endif %}
  44.     </div>
  45.   </div>
  46.   <div class="product-preview-info">
  47.     <div class="product-preview-info-window">
  48. {#       <div class="product-preview-info-window-stickers-container">
  49.         <div data-sticker="danger">Pardavėjas ilgai neatnaujino duomenų</div>
  50.       </div> #}
  51.       <div class="product-preview-info-window-name">{{ content.aboutProduct.a_name }}</div>
  52.       <div class="product-preview-info-window-price-container"><span class="regular-price">{{ '%.2f'|format((content.aboutProduct.price_mode == 1 ? content.aboutProduct.price_discount : content.aboutProduct.price_normal) / 100) }} EUR</span>
  53.       {% if content.aboutProduct.price_mode == 1 %}<span class="discount-price">{{ '%.2f'|format(content.aboutProduct.price_normal / 100) }} EUR</span>{% endif %}</div>
  54.       <div class="product-preview-info-window-seller-container">
  55.         <span>Pardavėjas: </span><span class="sellernm">{{ content.aboutSeller.name }}</span><br>
  56.         {# <img src="/data/assets/swedbank.png"> #}
  57.       </div>
  58.       <a target="_blank" href="{{ path('productredirect_site', {id: app.request.get('id'), hash: app.request.get('hash')}) }}"><button class="product-preview-info-window-visit">Apsilankyti</button></a>
  59.       <hr class="product-preview-info-window-hr">
  60.       <div class="product-preview-info-window-description-container">
  61.         <span class="header">Apie prekę:</span><br>
  62.         <p>{% if content.aboutProduct.a_description == '' %}<i>Pardavėjas nepateikė aprašymo</i>{% endif %}{{ content.aboutProduct.a_description }}</p>
  63.         <br><span style="font-size:80%;">„Venderes“ prekės ID: <b>{{ app.request.get('id') ~ "-" ~ app.request.get('hash')|upper }}</b></span>
  64.       </div>
  65.     </div>
  66.   </div>
  67. </section>
  69. <section class="product-stats">
  70.   <p style="color:#4d4d4d;font-size:80%;">Pateikiama konkrečios paros intervalo prekės didžiausia kaina. Kainos fiksuojamos {{ "now"|date("T") }} laiko zonoje. Demonstruojami tik pasikeitusių reikšmių duomenys.</p>
  71.   <div><div id="main" style="width:100%;height:300px;"></div></div>
  72. </section>
  74. <section class="app-recommendations" data-blocksnames="{{ ['Panašios prekės']|json_encode()|escape('html_attr') }}">
  76. </section>
  78. {# <!-- REKOMENDACIJA -->
  79. <section class="goods-list">
  80.   <div class="goods-list-header">
  81.     <span class="goods-list-header-name">Panašios prekės</span>
  82.   </div>
  83.   <div class="goods-list-group"></div>
  84. </section>
  86. <section class="goods-list">
  87.   <div class="goods-list-header">
  88.     <span class="goods-list-header-name">Populiaru</span>
  89.   </div>
  90.   <div class="goods-list-group"></div>
  91. </section> #}
  93. <template id="template_item_0">
  94.   <div class="goods-card-sizebox">
  95.     <a data-temp style="text-decoration: none;">
  96.       <div class="good-card">
  97.         <div class="good-card-image" data-temp></div>
  98.         <div class="good-card-price-container"><span class="regular-price" data-temp></span><span class="discount-price" data-temp></span></div>
  99.         <div class="good-card-name-container" data-temp></div>
  100.       </div>
  101.     </a>
  102.   </div>
  103. </template>
  105. <template id="template_itemContainer_0">
  106.   <div class="goods-list">
  107.     <div class="goods-list-header">
  108.       <span class="goods-list-header-name" data-temp>Panašios prekės</span>
  109.     </div>
  110.     <div class="goods-list-group" data-temp></div>
  111.   </div>
  112. </template>
  115. <script src="/data/js/product_page__imageprev.js"></script>
  116. <script src="/data/js/product_page__recommendations.js"></script>
  118. <script type="text/javascript">
  119. var myChart = echarts.init(document.getElementById('main'));
  121. var option = {
  122.   color: [
  123.     '#EF7B00'
  124.   ],
  125.   tooltip: {
  126.     trigger: "axis",
  127.     axisPointer: {
  128.       type: "shadow",
  129.     },
  130.     formatter: '{b0}: <b>{c0} &euro;</b>',
  131.   },
  132.   xAxis: {
  133.     type: 'category',
  134.     data: {{ content.stats.days|json_encode()|raw }}
  135.   },
  136.   yAxis: {
  137.     axisLabel: {
  138.       formatter: '{value} EUR'
  139.     },
  140.     min: {{ content.stats.yax[0] }},
  141.     max: {{ content.stats.yax[1] }}
  142.   },
  143.   series: [
  144.     {
  145.       data: {{ content.stats.vals|json_encode()|raw }},
  146.       type: 'line'
  147.     }
  148.   ],
  149.   grid: {
  150.     left: 0,
  151.     right: 0,
  152.     bottom: 0,
  153.     containLabel: true
  154.   }
  155. };
  157. myChart.setOption(option);
  158. window.addEventListener('resize', myChart.resize);
  159. </script>