templates/AtechNetCoreBundle/Homepage/bazaar.html.twig line 1

Open in your IDE?
  1. {% extends 'AtechNetCoreBundle/base.html.twig' %}
  2. {% import "AtechNetCoreBundle/macros.html.twig" as macros %}
  4. {% block head %}
  5.     {{ parent() }}
  7.     {% if banners.items|length > 1 %}
  8.         {% for bannerItem in banners.items %}
  9.             <link rel="preload" as="image" href="{{ bannerItem.image }}">
  10.         {% endfor %}
  11.     {% endif %}
  12. {% endblock %}
  14. {% block content %}
  15.     {% set defaultLocale = app.request.session.get('defaultLocale') %}
  17.     <div class="promotions p-0">
  18.         <div class="container text-end">
  19.             <a href="/" class="back-to-homepage">{{ 'Back to refurbished computers' |trans }}</a>
  20.         </div>
  21.     </div>
  23.     {% if banners is not null and banners.items|length > 0 %}
  24.         <div class="promotions px-0 px-xl-0 pt-0">
  25.             <div class="container">
  26.                 {% for message in app.flashes('pastPayResult') %}
  27.                     <div class="alert alert-info" role="alert">
  28.                         {{ message }}
  29.                     </div>
  30.                 {% endfor %}
  32.                 <div class="grid-wrapper">
  33.                     {% if banners.items |length > 1 %}
  34.                         <div id="bannersCarouselIndicators" class="banner carousel slide" data-bs-ride="carousel">
  35.                             <div class="carousel-indicators">
  36.                                 {% for banner in banners.items %}
  37.                                     <button
  38.                                         type="button"
  39.                                         data-bs-target="#bannersCarouselIndicators"
  40.                                         data-bs-slide-to="{{ loop.index - 1 }}"
  41.                                         class="active"
  42.                                         {% if loop.index == 1 %}
  43.                                             aria-current="true"
  44.                                         {% endif %}
  45.                                         aria-label="Slide {{ loop.index }}">
  46.                                     </button>
  47.                                 {% endfor %}
  48.                             </div>
  50.                             <div class="carousel-inner">
  51.                                 {% for bannerItem in banners.items %}
  52.                                     {% set gtag = "gtag('event', 'select_promotion', {" ~ 
  53.                                         "creative_name: 'homepage-tab-banner', " ~ 
  54.                                         "promotion_name: 'homepage-tab-banner', " ~ 
  55.                                         "promotion_id: '" ~ bannerItem.parentId ~ "_" ~ bannerItem.itemId ~ "', " ~ 
  56.                                         "promotion_name: '" ~ bannerItem.link ~ "', " ~ 
  57.                                         "items: [ "
  58.                                     %}
  60.                                     {% for item in banners.gtagEventItems %}
  61.                                         {% set gtag = gtag ~ "{" ~ 
  62.                                             "item_id: '" ~ item.item_id ~ "', " ~ 
  63.                                             "item_name: '" ~ item.item_name ~ "', " ~ 
  64.                                             "index: '" ~ item.index ~ "', " ~ 
  65.                                             "promotion_id: '" ~ item.promotion_id ~ "', " ~ 
  66.                                             "promotion_name: '" ~ item.promotion_name ~ "'" ~ 
  67.                                         "}, " %}
  68.                                     {% endfor %}
  70.                                     {% set gtag = gtag ~ " ]})" %}
  72.                                     <div class="carousel-item{% if loop.index == 1 %} active{% endif %}" data-bs-interval="{{ banners.interval }}">
  73.                                         <a href="{{ bannerItem.link }}" onclick="{{ gtag }}">
  74.                                             <img decoding="async" src="{{ bannerItem.image }}" class="d-block w-100" alt="#{{ loop.index }}" width="820" height="340" >
  75.                                         </a>
  76.                                     </div>
  77.                                 {% endfor %}
  78.                             </div>
  80.                             <button class="carousel-control-prev" type="button" data-bs-target="#bannersCarouselIndicators" data-bs-slide="prev">
  81.                                 <img  loading="lazy" decoding="async" src="{{ asset('theme/images/icon/arrow-left.svg') }}" alt="{{ 'Arrow left'|trans }}">
  82.                                 <span class="visually-hidden">{{ 'Previous slide' |trans }}</span>
  83.                             </button>
  85.                             <button class="carousel-control-next" type="button" data-bs-target="#bannersCarouselIndicators" data-bs-slide="next">
  86.                                 <img loading="lazy" decoding="async" src="{{ asset('theme/images/icon/arrow-right.svg') }}" alt="{{ 'Arrow right'|trans }}">
  87.                                 <span class="visually-hidden">{{ 'Next slide' |trans }}</span>
  88.                             </button>
  90.                             <div id="carousel-loader">
  91.                                 <div class="current-percent"></div>
  92.                             </div>
  93.                         </div>
  94.                     {% else %}
  95.                         <div class="banner">
  96.                             <a href="{{ banners.items[0].link }}" onclick="gtag('event','select_promotion',{creative_name:'homepage-tab-banner',promotion_name:'homepage-tab-banner', items:[]})" id="homepage-tab-banner">
  97.                                 <picture>
  98.                                     <img loading="lazy" decoding="async" src="{{ banners.items[0].image }}" alt="banner" width="820" height="340" />
  99.                                 </picture>
  100.                             </a>
  101.                         </div>
  102.                     {% endif %}
  104.                     {% if smallBanners is not empty %}
  105.                         {% if smallBanners.upper.image is defined and smallBanners.upper is not empty %}
  106.                             <div class="small-banner upper">
  107.                                 <a href="{{ smallBanners.upper.link }}" onclick="gtag('event','select_promotion',{creative_name:'homepage-featured-category',promotion_name:'homepage-featured-category',items:[]})" id="homepage-featured-category">
  108.                                     <img loading="lazy" decoding="async" src="{{ smallBanners.upper.image }}" alt="{{ smallBanners.upper.title }}" width="550" height="244">
  109.                                 </a>
  110.                             </div>
  111.                         {% else %}
  112.                             {% if smallBanners.upper.display == const('Banner::BANNER_DISPLAY_TYPE_CATEGORY_GROUP') and featuredCategory.upper is defined and featuredCategory.upper is not empty %}
  113.                                 <div class="featured-category-box{% if featuredCategory.upper.isWizard is defined and featuredCategory.upper.isWizard %} wizard{% endif %} upper">
  114.                                     <a href="{{ featuredCategory.upper.href }}" onclick="gtag('event','select_promotion',{creative_name:'homepage-featured-category',promotion_name:'homepage-featured-category',items:[]})" id="homepage-featured-category">
  115.                                         <img loading="lazy" decoding="async" src="{{ featuredCategory.upper.image }}" alt="{{ featuredCategory.upper.title }}" width="376" height="210">
  116.                                         <div class="description">
  117.                                             <h3 class="mb-1 mb-md-2 mb-xl-3"><strong>{{ featuredCategory.upper.title }}</strong></h3>
  118.                                             <p class="mb-1">{{ featuredCategory.upper.description }}</p>
  119.                                             <span>{{ 'Featured category view'|trans }}</span>
  120.                                         </div>
  121.                                     </a>
  122.                                 </div>
  123.                             {% elseif smallBanners.upper.display == const('Banner::BANNER_DISPLAY_TYPE_PRODUCT') and featuredProduct.upper is defined and featuredProduct.upper is not empty %}
  124.                                 <div class="featured-product-box upper">
  125.                                     <div class="recommendation-label">
  126.                                         <span>{{ 'Recommended'|trans }}</span>
  127.                                     </div>
  129.                                     {% set gtag = "gtag('event', 'select_promotion', {" ~ 
  130.                                         "creative_name:'homepage-featured-product', " ~ 
  131.                                         "promotion_name:'homepage-featured-product', " ~ 
  132.                                         "items: [{" ~ 
  133.                                             "item_id: '" ~ featuredProduct.upper.code ~ "', " ~ 
  134.                                             "item_name: '" ~ featuredProduct.upper.title ~ "', " ~ 
  135.                                             "discount: " ~ featuredProduct.upper.special|number_format(2, '.', '') ~ ", " ~ 
  136.                                             "index: 0, " ~ 
  137.                                             "item_brand: '" ~ featuredProduct.upper.vendor ~ "', " ~ 
  138.                                             "price: " ~ featuredProduct.upper.price|number_format(2, '.', '') ~ 
  139.                                             "quantity: 1, " ~ 
  140.                                         "}]
  141.                                     })" %}
  143.                                     <a href="{{ featuredProduct.upper.href }}" class="featured-product-wrapper" onclick="{{ gtag }}" id="homepage-featured-product">
  144.                                         <div class="product-image me-3">
  145.                                             {% if featuredProduct.upper.carouselImages is defined %}
  146.                                                 <div id="featuredProduct-upper-carousel" class="carousel slide" data-bs-ride="carousel">
  147.                                                     <div class="carousel-inner">
  148.                                                         {% for image in featuredProduct.upper.carouselImages %}
  149.                                                             <div class="carousel-item {% if loop.first %}active{% endif %}"  data-bs-interval="8000">
  150.                                                                 <img loading="lazy" decoding="async" src="{{ image }}" class="d-block w-100" alt="{{ featuredProduct.upper.vendor }} {{ featuredProduct.upper.title }}">
  151.                                                             </div>
  152.                                                         {% endfor %}
  153.                                                     </div>
  154.                                                 </div>
  155.                                             {% else %}
  156.                                                 <img loading="lazy" decoding="async" src="{{ featuredProduct.upper.image }}" alt="{{ featuredProduct.upper.vendor }} {{ featuredProduct.upper.title }}">
  157.                                             {% endif %}
  158.                                         </div>
  159.                                         <div class="product-info">
  160.                                             <div class="product-title mb-1 mb-md-2 mb-xl-3">{% if featuredProduct.upper.isCustomTitle is defined %} {{- featuredProduct.upper.title -}} {% else  %}{{- featuredProduct.upper.vendor }} {{ featuredProduct.upper.title -}} {% endif %}</div>
  161.                                             <p class="product-description mb-2 mb-md-3">{{- featuredProduct.upper.attributesListTxt|raw -}}</p>
  162.                                             <div class="prices">
  163.                                                 {% if featuredProduct.upper.isDiscounted %}
  164.                                                     <span class="discounted">
  165.                                                 {{- featuredProduct.upper.special|price(currency, precision) -}}
  166.                                             </span>
  167.                                                 {% endif %}
  168.                                                 <span class="price{{ featuredProduct.upper.isDiscounted ? ' discounted-on' : '' }}">
  169.                                             {{- featuredProduct.upper.price|price(currency, precision) -}}
  170.                                         </span>
  171.                                             </div>
  172.                                         </div>
  173.                                     </a>
  175.                                     {% if banners.items |length > 1 %}
  176.                                         {% set promotionItems = banners.gtagEventItems |json_encode %}
  178.                                         {# for item in banners.gtagEventItems %}
  179.                                             {% set promotionItems = promotionItems ~ "{" ~ 
  180.                                                 "item_id: '" ~ item.item_id "', " ~ 
  181.                                                 "item_name: '" ~ item.item_name "', " ~ 
  182.                                                     "item_name": "{{ item.item_name }}",
  183.                                                     "index": "{{ item.index }}",
  184.                                                     "promotion_id": "{{ item.promotion_id }}",
  185.                                                     "promotion_name": "{{ item.promotion_name }}"
  186.                                             
  187.                                             "}," %}
  188.                                         {% endfor #}
  189.                                     {% else %}
  191.                                     {% endif %}
  193.                                     <script>
  194.                                         gtag("event", "view_promotion", {
  195.                                             creative_name: "homepage-tab-banner", 
  196.                                             promotion_name: "homepage-tab-banner", 
  197.                                             items: JSON.parse('{{ promotionItems }}')
  198.                                         });
  200.                                         gtag("event", "view_promotion", {
  201.                                             creative_name: "homepage-featured-category",
  202.                                             promotion_name: "homepage-featured-category",
  203.                                             items: []
  204.                                         });
  205.                                         gtag("event", "view_promotion", {
  206.                                             creative_name: "homepage-featured-product",
  207.                                             promotion_name: "homepage-featured-product",
  208.                                             items: [
  209.                                                 {
  210.                                                     item_id: "{{ featuredProduct.upper.code }}",
  211.                                                     item_name: "{{ featuredProduct.upper.title }}",
  212.                                                     discount: {{ featuredProduct.upper.special|number_format(2, '.', '') }},
  213.                                                     index: 0,
  214.                                                     item_brand: "{{ featuredProduct.upper.vendor }}",
  215.                                                     price: {{ featuredProduct.upper.price|number_format(2, '.', '') }},
  216.                                                     quantity: 1
  217.                                                 }
  218.                                             ]
  219.                                         });
  220.                                     </script>
  221.                                 </div>
  222.                             {% else %}
  223.                                 <div class="small-banner upper"></div>
  224.                             {% endif %}
  225.                         {% endif %}
  226.                         {% if smallBanners.lower.image is defined and  smallBanners.lower is not empty %}
  227.                             <div class="small-banner lower">
  228.                                 <a href="{{ smallBanners.lower.link }}" onclick="gtag('event','select_promotion',{creative_name:'homepage-featured-category',promotion_name:'homepage-featured-category',items:[]})" id="homepage-featured-category">
  229.                                     <img loading="lazy" decoding="async" src="{{ smallBanners.lower.image }}" alt="{{ smallBanners.lower.title }}" width="550" height="244">
  230.                                 </a>
  231.                             </div>
  232.                         {% else %}
  233.                             {% if smallBanners.lower.display == const('Banner::BANNER_DISPLAY_TYPE_CATEGORY_GROUP') and featuredCategory.lower is defined and featuredCategory.lower is not empty %}
  234.                                 <div class="featured-category-box{% if featuredCategory.lower.isWizard is defined and featuredCategory.lower.isWizard %} wizard{% endif %} lower">
  235.                                     <a href="{{ featuredCategory.lower.href }}" onclick="gtag('event','select_promotion',{creative_name:'homepage-featured-category',promotion_name:'homepage-featured-category',items:[]})" id="homepage-featured-category">
  236.                                         <img loading="lazy" decoding="async" src="{{ featuredCategory.lower.image }}" alt="{{ featuredCategory.lower.title }}" width="376" height="210">
  237.                                         <div class="description">
  238.                                             <h3 class="mb-1 mb-md-2 mb-xl-3"><strong>{{ featuredCategory.lower.title }}</strong></h3>
  239.                                             <p class="mb-1">{{ featuredCategory.lower.description }}</p>
  240.                                             <span>{{ 'Featured category view'|trans }}</span>
  241.                                         </div>
  242.                                     </a>
  243.                                 </div>
  244.                             {% elseif smallBanners.lower.display == const('Banner::BANNER_DISPLAY_TYPE_PRODUCT') and featuredProduct.lower is defined and featuredProduct.lower is not empty %}
  246.                                 <div class="featured-product-box lower">
  247.                                     <div class="recommendation-label">
  248.                                         <span>{{ 'Recommended'|trans }}</span>
  249.                                     </div>
  250.                                     <a href="{{ featuredProduct.lower.href }}" class="featured-product-wrapper" onclick="gtag('event','select_promotion',{creative_name:'homepage-featured-product',promotion_name:'homepage-featured-product',items:[{item_id:'{{ featuredProduct.lower.code }}',item_name:'{{ featuredProduct.lower.title }}',discount:{{ featuredProduct.lower.special|number_format(2, '.', '') }},index:0,item_brand:'{{ featuredProduct.lower.vendor }}',price:{{ featuredProduct.lower.price|number_format(2, '.', '') }},quantity:1}]})" id="homepage-featured-product">
  251.                                         <div class="product-image me-3">
  252.                                             {% if featuredProduct.lower.carouselImages is defined %}
  253.                                                 <div id="featuredProduct-lower-carousel" class="carousel slide" data-bs-ride="carousel">
  254.                                                     <div class="carousel-inner">
  255.                                                         {% for image in featuredProduct.lower.carouselImages %}
  256.                                                             <div class="carousel-item {% if loop.first %}active{% endif %}">
  257.                                                                 <img loading="lazy" decoding="async" src="{{ image }}" class="d-block w-100" alt="{{ featuredProduct.lower.vendor }} {{ featuredProduct.lower.title }}">
  258.                                                             </div>
  259.                                                         {% endfor %}
  260.                                                     </div>
  261.                                                 </div>
  262.                                             {% else %}
  263.                                                 <img loading="lazy" decoding="async" src="{{ featuredProduct.lower.image }}" alt="{{ featuredProduct.lower.vendor }} {{ featuredProduct.lower.title }}">
  264.                                             {% endif %}
  265.                                         </div>
  266.                                         <div class="product-info">
  267.                                             <div class="product-title mb-1 mb-md-2 mb-xl-3">{% if featuredProduct.lower.isCustomTitle is defined %} {{- featuredProduct.lower.title -}} {% else  %}{{- featuredProduct.lower.vendor }} {{ featuredProduct.lower.title -}} {% endif %}</div>
  268.                                             <p class="product-description mb-2 mb-md-3">{{- featuredProduct.lower.attributesListTxt|raw -}}</p>
  269.                                             <div class="prices">
  270.                                                 {% if featuredProduct.lower.isDiscounted %}
  271.                                                     <span class="discounted">
  272.                                                 {{- featuredProduct.lower.special|price(currency, precision) -}}
  273.                                             </span>
  274.                                                 {% endif %}
  275.                                                 <span class="price{{ featuredProduct.lower.isDiscounted ? ' discounted-on' : '' }}">
  276.                                             {{- featuredProduct.lower.price|price(currency, precision) -}}
  277.                                         </span>
  278.                                             </div>
  279.                                         </div>
  280.                                     </a>
  281.                                     <script>
  282.                                         gtag("event", "view_promotion", {
  283.                                             creative_name: "homepage-tab-banner",
  284.                                             promotion_name: "homepage-tab-banner",
  285.                                             {% if banners.items|length > 1 -%}
  286.                                             items: [
  287.                                                 {% for item in banners.gtagEventItems  %}
  288.                                                 {
  289.                                                     "item_id": "{{ item.item_id }}",
  290.                                                     "item_name": "{{ item.item_name }}",
  291.                                                     "index": "{{ item.index }}",
  292.                                                     "promotion_id": "{{ item.promotion_id }}",
  293.                                                     "promotion_name": "{{ item.promotion_name }}"
  294.                                                 },
  295.                                                 {% endfor %}
  296.                                             ]
  297.                                             {% else -%}
  298.                                             items: []
  299.                                             {% endif -%}
  300.                                         });
  301.                                         gtag("event", "view_promotion", {
  302.                                             creative_name: "homepage-featured-category",
  303.                                             promotion_name: "homepage-featured-category",
  304.                                             items: []
  305.                                         });
  306.                                         gtag("event", "view_promotion", {
  307.                                             creative_name: "homepage-featured-product",
  308.                                             promotion_name: "homepage-featured-product",
  309.                                             items: [
  310.                                                 {
  311.                                                     item_id: "{{ featuredProduct.lower.code }}",
  312.                                                     item_name: "{{ featuredProduct.lower.title }}",
  313.                                                     discount: {{ featuredProduct.lower.special|number_format(2, '.', '') }},
  314.                                                     index: 0,
  315.                                                     item_brand: "{{ featuredProduct.lower.vendor }}",
  316.                                                     price: {{ featuredProduct.lower.price|number_format(2, '.', '') }},
  317.                                                     quantity: 1
  318.                                                 }
  319.                                             ]
  320.                                         });
  321.                                     </script>
  322.                                 </div>
  323.                             {% else %}
  324.                                 <div class="small-banner lower"></div>
  325.                             {% endif %}
  326.                         {% endif %}
  327.                     {% endif %}
  328.                 </div>
  329.             </div>
  330.         </div>
  331.     {% endif %}
  333.     {% include 'AtechNetCoreBundle/Module/advantages.html.twig' with {'warrantyYear': warrantyYear, 'reviewCount': reviewCount, 'lang': lang} %}
  335.     {% if featuredCategories %}
  336.         <section class="featured-categories">
  337.             <div class="container">
  338.                 {% for category in featuredCategories %}
  339.                     <div class="link-item">
  340.                         <a href="{{ category.href }}">
  341.                             <div class="image-wrapper">
  342.                                 <img loading="lazy" decoding="async" src="{{ asset('theme/images/category/' ~ category.image) }}" alt="{{ category.title }}">
  343.                             </div>
  344.                             <div class="featured-category-title"><span>{{ category.title }}</span></div>
  345.                             <div class="arrow-right"></div>
  346.                         </a>
  347.                     </div>
  348.                 {% endfor %}
  349.             </div>
  350.         </section>
  351.     {% endif %}
  353.     <div class="main-content">
  354.         <div class="container">
  355.             {{ include(template_from_string(content_top)) }}
  357.             <!-- Product selection tab -->
  358.             <section class="main-products-carousel">
  359.                 <h3>{{ 'Popular product list'|trans }}</h3>
  360.                 <div class="owl-carousel" id="main-products-carousel">
  361.                     {% if mainProducts %}
  362.                         {{ macros.printProducts(mainProducts, currency, precision, 12, true, true, false) }}
  363.                     {% endif %}
  364.                 </div>
  365.                 <script>
  366.                     if ( window.dataLayer ) {
  367.                         window.dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  368.                         window.dataLayer.push({
  369.                             event: "view_item_list",
  370.                             ecommerce: {
  371.                                 item_list_id: "homepage-popular-products",
  372.                                 item_list_name: "homepage-popular-products",
  373.                                 items: [
  374.                                 {% for mainProduct in mainProducts %}{% if loop.index > 1 %},{% endif %}{
  375.                                         item_id: "{{ mainProduct.id }}",
  376.                                         item_name: "{{ mainProduct.title }}",
  377.                                         discount: {{ mainProduct.rawDiscountPrice }},
  378.                                         index: {{ loop.index }},
  379.                                         item_brand: "{{ mainProduct.vendor }}",
  380.                                         price: {{ mainProduct.rawPrice }},
  381.                                         quantity: 1
  382.                                     }
  383.                                 {% endfor %}
  384.                                 ]
  385.                             }
  386.                         });
  387.                     }
  388.                 </script>
  389.             </section>
  390.         </div>
  392.         <div class="testimonial-wrapper{% if domainId == const('Domain::DOMAIN_ID_RT_EU') %} eu-trustindex{% endif %}">
  393.             <div class="container">
  394.                 {%- if domainId == const('Domain::DOMAIN_ID_RT_EU') -%}
  395.                     <script defer async src='https://cdn.trustindex.io/loader.js?757dc6b28849419b02269e1ac4f'></script>
  396.                 {% else %}
  397.                     {{ include(template_from_string(content_reviews)) }}
  398.                 {%- endif -%}
  399.             </div>
  400.         </div>
  402.         <div id="preload-content-center">
  403.             <div class="category-selection">
  404.                 <div class="row preload">
  405.                     <div class="col-md-6">
  406.                         <div class="category-selection-item">
  407.                             <div class="category-selection-desc">
  408.                             {% for i in 1..4 %}
  409.                                 <div class="row">
  410.                                     <div class="col-3 col-sm-2"></div>
  411.                                     <div class="col-9 col-sm-10"></div>
  412.                                 </div>
  413.                             {% endfor %}
  414.                             </div>
  415.                         </div>
  416.                     </div>
  417.                     <div class="col-md-6">
  418.                         <div class="row wrapper">
  419.                             {% for i in 1..4 %}
  420.                                 <div class="col-sm-6"></div>
  421.                             {% endfor %}
  422.                         </div>
  423.                     </div>
  424.                 </div>
  425.             </div>
  427.             <div class="bazar-product-list">
  428.                 <div class="row preload">
  429.                     {% for i in 1..4 %}
  430.                         <div class="col-6 col-sm-4 col-lg-3">
  431.                             <div class="preload-item">
  432.                                 <div class="image"></div>
  433.                                 <div class="title1"></div>
  434.                                 <div class="title2"></div>
  435.                                 <div class="description"></div>
  436.                                 <div class="prices"></div>
  437.                                 <div class="button"></div>
  438.                             </div>
  439.                         </div>
  440.                     {% endfor %}
  441.                 </div>
  442.             </div>
  444.             <div class="heureka-list">
  445.                 <div class="row preload">
  446.                     <div class="col-sm-3">
  447.                         <div class="preload-item heureka-logo">
  448.                             <div class="image" style="border-radius: 200px;"></div>
  449.                             <div class="title1"></div>
  450.                         </div>
  451.                     </div>
  452.                     {% for i in 1..3 %}
  453.                         <div class="col-sm-3">
  454.                             <div class="preload-item">
  455.                                 <div class="image"></div>
  456.                                 <div class="title1"></div>
  457.                                 <div class="title2"></div>
  458.                             </div>
  459.                         </div>
  460.                     {% endfor %}
  461.                 </div>
  462.             </div>
  463.         </div>
  465.     <div id="content-center"></div>
  467.     {{ include(template_from_string(content_bottom)) }}
  468. {% endblock %}
  470. {% block stylesheets %}
  471.     <link rel="stylesheet" href="{{ asset('theme/owl-carousel/assets/owl.carousel.min.css'|appendAssetCache) }}">
  473.     {{ parent() }}
  474. {% endblock %}
  476. {% block javascripts %}
  477.     {{ parent() }}
  478.     <script type="text/javascript" src="{{ asset('theme/owl-carousel/owl.carousel.min.js'|appendAssetCache) }}"></script>
  479.     <script>
  480.         var mainProductsOwlObject = {
  481.             loop: false,
  482.             startPosition: 0,
  483.             dots: true,
  484.             checkVisibility: false,
  485.             nav: true,
  486.             navText: [
  487.                 `<i class="fas fa-chevron-left"></i><span class="visually-hidden">{{ 'Previous slide'|trans }}</span>`,
  488.                 `<i class="fas fa-chevron-right"></i><span class="visually-hidden">{{ 'Next slide'|trans }}</span>`
  489.             ],
  490.             responsive: {
  491.                 1330: {
  492.                     nav: true,
  493.                     items: 4,
  494.                     stagePadding: 10,
  495.                     margin: 0
  496.                 },
  497.                 990: {
  498.                     items: 4,
  499.                     nav: false,
  500.                     stagePadding: 10,
  501.                     margin: 20
  502.                 },
  503.                 576: {
  504.                     items: 3,
  505.                     nav: false,
  506.                     dots: true,
  507.                     stagePadding: 0
  508.                 },
  509.                 0: {
  510.                     items: 2,
  511.                     nav: false,
  512.                     dots: true,
  513.                     stagePadding: 0,
  514.                     mergeFit: true
  515.                 }
  516.             }
  517.         };
  519.         $(document).ready(function() {
  520.             $("#main-products-carousel").owlCarousel(mainProductsOwlObject);
  521.             $('#main-products-carousel').equation({
  522.                 carousel: true, 
  523.                 selectors: [
  524.                     '.product-list-item .product-list-details .product-list-name', 
  525.                     '.product-list-item .product-list-details .product-list-attributes'
  526.                 ]
  527.             });
  529.             $('#main-products-carousel .owl-dot').each(function(index) {
  530.                 $(this).attr('aria-label', "{{ 'Go to slide'|trans }}" + (index + 1));
  531.             });
  533.             $.ajax({
  534.                 method: 'GET',
  535.                 url: '{{ path("homepage_bottom_content_ajax") }}',
  536.                 success: function(response) {
  537.                     let result = response.replace(/\s/g,' ');
  539.                     $('#content-center').html(result).show();
  540.                     setCarousels();
  541.                     $('#preload-content-center').hide();
  542.                 }
  543.             });
  544.         });
  546.         function owlInitialized () {
  547.             $(".product-list .row.preload").remove();
  548.         }
  550.         function setCarousels () {
  551.             $('#categorySelection .carousel-inner').owlCarousel({
  552.                 items: 1,
  553.                 dots: false,
  554.                 nav: true,
  555.                 loop: true,
  556.                 navText: [
  557.                     '<i class="fas fa-chevron-left"></i>',
  558.                     '<i class="fas fa-chevron-right"></i>'
  559.                 ]
  560.             });
  562.             $("#homepage-blog-carousel").owlCarousel({
  563.                 items: 3,
  564.                 loop: false,
  565.                 startPosition: 0,
  566.                 nav: false,
  567.                 dots: true,
  568.                 responsive: {
  569.                     990: {
  570.                         items: 3,
  571.                         dots: false,
  572.                         stagePadding: 0
  573.                     },
  574.                     590: {
  575.                         items: 2,
  576.                         dots: true,
  577.                         stagePadding: 0
  578.                     },
  579.                     0: {
  580.                         items: 1,
  581.                         dots: true,
  582.                         stagePadding: 0
  583.                     }
  584.                 }
  585.             });
  587.             $("#under-amount-products-carousel").owlCarousel({
  588.                 loop: false,
  589.                 startPosition: 0,
  590.                 checkVisibility: false,
  591.                 margin: 20,
  592.                 navText: [
  593.                     '<i class="fas fa-chevron-left"></i>', 
  594.                     '<i class="fas fa-chevron-right"></i>'
  595.                 ],
  596.                 responsive: {
  597.                     1330: {
  598.                         nav: true,
  599.                         dots: true,
  600.                         items: 3
  601.                     },
  602.                     767: {
  603.                         items: 3,
  604.                         nav: false,
  605.                         dots: true
  606.                     },
  607.                     670: {
  608.                         items: 2,
  609.                         nav: false,
  610.                         dots: true,
  611.                         margin: 10,
  612.                         stagePadding: 40
  613.                     },
  614.                     380: {
  615.                         items: 1,
  616.                         nav: false,
  617.                         dots: true,
  618.                         mergeFit: true,
  619.                         margin: 10,
  620.                         stagePadding: 12
  621.                     },
  622.                     0: {
  623.                         items: 1,
  624.                         nav: false,
  625.                         dots: true,
  626.                         mergeFit: true,
  627.                         margin: 10,
  628.                         stagePadding: 12
  629.                     }
  630.                 }
  631.             });
  632.         }
  634.         {% if banners is not null and  banners.items|length > 1 %}
  635.             const myCarousel = document.getElementById("bannersCarouselIndicators");
  636.             const carouselIndicator = myCarousel.querySelector("#carousel-loader .current-percent");
  637.             let intervalID;
  639.             const carousel = new bootstrap.Carousel(myCarousel);
  641.             const carouselUpper = document.getElementById("featuredProduct-upper-carousel")
  642.                     ? new bootstrap.Carousel(document.getElementById("featuredProduct-upper-carousel"))
  643.                     : null;
  645.             const carouselLower = document.getElementById("featuredProduct-lower-carousel")
  646.                 ? new bootstrap.Carousel(document.getElementById("featuredProduct-lower-carousel"))
  647.                 : null;
  649.             window.addEventListener("load", function () {
  650.                 fillCarouselIndicator();
  651.             });
  653.             myCarousel.addEventListener("slid.bs.carousel", function (e) {
  654.                 fillCarouselIndicator();
  655.             });
  657.             function fillCarouselIndicator() {
  658.                 carouselIndicator.style.width = 0;
  659.                 clearInterval(intervalID);
  660.                 carousel.pause();
  661.                 if (carouselUpper)
  662.                 {
  663.                     carouselUpper.pause();
  664.                 }
  666.                 if (carouselLower)
  667.                 {
  668.                     carouselLower.pause();
  669.                 }
  671.                 let i = 0;
  673.                 intervalID = setInterval(function () {
  674.                     i++;
  676.                     myCarousel.querySelector(".current-percent").style.width = i + "%";
  678.                     if (i >= 100) {
  679.                         carousel.next();
  681.                         if (carouselUpper)
  682.                         {
  683.                             carouselUpper.next();
  684.                         }
  686.                         if (carouselLower)
  687.                         {
  688.                             carouselLower.next();
  689.                         }
  690.                     }
  691.                 }, {{ banners.interval > 0 ? banners.interval : 3 }} * 10);
  692.             }
  693.         {% endif %}
  694.     </script>
  695. {% endblock %}
  697. {% block bodyClass %}is-bazaar{% endblock %}
  699. {% block header %}
  700.     {{ include(template_from_string(header)) }}
  701. {% endblock %}
  703. {% block footer %}
  704.     {{ include(template_from_string(footer)) }}
  705. {% endblock %}