themes/BootstrapChildTheme/SyliusShopBundle/views/Product/Index/_main.html.twig line 1

Open in your IDE?
  1. {% import '@SyliusShop/Common/Macro/messages.html.twig' as messages %}
  2. {% import '@SyliusShop/Common/Macro/pagination.html.twig' as pagination %}
  3. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
  5. {# Povodny search nad kategoriou
  6. <div class="mb-3">
  7.     {{ sylius_template_event('sylius.shop.product.index.search', _context) }}
  8.     <div class="clearfix"></div>
  9. </div>
  10. #}
  12. {{ sylius_template_event('sylius.shop.product.index.before_list', {'products': resources.data}) }}
  14. {{ sylius_template_event('app.shop.category_view', _context) }}
  16. {% if resources.data|length > 0 %}
  17.     <script>
  18.         (function () {
  19.             const rawItems = [
  20.                 {% for product in resources.data %}
  21.                 {
  22.                     {# json_encode pridá úvodzovky a ošetrí pomlčky v kóde #}
  23.                     item_id: {{ product.code|json_encode|raw }},
  24.                     item_name: {{ product.name|json_encode|raw }},
  25.                     item_category: {{ product.mainTaxon ? product.mainTaxon.name|json_encode|raw : (taxon.name|json_encode|raw) }},
  26.                     {# Odstránená čiarka za cenou kvôli čistote objektu #}
  27.                     price: {{ product.variants.empty ? 0 : (product.variants.first.channelPricings.first.price / 100)|default(0) }},
  28.                     quantity: 1
  29.                 }{{ not loop.last ? ',' : '' }}
  30.                 {% endfor %}
  31.             ];
  33.             // Mapovanie položiek do správneho formátu pre GA4
  34.             const formattedItems = rawItems.map((item, i) => {
  35.                 return {
  36.                     ...item,
  37.                     item_list_id: {{ taxon.code|json_encode|raw }},
  38.                     item_list_name: {{ taxon.name|json_encode|raw }},
  39.                     index: i + 1 // GA4 indexy sa zvyčajne číslujú od 1
  40.                 };
  41.             });
  43.             pushEcommerceEvent("view_item_list", {
  44.                 item_list_id: {{ taxon.code|json_encode|raw }},
  45.                 item_list_name: {{ taxon.name|json_encode|raw }},
  46.                 items: formattedItems
  47.             });
  49.             // Nahraď ten nefunkčný querySelector týmto:
  50.             document.addEventListener('click', function (e) {
  51.                 // Toto nájde najbližšieho rodiča s triedou .js-select-product,
  52.                 // aj keď klikneš na obrázok alebo názov vnútri
  53.                 const el = e.target.closest('.js-select-product');
  55.                 if (el) {
  56.                     const payload = {
  57.                         item_list_id: el.dataset.itemListId || '',
  58.                         item_list_name: el.dataset.itemListName || '',
  59.                         items: [
  60.                             {
  61.                                 item_id: el.dataset.itemId || '',
  62.                                 item_name: el.dataset.itemName || '',
  63.                                 item_category: el.dataset.itemCategory || '',
  64.                                 item_variant: el.dataset.itemVariant || '',
  65.                                 price: parseFloat(el.dataset.price || '0'),
  66.                                 quantity: parseInt(el.dataset.quantity || '1', 10),
  67.                                 index: parseInt(el.dataset.index || '0', 10)
  68.                             }
  69.                         ]
  70.                     };
  72.                     window.dataLayer.push({ ecommerce: null }); // Vynulovanie pre GA4
  73.                     window.dataLayer.push({
  74.                         event: 'select_item',
  75.                         ecommerce: payload
  76.                     });
  78.                     console.log('🖱️ GA4: select_item (Delegované)', payload);
  79.                 }
  80.             });
  82.         })();
  83.     </script>
  85.     <div class="product-list-wrap" {{ sylius_test_html_attribute('products') }}>
  86.         <div class="product-list">
  87.             <div class="product-list-content row row-cols-2 row-cols-sm-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxxl-6">
  88.                 {% for product in resources.data %}
  89.                     {% include '@SyliusShop/Product/_box.html.twig' %}
  90.                 {% endfor %}
  91.             </div>
  92.         </div>
  93.     </div>
  95.     {{ sylius_template_event('sylius.shop.product.index.before_pagination', {'products': resources.data}) }}
  97.     <div class="d-flex justify-content-end mt-3">
  98.         {{ pagination.simple(resources.data) }}
  99.     </div>
  100. {% else %}
  101.     {{ messages.info('sylius.ui.no_results_to_display') }}
  102. {% endif %}