custom/plugins/ShopWithMeUI/src/Resources/views/storefront/section/cms-section-homepage.html.twig line 1

Open in your IDE?
  1. {% block page_content_section_default %}
  2.     {% set layout = section.sizingMode ? section.sizingMode|replace({"_": "-"}) : "container" %}
  3.     {% set pageHead = page %}
  4.     {% set bannerImageLink = config('ShopWithMeUI.config.BannerImageLink') %}
  5.     {% set bannerImageLinkPartner = config('ShopWithMeUI.config.BannerImageLinkPartner') %}
  6.     {% set linkBanner = config('ShopWithMeUI.config.LinkBanner') %}
  7.     {% set linkBannerPartner = config('ShopWithMeUI.config.LinkBannerPartner') %}
  8.     {% set isLoggedIn = context.customer is defined %}
  9.     {% set translationCode = page.header.activeLanguage.translationCode.code|lower|split('-') %}
  10.     {% set countryLocal = translationCode[1] %}
  12. <div id="swm_homepage" class="cms-section-default">
  13.     <div>
  14.         {% if countryLocal not in ['vn', 'th'] %}
  15.             {% if countryLocal in ['cn', 'hk'] %}
  16.                 <div class="home_header_video-box overflow-hidden" style="height: auto;">
  17.                     <div class="mobile:d-none desktop-carousel home_header_video-box-desktop">
  18.                         <div class="carousel-track">
  19.                             <div class="carousel-slide">
  20.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-Website-hk.webp')  }}" />
  21.                             </div>
  22.                             <div class="carousel-slide">
  23.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-Website-hk.webp')  }}" />
  24.                             </div>
  25.                         </div>
  27.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  28.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  29.                     </div>
  30.                     <div class="mobile:d-block d-none mobile-carousel home_header_video-box-mobile">
  31.                         <div class="carousel-track">
  32.                             <div class="carousel-slide">
  33.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-mobile-hk.webp')  }}" />
  34.                             </div>
  35.                             <div class="carousel-slide">
  36.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-mobile-hk.webp')  }}" />
  37.                             </div>
  38.                         </div>
  40.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  41.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  42.                     </div>
  43.                 </div>
  44.             {% elseif countryLocal in ['de'] %}
  45.                 <div class="home_header_video-box overflow-hidden" style="height: auto;">
  46.                     <div class="mobile:d-none desktop-carousel home_header_video-box-desktop">
  47.                         <div class="carousel-track">
  48.                             <div class="carousel-slide">
  49.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-Website-de.webp')  }}" />
  50.                             </div>
  51.                             <div class="carousel-slide">
  52.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-Website-de.webp')  }}" />
  53.                             </div>
  54.                         </div>
  56.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  57.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  58.                     </div>
  59.                     <div class="mobile:d-block d-none mobile-carousel home_header_video-box-mobile">
  60.                         <div class="carousel-track">
  61.                             <div class="carousel-slide">
  62.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-mobile-de.webp')  }}" />
  63.                             </div>
  64.                             <div class="carousel-slide">
  65.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-mobile-de.webp')  }}" />
  66.                             </div>
  67.                         </div>
  69.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  70.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  71.                     </div>
  72.                 </div>
  73.             {% else %}
  74.                 <div class="home_header_video-box overflow-hidden" style="height: auto;">
  75.                     <div class="mobile:d-none desktop-carousel home_header_video-box-desktop">
  76.                         <div class="carousel-track">
  77.                             <div class="carousel-slide">
  78.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-Website-en.webp')  }}" />
  79.                             </div>
  80.                             <div class="carousel-slide">
  81.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-Website-en.webp')  }}" />
  82.                             </div>
  83.                         </div>
  85.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  86.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  87.                     </div>
  88.                     <div class="mobile:d-block d-none mobile-carousel home_header_video-box-mobile">
  89.                         <div class="carousel-track">
  90.                             <div class="carousel-slide">
  91.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b1-mobile-en.webp')  }}" />
  92.                             </div>
  93.                             <div class="carousel-slide">
  94.                                 <img src="{{ asset('bundles/shopwithmeui/assets/imgs/april-deals/banner-b2-mobile-en.webp')  }}" />
  95.                             </div>
  96.                         </div>
  98.                         <button class="carousel-btn prev">{% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}</button>
  99.                         <button class="carousel-btn next">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</button>
  100.                     </div>
  101.                 </div>
  102.             {% endif %}
  103.         {% endif %}
  105. {#        {% if countryLocal not in ['cn', 'hk', 'vn'] %}#}
  106. {#            <div class="home_header_video-box overflow-hidden">#}
  107. {#                <video class="home_header_video-box-video" width="100%" height="100%" autoplay playsinline loop controls muted>#}
  108. {#                    <source onload="" src="https://sg-media.shopwithme.info/images/2024/12/03/87e57cb44617c7ea58d2da1b1886f351.mp4" type="video/mp4"/>#}
  109. {#                    <!-- <source src="/bundles/shopwithmeui/assets/video-eg.mp4" type="video/ogg" /> -->#}
  110. {#                    {{ 'app.noVid'|trans }}#}
  111. {#                </video>#}
  112. {#            </div>#}
  113. {#        {% endif %}#}
  114.         
  115.         {% if bannerImageLinkPartner and context.customer.affiliateCode == context.customer.campaignCode and isLoggedIn %}
  116.             {% set bannerSrc = bannerImageLinkPartner %}
  117.             {% set bannerLink = linkBannerPartner %}
  118.         {% elseif bannerImageLink %}
  119.             {% set bannerSrc = bannerImageLink %}
  120.             {% set bannerLink = linkBanner %}
  121.         {% else %}
  122.             {% set bannerSrc = null %}
  123.             {% set bannerLink = null %}
  124.         {% endif %}
  126.         {% if bannerSrc and countryLocal not in ['cn', 'hk', 'vn'] %}
  127.             <section class="banner-image-section">
  128.                 <a class="swm-m-auto" {% if bannerLink %}target="_blank" href="{{ bannerLink }}"{% endif %}>
  129.                     <img src="{{ bannerSrc }}" alt="">
  130.                 </a>
  131.             </section>
  132.         {% endif %}
  134.         <!--Subscription Banner-->
  135.         {% if productResult and countryLocal not in ['cn', 'hk', 'vn'] %}
  136.             <section class="banner-image-section">
  137.                 <a href="{{ seoUrl('frontend.detail.page', {'productId': productResult.id, '_query': { 'subscription': '1' }}) }}"
  138.                    class="save4more_homepage-banner width-full">
  139.                     <img src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/save4more/home/banner.png') }}"
  140.                          class="width-full"/>
  141.                 </a>
  142.             </section>
  143.         {% endif %}
  145.         <section
  146.                 class="homePage_promotionBanner_wrapper" {% if countryLocal in ['cn', 'hk', 'vn'] %} style="padding-top: 96px" {% endif %}>
  147.             <!--Container-->
  148.             <div class="homePage_promotionBanner_container d-flex gap-1.5rem swm-m-auto mobile:flex-col">
  149.                 <!--shop4free-->
  150.                 {% if countryLocal in ['cn', 'hk'] %}
  151.                     <div class="homePage_promotionBanner_shop4free homePage_promotionBanner_container_items homePage_promotionBanner_container_items-reverse d-flex flex-col">
  152.                         <!--Images-->
  153.                         <div class="homePage_promotionBanner_right_images-reverse d-flex justify-center">
  154.                             <img class="radius-8px"
  155.                                  src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/home_save4more.jpg') }}"
  156.                                  width="100%"/>
  157.                         </div>
  158.                         <!--Title-->
  159.                         <div class="homePage_promotionBanner_shop4free_title gap-1.5rem d-flex flex-col">
  160.                             <!--Text-->
  161.                             <div class="d-flex flex-col gap-8px">
  162.                                 <p class="homePage_promotionBanner_text typo-head-4-b">{{ 'app.home.promotion.promotionSave4moreTitleHK'|trans }}</p>
  163.                                 <p class="homePage_promotionBanner_subtext typo-sub-text-3">{{ 'app.home.promotion.promotionSave4moreSubtext'|trans }}</p>
  164.                             </div>
  165.                             <!--Button-->
  166.                             {# {% if countryLocal not in ['cn', 'hk'] %}
  167.                                 <a href="{{ seoUrl('frontend.save4more.home') }}">
  168.                                     <button class="homePage_promotionBanner_button button-square button-primary">
  169.                                         <div class="d-flex items-center justify-between gap-8px">
  170.                                             <div class="d-flex flex-col items-start">
  171.                                                 <span class="text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  172.                                             </div>
  173.                                             <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  174.                                                 <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  175.                                                 <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  176.                                             </svg>
  177.                                         </div>
  178.                                     </button>
  179.                                 </a>
  180.                                 {% endif %} #}
  181.                         </div>
  182.                     </div>
  183.                 {% endif %}
  184.                 <div class="homePage_promotionBanner_right d-flex flex-col mobile:flex-col-reverse">
  185.                     <!--Lucky Wheel-->
  186.                     <div class="homePage_promotionBanner_luckyWheel homePage_promotionBanner_container_items d-flex flex-1 mobile:flex-col">
  187.                         <!--Content-->
  188.                         <div class="homePage_promotionBanner_right_content d-flex flex-col gap-1.5rem">
  189.                             <!--Text-->
  190.                             <div class="d-flex flex-col gap-8px">
  191.                                 <p class="typo-head-4-b">{{ 'app.home.promotion.earnCreditLuckyWheel'|trans }}</p>
  192.                                 <div>
  193.                                     <p class="homePage_promotionBanner_subtext typo-sub-text-2">{{ 'app.home.promotion.earnCreditLuckyWheelSubtext'|trans }}</p>
  194.                                     {# <ul class="homePage_promotionBanner_subtext" style="padding: 0;">
  195.                                             <li class="typo-sub-text-2">-{{ 'app.home.promotion.earnCreditLuckyWheelSubtitle'|trans }}</li>
  196.                                             <li class="typo-sub-text-2">-{{ 'app.home.promotion.earnCreditLuckyWheelSubtitle2'|trans }}</li>
  197.                                             <li class="typo-sub-text-2">-{{ 'app.home.promotion.earnCreditLuckyWheelSubtitle3'|trans }}</li>
  198.                                         </ul> #}
  199.                                 </div>
  200.                             </div>
  201.                             <!--Button-->
  202.                             <a href="{{ seoUrl('frontend.credit.lucky-wheel') }}">
  203.                                 <button class="homePage_promotionBanner_button button-square button-primary">
  204.                                     <div class="d-flex items-center justify-between gap-8px">
  205.                                         <div class="d-flex flex-col items-start">
  206.                                             <span class="text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  207.                                         </div>
  208.                                         <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  209.                                              xmlns="http://www.w3.org/2000/svg">
  210.                                             <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  211.                                                   stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  212.                                             <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor"
  213.                                                   stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  214.                                         </svg>
  215.                                     </div>
  216.                                 </button>
  217.                             </a>
  218.                         </div>
  219.                         <!--Image-->
  220.                         <div class="homePage_promotionBanner_right_images">
  221.                             <img class="radius-8px"
  222.                                  src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/Lucky_Wheel.jpeg') }}"
  223.                                  width="100%"/>
  224.                         </div>
  225.                     </div>
  226.                     <!--Coupon-->
  227.                     <div class="homePage_promotionBanner_coupon homePage_promotionBanner_container_items d-flex flex-1 mobile:flex-col">
  228.                         <!--Content-->
  229.                         <div class="homePage_promotionBanner_right_content d-flex flex-col gap-1.5rem ">
  230.                             <!--Text-->
  231.                             <div class="d-flex flex-col gap-8px">
  232.                                 <p class="typo-head-4-b">{{ 'app.home.promotion.get1000Credits'|trans }}</p>
  233.                                 <p class="homePage_promotionBanner_subtext typo-sub-text-2">{{ 'app.home.promotion.get1000CreditsSubtitle'|trans }}</p>
  234.                             </div>
  235.                             <!--Button-->
  236.                             <a href="{{ seoUrl('frontend.ai.stream.upload') }}">
  237.                                 <button class="homePage_promotionBanner_button button-square button-primary">
  238.                                     <div class="d-flex items-center justify-between gap-8px">
  239.                                         <div class="d-flex flex-col items-start">
  240.                                             <span class="text-body-m">{{ 'app.postVideoNow'|trans }}</span>
  241.                                         </div>
  242.                                         <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  243.                                              xmlns="http://www.w3.org/2000/svg">
  244.                                             <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  245.                                                   stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  246.                                             <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor"
  247.                                                   stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  248.                                         </svg>
  249.                                     </div>
  250.                                 </button>
  251.                             </a>
  252.                         </div>
  253.                         <!--Images-->
  254.                         <div class="homePage_promotionBanner_right_images">
  255.                             <img class="radius-8px"
  256.                                  src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/img_money.jpeg') }}"
  257.                                  width="100%"/>
  258.                         </div>
  259.                     </div>
  260.                 </div>
  262.                 <div class="homePage_promotionBanner_shop4free homePage_promotionBanner_container_items homePage_promotionBanner_container_items-reverse d-flex flex-col">
  263.                     <!--Images-->
  264.                     <div class="homePage_promotionBanner_right_images-reverse d-flex justify-center">
  265.                         <img class="radius-8px"
  266.                              src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/home_samsungTv.png') }}"
  267.                              width="100%"/>
  268.                     </div>
  269.                     <!--Title-->
  270.                     <div class="homePage_promotionBanner_shop4free_title gap-1.5rem d-flex flex-col">
  271.                         <!--Text-->
  272.                         <div class="d-flex flex-col gap-8px">
  273.                             <p class="homePage_promotionBanner_text typo-head-4-b">{{ 'app.shop4freeUpper'|trans }}</p>
  274.                             <p class="homePage_promotionBanner_subtext typo-sub-text-3">{{ 'app.home.promotion.promotionShop4freeSubtext'|trans|raw }}</p>
  275.                         </div>
  276.                         <!--Button-->
  277.                         {% if countryLocal in ['vn'] %}
  278.                             <button class="homePage_promotionBanner_button button-square button-primary" data-toggle="modal" data-target="#featureComingSoonModal">
  279.                                 <div class="d-flex items-center justify-between gap-8px">
  280.                                     <div class="d-flex flex-col items-start">
  281.                                         <span class="text-body-m">{{ 'app.home.shop4freeNow'|trans }}</span>
  282.                                     </div>
  283.                                     <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  284.                                          xmlns="http://www.w3.org/2000/svg">
  285.                                         <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  286.                                               stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  287.                                         <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  288.                                               stroke-linecap="round" stroke-linejoin="round"/>
  289.                                     </svg>
  290.                                 </div>
  291.                             </button>
  292.                         {% else %}
  293.                             <a href="{{ seoUrl('frontend.shop4free') }}">
  294.                                 <button class="homePage_promotionBanner_button button-square button-primary">
  295.                                     <div class="d-flex items-center justify-between gap-8px">
  296.                                         <div class="d-flex flex-col items-start">
  297.                                             <span class="text-body-m">{{ 'app.home.shop4freeNow'|trans }}</span>
  298.                                         </div>
  299.                                         <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  300.                                              xmlns="http://www.w3.org/2000/svg">
  301.                                             <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  302.                                                   stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  303.                                             <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  304.                                                   stroke-linecap="round" stroke-linejoin="round"/>
  305.                                         </svg>
  306.                                     </div>
  307.                                 </button>
  308.                             </a>
  309.                         {% endif %}
  310.                     </div>
  311.                 </div>
  313.             </div>
  314.         </section>
  317.         <section class="section-3__home__best__quality swm-m-auto">
  318.             <div id="desktop_section-3__home__best__quality-header" class="section-3__home__best__quality-header">
  319.                 <div class="typo-head-2 d-flex items-end section-3__home__best__quality-header-text">
  320.                     {{ 'app.home.getBestHappy'|trans }} <img
  321.                             src="{{ asset('bundles/shopwithmeui/assets/icons/quality-header-icon.svg') }}"
  322.                             class="item_best_quality_img_icon section-3__home__best__quality-header-icon width-full height-full"
  323.                             style="width: 45px; height: 45px; margin-left: 4px">
  324.                 </div>
  325.                 <span class="typo-sub-text-2">{{ 'app.home.getBestHappyTitle'|trans }}</span>
  326.             </div>
  327.             <div class="section-3__home__best__quality-content swm-mt-8">
  328.                 {% set categoriesMap = {
  329.                     'all': { 'title': 'app.home.allProducts', 'savings': '78%', 'time': 'app.home.limitedTime' },
  330.                     '5bf8d9999ab24a84930e7bf07d7d4a6e': { 'title': 'app.home.rejuvenateAndBeYouthful', 'savings': '84%', 'time': 'app.home.limitedTime' },
  331.                     'a8b823eae895400cb33b767d41502dd4': { 'title': 'app.home.relaxWithWellness', 'savings': '74%', 'time': 'app.home.limitedTime' },
  332.                     'defe75e13ae7497d84edc460491818c6': { 'title': 'app.home.haveAFitterBody', 'savings': '78%', 'time': 'app.home.limitedTime' },
  333.                     'a3e978d399ad4e56bf9eab1e896dd6fe': { 'title': 'app.home.improveHealth', 'savings': '74%', 'time': 'app.home.limitedTime' },
  334.                     '4b9877842d644023a899643e1cd8548f': { 'title': 'app.home.redeemProductsForFREE', 'savings': 'app.home.creditExchange', 'time': 'app.home.greatProducts' },
  335.                     '4c4d1ba950094b3a959fce443c65557d': { 'title': 'app.home.hiTechLiving', 'savings': '85%', 'time': 'app.home.limitedTime' }
  336.                 } %}
  337.                 {% for index, category in categories %}
  338.                     {% set categoryId = category.id|trim %}
  339.                     {% set data = categoriesMap[categoryId] ?? null %}
  340.                     {% if countryLocal in ['vn'] and category.name|upper == 'SHOP4FREE' %}
  341.                         {% continue %}
  342.                     {% endif %}
  344.                     <div class="section-3__home__best__quality-content-item section-3__home__best__quality-content-item-{{ index }} border-radius-1 position-relative overflow-hidden"
  345.                          id="category-item-{{ index }}" data-id="{{ category.id }}"
  346.                          data-seoUrlShop4free="{{ seoUrl('frontend.shop4free') }}">
  347.                         <div class="section-3__home__best__quality-content-item-container  position-absolute d-flex justify-between flex-col">
  348.                             <div class="section-3__home__best__quality-content-item-tag border-radius-3 d-flex items-center justify-start">
  349.                                 <img src="{{ asset('bundles/shopwithmeui/assets/icons/category-' ~ category.id ~ '-icon.svg') }}"
  350.                                      class="item_best_quality_img_icon">
  351.                                 <span class="section-3__home__best__quality-content-item-tag-name typo-sub-text-4-smb">{{ category.name }}</span>
  352.                             </div>
  353.                         </div>
  354.                         <img src-lazy="{{ asset('bundles/shopwithmeui/assets/imgs/bestQuality/category-' ~ category.id ~ '.jpeg') }}"
  355.                              class="section-3__home__best__quality-content-item-img item_best_quality_img">
  356.                         <div class="section-3__home__best__quality-content-item-overlay position-absolute"></div>
  358.                         {% if data %}
  359.                             <div class="quality-content-infomation">
  360.                                 <div class="quality-content-infomation-head text-heading-5-m">{{ data.title|trans }}</div>
  361.                                 <div class="quality-content-infomation-title">
  362.                                     <div class="quality-content-infomation-title-savings text-body-m">{{ data.savings|trans }}
  363.                                         {% if categoryId != '4b9877842d644023a899643e1cd8548f' %}
  364.                                             {{ 'app.savings'|trans }}
  365.                                         {% endif %}
  366.                                     </div>
  367.                                     <div class="quality-content-infomation-title-time text-body-r">
  368.                                         <div class="quality-content-infomation-title-time-dot"></div> {{ data.time|trans }}
  369.                                     </div>
  370.                                 </div>
  371.                             </div>
  372.                         {% endif %}
  373.                     </div>
  375.                 {% endfor %}
  376.             </div>
  377.         </section>
  379.         <section id="home-list-products">
  380.             {% for index, category in categories %}
  381.             <div id="category-product-list-{{ category.id }}" class="homePage_productList_container d-none">
  382.                 {% if category.products && category.products %}
  383.                 {% for product in category.products %}
  384.                 {% set subscriptionProduct = product.customFields.isBuyProductSubscription ?? false %}
  385.                 {% set imageSave4moreConfig = product.customFields.mediaList.productSave4more ?: product.cover.media %}
  386.                 {% set imageProduct = subscriptionProduct ? imageSave4moreConfig : product.cover.media %}
  387.                 <!--Container-->
  388.                 <div class="mb-5 swm-m-auto d-flex flex-col items-center" style="gap: 34px;">
  389.                     <!--Product Infos-->
  390.                     <div class="homePage_productList_product_container d-flex flex-col items-center gap-1.5rem">
  391.                         <!--Certi-->
  392.                         <div class="d-flex gap-1rem justify-center" style="flex-wrap: wrap">
  393.                             {% if product.customFields.productTags is not null and product.customFields.productTags|length > 0 %}
  394.                                 {% for productTag in product.customFields.productTags %}
  395.                                     <button class="swm-btn swm-btn-certificate">{{ productTag.name }}</button>
  396.                                 {% endfor %}
  397.                             {% else %}
  398.                                 <button class="swm-btn swm-btn-certificate">{{ category.name }}</button>
  399.                             {% endif %}
  400.                             {# <button class="swm-btn swm-btn-certificate"><img src="{{ asset('bundles/shopwithmeui/assets/icons/certi_check.svg') }}"/>2 Year Warranty</button>
  401.                                         <button class="swm-btn swm-btn-certificate">Pro Sonic Technology</button> #}
  402.                         </div>
  403.                         <!--Infos-->
  404.                         <div class="homePage_productList_title_container d-flex flex-col items-center gap-1rem">
  405.                             <p class="login__title__title text-center"
  406.                                style="max-width: 608px">{{ product.translated.name }}</p>
  407.                             {% autoescape false %}
  408.                                 {% set description = (product.translated.customFields.summary ?: product.translated.description)|striptags|raw %}
  409.                                 <p class="homePage_productList_subtext typo-sub-text-2 text-center"
  410.                                    style="max-width: 620px;">
  411.                                     {{ description|length > 280 ? description|slice(0, 280) ~ '...' : description|raw }}
  412.                                 </p>
  413.                             {% endautoescape %}
  414.                         </div>
  415.                         <!--Countdown-->
  416.                         <div class="homePage_productList_countdown_container d-flex flex-col items-center gap-1.5rem">
  417.                             <div class="homePage_productList_countdown-saving d-flex items-center">
  418.                                 {% if product.extensions.currentDeal.discountRate is not null %}
  419.                                     <p class="homePage_productList_sale typo-head-4-b text-center">{{ 'app.home.listing.save'|trans }} {{ product.extensions.currentDeal.discountRate }}
  420.                                         % {{ 'app.home.listing.now'|trans }}</p>
  421.                                 {% endif %}
  422.                                 <div class="homePage_productList_cao_dao d-flex gap-1rem items-center">
  423.                                     <div class="d-flex" style="gap: 4px;">
  424.                                         <img src="{{ asset('bundles/shopwithmeui/assets/icons/lighting-circle.svg') }}"
  425.                                              class="icon-svg-lighting-circle"/>
  426.                                         <span class="homePage_productList_cao_dao_text">{{ 'app.home.listing.timeLeft'|trans }}</span>
  427.                                     </div>
  428.                                     {# <div class="homePage_productList_cao_dao_time d-flex items-center">
  429.                                                     <div class="homePage_productList_cao_dao_time_box">09d</div>
  430.                                                     <span>:</span>
  431.                                                     <div class="homePage_productList_cao_dao_time_box">09h</div>
  432.                                                     <span>:</span>
  433.                                                     <div class="homePage_productList_cao_dao_time_box">23m</div>
  434.                                                     <span>:</span>
  435.                                                     <div class="homePage_productList_cao_dao_time_box">56s</div>
  436.                                                 </div> #}
  437.                                     <div class="deals-expiration-timer homePage_productList_cao_dao_time d-flex items-center"
  438.                                          data-expired-text="{{ 'app.expired'|trans|sw_sanitize }}"
  439.                                          data-expired-time="{{ product.extensions.currentDeal.endDate|date("U") }}"></div>
  440.                                 </div>
  441.                             </div>
  442.                             <div class="d-flex items-center gap-1.5rem">
  443.                                 <a href="{{ seoUrl('frontend.detail.page', {'productId': product.id}) }}"
  444.                                    class="text-center">
  445.                                     <button class="homePage_promotionBanner_button button-square button-primary swm-m-auto">
  446.                                         <div class="d-flex items-center justify-between gap-8px">
  447.                                             <div class="d-flex flex-col items-start">
  448.                                                 <span class="text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  449.                                             </div>
  450.                                             <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  451.                                                  xmlns="http://www.w3.org/2000/svg">
  452.                                                 <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  453.                                                       stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  454.                                                 <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor"
  455.                                                       stroke-width="1.5" stroke-linecap="round"
  456.                                                       stroke-linejoin="round"/>
  457.                                             </svg>
  458.                                         </div>
  459.                                     </button>
  460.                                 </a>
  461.                                 {% if subscriptionProduct %}
  462.                                     <a href="{{ seoUrl('frontend.detail.page', {'productId': product.id, '_query': { 'subscription': '1' }}) }}"
  463.                                        class="text-center">
  464.                                         <button class="homePage_promotionBanner_button homePage_promotionBanner_button-subscription button-square button-primary swm-m-auto">
  465.                                             <div class="d-flex items-center justify-between gap-8px">
  466.                                                 <div class="d-flex flex-col items-start">
  467.                                                     <span class="text-body-m">{{ 'app.subscriptionPage.emptyPages.joinSave4moreNow'|trans|sw_sanitize }}</span>
  468.                                                 </div>
  469.                                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  470.                                                      xmlns="http://www.w3.org/2000/svg">
  471.                                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  472.                                                           stroke="currentColor" stroke-width="1.5"
  473.                                                           stroke-linecap="round"/>
  474.                                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor"
  475.                                                           stroke-width="1.5" stroke-linecap="round"
  476.                                                           stroke-linejoin="round"/>
  477.                                                 </svg>
  478.                                             </div>
  479.                                         </button>
  480.                                     </a>
  481.                                 {% endif %}
  482.                             </div>
  483.                         </div>
  484.                     </div>
  485.                     <!--Images-->
  486.                     <div class="homePage_productList_container-info-img-box width-full"
  487.                          style="max-width: 1240px; max-height: 600px">
  488.                         {% if imageProduct.mimeType starts with 'video' %}
  489.                             <video class="width-full homePage_productList_container-info-img" autoplay playsinline muted
  490.                                    video-lazy-load style="max-height: 600px; border-radius: 20px; object-fit: contain;">
  491.                                 <source data-src="{{ imageProduct.url }}" type="{{ imageProduct.mimeType }}"/>
  492.                             </video>
  493.                         {% else %}
  494.                             <img class="width-full homePage_productList_container-info-img"
  495.                                  style="object-fit: cover;max-height: 600px; border-radius: 20px; object-fit: contain"
  496.                                  src-lazy="{{ imageProduct.url }}">
  497.                         {% endif %}
  498.                     </div>
  499.                 </div>
  500.                 {% endfor %}
  501.                 {% endif %}
  502.             </div>
  503.             {% endfor %}
  504.         </section>
  506.         <section class="section-5__home__experience swm-m-auto overflow-hidden swm-mb-8"
  507.                  data-video-list-plugin="true"
  508.                  data-path="{{ path('frontend.data-stream') }}"
  509.                  data-csrf="{{ sw_csrf('frontend.data-stream', {'mode': 'token'}) }}">
  510.             <div class="section-5__home__experience-header typo-head-2">
  511.                 {{ 'app.home.experienceItYourSelf'|trans }}
  512.             </div>
  514.             <div class="section-5__home__experience-container d-flex items-center justify-start">
  516.             </div>
  517.             {#                <div class="section-5__home__experience-container_mobile d-flex items-center justify-start"> #}
  518.             {#                    {% if dataStream|first %} #}
  519.             {#                        {% set video = null %} #}
  520.             {#                        {% if dataStream|first.postChildren.elements && dataStream|first.postChildren.elements|first %}    #}
  521.             {#                            {% set video = dataStream|first.postChildren.elements|first.file.fileUrl %} #}
  522.             {#                        {% endif %} #}
  523.             {#                    <div class="section-5__home__experience-container-item border-radius-1 position-relative overflow-hidden"> #}
  524.             {#                        <div id="home_aiStream_play" class="section-5__home__experience-container-item-content  position-absolute d-flex justify-between flex-col"> #}
  525.             {#                            <div class="section-5__home__experience-container-item-tag d-flex items-center justify-start"> #}
  526.             {#                                <img src="/bundles/shopwithmetheme/assets/icons/mage_video.svg" class="item_experience_img_icon"> #}
  527.             {#                                <span class="section-5__home__experience-container-item-tag-name typo-sub-text-4-smb">Consumer #}
  528.             {#                                    Electronics</span> #}
  529.             {#                            </div> #}
  530.             {#                            <div class="section-5__home__experience_container_mobile_navigation position-absolute d-flex flex-col"> #}
  531.             {#                                <div class="d-flex gap-1rem flex-col section-5__home__experience_container_mobile_navigation_actions"> #}
  532.             {#                                    <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  533.             {#                                        <img class="section-5__home__experience_container_mobile_navigation_action_img" src="{{ asset('bundles/shopwithmetheme/assets/imgs/aiStream_heart.svg') }}"/> #}
  534.             {#                                        <span class="typo-sub-text-4 section-5__home__experience_container_mobile_navigation_info">{{dataStream|first.likeCount}}</span> #}
  535.             {#                                    </div> #}
  536.             {#                                    <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  537.             {#                                        <img class="section-5__home__experience_container_mobile_navigation_action_img" src="{{ asset('bundles/shopwithmetheme/assets/imgs/aiStream_edit.svg') }}"/> #}
  538.             {#                                        <span class="typo-sub-text-4 section-5__home__experience_container_mobile_navigation_info">Edit</span> #}
  539.             {#                                    </div> #}
  540.             {#                                    <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  541.             {#                                        <img class="section-5__home__experience_container_mobile_navigation_action_img" src="{{ asset('bundles/shopwithmetheme/assets/imgs/aiStream_cart.svg') }}"/> #}
  542.             {#                                    </div> #}
  543.             {#                                </div> #}
  544.             {#                                <div class=" gap-8px d-flex flex-col"> #}
  545.             {#                                    <img src="/bundles/shopwithmetheme/assets/imgs/aiStream_navUp.svg"/> #}
  546.             {#                                    <img src="/bundles/shopwithmetheme/assets/imgs/aiStream_navDown.svg"/> #}
  547.             {#                                </div> #}
  548.             {#                            </div> #}
  549.             {#                            <div class="section-5__home__experience_container_mobile_video_infor d-flex flex-col"> #}
  550.             {#                                <div class="section-5__home__experience_container_video_infor_user_info d-flex items-center"> #}
  551.             {#                                    <img class="section-5__home__experience_container_video_avatar_image" src="{{ asset('bundles/shopwithmeui/assets/imgs/shop_with_me.svg') }}"/> #}
  552.             {#                                    <span class="section-5__home__experience_container_username typo-sub-text-4">{{dataStream|first.postUser}}</span> #}
  553.             {#                                </div> #}
  554.             {#                                <div class="section-5__home__experience_container_video_infor d-flex flex-col gap-8px"> #}
  555.             {#                                    <span class="section-5__home__experience_container_video_infor_product_name">{{dataStream|first.product.translated.name}}</span> #}
  556.             {#                                    <div id="userScore" class="section-5__home__experience_container_mobile_video_infor_truncate-text-container d-flex"> #}
  557.             {#                                        <span class="typo-sub-text-5-smb section-5__home__experience_container_video_infor_user_review truncate-text truncated"> #}
  558.             {#                                            {{dataStream|first.product.translated.description|raw}} #}
  559.             {#                                        </span> #}
  560.             {#                                        <span class="typo-sub-text-5-smb show-more-btn">more</span> #}
  561.             {#                                    </div> #}
  562.             {#                                </div> #}
  563.             {#                            </div> #}
  564.             {#                            <div  class="section-5__home__experience_container_mobile_video_pause_button position-absolute"> #}
  565.             {#                                <img id="home_aiStream_play_button" src="{{ asset('bundles/shopwithmetheme/assets/imgs/aiStream_play.svg') }}"/> #}
  566.             {#                            </div> #}
  567.             {#                        </div> #}
  568.             {#                        <video id="home_aiStream_vid" class="section-5__home__experience-container-item-img item_experience_img width-full" muted playsinline loop> #}
  569.             {#                            <source src="{{video}}" type="video/mp4" /> #}
  570.             {#                        </video> #}
  571.             {#                        <div class="section-5__home__experience-container-item-overlay position-absolute"></div> #}
  572.             {#                    </div> #}
  573.             {#                {% endif %} #}
  574.             {#                </div> #}
  575.         </section>
  577.         <section
  578.                 class="homePage_how_wrapper">
  579.             <!--Container-->
  580.             <div
  581.                     class="homePage_how_container d-flex flex-col items-center swm-m-auto">
  582.                 <!--Title-->
  583.                 <div class="homePage_how_container_title d-flex flex-col items-center">
  584.                     <p class="homePage_how_container_title_title typo-head-2">{{ 'app.home.howToShop4free.howToShop4freeTitle'|trans }}</p>
  585.                     <p class="homePage_how_container_title_des typo-sub-text-2">{{ 'app.home.howToShop4free.howToShop4freeSubTitle'|trans }}</p>
  586.                 </div>
  587.                 <!--Contents-->
  588.                 <div
  589.                         class="d-flex mobile:flex-col" style="gap: 27px;">
  590.                     <!--Content-->
  591.                     <div
  592.                             class="homePage_how_content border-radius-5 gap-1.5rem d-flex flex-col items-center">
  593.                         <!--Icon-->
  594.                         <div>
  595.                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/home_spinner.svg') }}"/>
  596.                         </div>
  597.                         <!--Text-->
  598.                         <div class="homePage_how_content_text items-center d-flex flex-col text-center">
  599.                             <p class="homePage_how_content_text_title text-heading-3-m">{{ 'app.home.howToShop4free.howToItems.luckyWheel.title'|trans|raw }}</p>
  600.                             <p class="homePage_how_content_text_des typo-sub-text-2">{{ 'app.home.howToShop4free.howToItems.luckyWheel.description'|trans|raw }}</p>
  601.                         </div>
  602.                         <!--Button-->
  603.                         <button class="d-none homePage_how_content_button swm-btn swm-btn-learnMore-white swm-m-auto">
  604.                             <div class="d-flex items-center justify-between gap-8px">
  605.                                 <div class="d-flex flex-col items-start">
  606.                                     <span class="homePage_how_content_button_text text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  607.                                 </div>
  608.                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  609.                                      xmlns="http://www.w3.org/2000/svg">
  610.                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  611.                                           stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  612.                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  613.                                           stroke-linecap="round" stroke-linejoin="round"/>
  614.                                 </svg>
  615.                             </div>
  616.                         </button>
  617.                     </div>
  618.                     <div
  619.                             class="homePage_how_content border-radius-5 gap-1.5rem d-flex flex-col items-center">
  620.                         <!--Icon-->
  621.                         <div>
  622.                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/home_friends.svg') }}"/>
  623.                         </div>
  624.                         <!--Text-->
  625.                         <div class="homePage_how_content_text items-center d-flex flex-col text-center">
  626.                             <p class="homePage_how_content_text_title text-heading-3-m">{{ 'app.home.howToShop4free.howToItems.inviteFriends.title'|trans|raw }}</p>
  627.                             <p class="homePage_how_content_text_des typo-sub-text-2">{{ 'app.home.howToShop4free.howToItems.inviteFriends.description'|trans|raw }}</p>
  628.                         </div>
  629.                         <!--Button-->
  630.                         <button class="d-none homePage_how_content_button swm-btn swm-btn-learnMore-white swm-m-auto">
  631.                             <div class="d-flex items-center justify-between gap-8px">
  632.                                 <div class="d-flex flex-col items-start">
  633.                                     <span class="homePage_how_content_button_text text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  634.                                 </div>
  635.                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  636.                                      xmlns="http://www.w3.org/2000/svg">
  637.                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  638.                                           stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  639.                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  640.                                           stroke-linecap="round" stroke-linejoin="round"/>
  641.                                 </svg>
  642.                             </div>
  643.                         </button>
  644.                     </div>
  645.                     <div
  646.                             class="homePage_how_content border-radius-5 gap-1.5rem d-flex flex-col items-center">
  647.                         <!--Icon-->
  648.                         <div>
  649.                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/home_cart.svg') }}"/>
  650.                         </div>
  651.                         <!--Text-->
  652.                         <div class="homePage_how_content_text items-center d-flex flex-col text-center">
  653.                             <p class="homePage_how_content_text_title text-heading-3-m">{{ 'app.home.howToShop4free.howToItems.addBasket.title'|trans|raw }}</p>
  654.                             <p class="homePage_how_content_text_des typo-sub-text-2">{{ 'app.home.howToShop4free.howToItems.addBasket.description'|trans|raw }}</p>
  655.                         </div>
  656.                         <!--Button-->
  657.                         <button class="d-none homePage_how_content_button swm-btn swm-btn-learnMore-white swm-m-auto">
  658.                             <div class="d-flex items-center justify-between gap-8px">
  659.                                 <div class="d-flex flex-col items-start">
  660.                                     <span class="homePage_how_content_button_text text-body-m">{{ 'app.home.learnMore'|trans }}</span>
  661.                                 </div>
  662.                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none"
  663.                                      xmlns="http://www.w3.org/2000/svg">
  664.                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1"
  665.                                           stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  666.                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  667.                                           stroke-linecap="round" stroke-linejoin="round"/>
  668.                                 </svg>
  669.                             </div>
  670.                         </button>
  671.                     </div>
  672.                 </div>
  673.             </div>
  674.         </section>
  677.     </div>
  679.     {% if countryLocal in ['vn'] %}
  680.         <!--Feature Coming Soon Modal-->
  681.         <div class="modal fade" id="featureComingSoonModal" tabindex="-1" role="dialog" aria-hidden="true">
  682.             <div class="modal-dialog modal-dialog-centered" role="document">
  683.                 <div class="modal-content feature-coming-soon-modal">
  684.                     <button type="button" class="feature-coming-soon-modal__close" data-dismiss="modal" aria-label="Close">
  685.                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  686.                             <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  687.                         </svg>
  688.                     </button>
  689.                     <p class="feature-coming-soon-modal__text typo-head-4-b">{{ 'app.featureAvailableSoon'|trans }}</p>
  690.                 </div>
  691.             </div>
  692.         </div>
  693.     {% endif %}
  694. </div>
  695. <script>
  696.     var translation = {
  697.         ...(translation || {}),
  698.         more: "{{ 'app.aiStreamPage.more'|trans|sw_sanitize }}",
  699.         less: "{{ 'app.aiStreamPage.less'|trans|sw_sanitize }}"
  700.     }
  701.     const translationsProductDetail = {
  702.         expired: "{{ 'app.expired'|trans|sw_sanitize }}",
  703.     };
  704. </script>
  705. {% endblock %}