custom/plugins/ShopWithMeUI/src/Resources/views/storefront/page/product-detail/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/base.html.twig' %}
  3. {% block base_content %}
  4.     {% block page_product_detail %}
  5.         {% set productTranslatedCustomFields = page.product.translated.customFields %}
  6.         {% set productCustomFields = page.product.customFields %}
  7.         {% set isCreditProduct = productCustomFields.productIsBuyWithCredit ?? false %}
  9.         {% set id = page.product.id %}
  10.         {% set currentDeal = page.product.extensions.currentDeal ?: null %}
  12.         {#    {% set productBuyerRewardConfigs = page.product.customFields['productBuyerRewardConfigs'] %} #}
  13.         {% set productBuyerRewardConfigs = currentDeal.referralTables ?: [] %}
  14.         {% set isBuyWithCredit = productCustomFields['productIsBuyWithCredit'] %}
  15.         {% set benefits = productCustomFields['benefits'] || null %}
  16.         {% set beforeAndAfterImg = productCustomFields['beforeAndAfterImg'] %}
  17.         {% set productInfosImg = productCustomFields['productInfosImg'] %}
  18.         {# {% set mediaCollection = searchMedia([beforeAndAfterImg, productInfosImg], context.context) %}
  19.         {% set beforeAndAfterImgMedia = mediaCollection.get(beforeAndAfterImg) %}
  20.         {% set productInfosMedia = mediaCollection.get(productInfosImg) %} #}
  21.         {% set productInfos = productCustomFields['productInfos'] %}
  22.         {% set selectedLanguage = (page.header.activeLanguage.translationCode.code ?: app.request.locale)|lower|split('-')[0] %}
  23.         {% if currentDeal is not null %}
  24.             {% if (currentDeal.marketPrice ?: [])|filter(v => v.currencyId == _context.context.currency.id)|first %}
  25.                 {% set marketValue = currentDeal.marketPrice|filter(v => v.currencyId == _context.context.currency.id)|first.gross -%}
  26.             {% else %}
  27.                 {% set marketValue = currentDeal.marketPrice.first.gross * _context.context.currency.factor %}
  28.             {% endif %}
  29.         {% endif %}
  30.         {% set productDiscountRateValue = productCustomFields.productDiscountRate %}
  32.         {# Filter out the rest of the jpg files (exclude mp4 and certificate jpg) #}
  33.         {% set restFiles = (page.product.media.elements ?: [])|filter(media => media.media.mimeType starts with 'image' and 'Certificate' not in media.media.fileName) %}
  35.         {% set productVideo = dataStream %}
  37.         {% set bannerImage = productCustomFields.mediaList.banner ?: page.product.cover.media %}
  38.         {% set topLeftImage = productCustomFields.mediaList.topLeft %}
  39.         {% set topRightImage = productCustomFields.mediaList.topRight %}
  40.         {% set video = productCustomFields.mediaList.video ?: (page.product.media.elements ?: [])|filter(media => media.media.mimeType starts with 'video')|first.media %}
  41.         {#        {% set productLeftImage = productCustomFields.mediaList.productLeft ?: (restFiles|length > 0 ? random(restFiles).media : null) %} #}
  42.         {#        {% set productTopRightImage = productCustomFields.mediaList.productTopRight ?: (restFiles|length > 0 ? random(restFiles).media : null) %} #}
  43.         {#        {% set productBottomRightImage = productCustomFields.mediaList.productBottomRight ?: (restFiles|length > 0 ? random(restFiles).media : null) %} #}
  44.         {% set productLink = seoUrl('frontend.detail.page', {'productId': id}) %}
  45.         {% set productLinkWithReferral = productLink ~ (context.customer ? '?affiliateCode=' ~ context.customer.affiliateCode : '') %}
  46.         {% set desktopShareModal = "desktop-share-modal-" ~ id %}
  47.         {% set desktopShareModalContent %}
  48.             {% sw_include '@Storefront/storefront/component/aistream/modal/desktop-share-modal.html.twig' %}
  49.         {% endset %}
  50.         {% set discountRate = page.product.extensions.deals.elements|first.discountRate %}
  51.         {% set uiVersion = productCustomFields['uiVersion'] ?: 1 %}
  52.         {% set ingredientList = productCustomFields['ingredientList'] ?: null %}
  53.         {% set introduceList = productCustomFields['introduceList'] ?: null %}
  54.         {% set introduceMobileList = productCustomFields['introduceMobileList'] ?: introduceList %}
  55.         {% set study = productCustomFields['study'] ?: null %}
  56.         {% set buyable = page.product.available and page.product.childCount <= 0 and page.product.calculatedMaxPurchase > 0 %}
  57.         {% set isSubscriptionQuery = app.request.query.get('_query')['subscription'] == '1' %}
  58.         {% set subscriptionProduct = page.product.customFields.isBuyProductSubscription ?? false %}
  59.         {% set isSave4moreProduct = subscriptionProduct && isSubscriptionQuery %}
  60.         {% set planId = page.product.customFields.planId ?? false %}
  61.         {% set redirectProductSave4moreId = productCustomFields.productSubscriptionId ?: id %}
  63.         {% set introduceBenefitList = productCustomFields['introduceBenefitList'] ?: null %}
  64.         {% set bannerImageProduct = isSave4moreProduct ? productCustomFields.mediaList.bannerSave4more : bannerImage %}
  65.         {% set imageProduct = isSave4moreProduct ? productCustomFields.mediaList.productSave4more.url : page.product.cover.media.url %}
  66.         {% set bannerSave4more = productCustomFields.mediaList.bannerSave4more ?: page.product.cover.media %}
  67.         {% set imageProductSave4more = productCustomFields.mediaList.productSave4more.url ?: page.product.cover.media.url %}
  69.         {% set isLoggedIn = context.customer is defined %}
  70.         {% set jsonParams = '{"productId":"' ~ page.product.id ~ '"}' %}
  71.         {% set redirectParameters = jsonParams %}
  72.         {% set pathRedirectDetail = seoUrl('frontend.account.login', {
  73.             redirectTo: 'frontend.detail.page',
  74.             redirectParameters: redirectParameters
  75.         }) %}
  77.         {% set pathRedirectShop4free = path('frontend.account.login', {
  78.             redirectTo: 'frontend.shop4free'
  79.         }) %}
  81.         {% set redirectAfterLogin = isCreditProduct ? pathRedirectShop4free : pathRedirectDetail %}
  83.         {% set arrFeatureProduct = [
  84.             {
  85.                 id: 1,
  86.                 title: "app.productDetail.subscriptionTitle1"|trans,
  87.             },
  88.             {
  89.                 id: 2,
  90.                 title: "app.productDetail.subscriptionTitle2"|trans,
  91.             },
  92.             {
  93.                 id: 3,
  94.                 title: "app.productDetail.subscriptionTitle3"|trans,
  95.             },
  96.             {
  97.                 id: 4,
  98.                 title: "app.productDetail.subscriptionTitle4"|trans,
  99.             },
  100.         ] %}
  101.         {# {% set outOfStock = ourOfStock %} #}
  103.         <div id="swm-product-detail" class="product-detail" itemscope
  104.              itemtype="https://schema.org/Product"
  105.              data-product-id="{{ page.product.id }}"
  106.              data-max-purchase="{{ page.product.calculatedMaxPurchase }}"
  107.              data-min-purchase="{{ page.product.minPurchase }}"
  108.              data-path="{{ path('frontend.data-stream') }}"
  109.              data-csrf="{{ sw_csrf('frontend.data-stream', {'mode': 'token'}) }}"
  110.         >
  111.             <div class="swm-product-detail">
  112.                 <section class="swm_pdtop_banner_wrapper">
  113.                     <div class="position-relative swm_pdtop_banner_container width-full">
  114.                         <div class="swm_pdtop_banner_container_img-config">
  115.                             {% if bannerImageProduct.mimeType starts with 'video' %}
  116.                                 <video class="swm_pdtop_banner_container_img swm-m-auto width-full" autoplay playsinline
  117.                                        muted>
  118.                                     <source src="{{ bannerImageProduct.url }}"
  119.                                             type="{{ bannerImageProduct.mimeType }}"/>
  120.                                 </video>
  121.                             {% else %}
  122.                                 <img class="swm_pdtop_banner_container_img swm-m-auto width-full"
  123.                                      src="{{ bannerImageProduct.url }}">
  124.                             {% endif %}
  125.                         </div>
  126.                         <div class="swm_pdtop_banner_container_img-save4more-config d-none-important">
  127.                             {% if bannerSave4more.mimeType starts with 'video' %}
  128.                                 <video class="swm_pdtop_banner_container_img swm-m-auto width-full" autoplay playsinline
  129.                                        muted>
  130.                                     <source src="{{ bannerSave4more.url }}" type="{{ bannerSave4more.mimeType }}"/>
  131.                                 </video>
  132.                             {% else %}
  133.                                 <img class="swm_pdtop_banner_container_img swm-m-auto width-full"
  134.                                      src="{{ bannerSave4more.url }}">
  135.                             {% endif %}
  136.                         </div>
  137.                         <div class="position-absolute d-flex flex-col swm_pdtop_banner_txt_container gap-8px">
  138.                             {% set productName = page.product.translated.name %}
  140.                             {% if '(' in productName and ')' in productName %}
  141.                                 {% set productParts = productName|split('(') %}
  142.                                 <span class="swm_pdtop_banner_txt_title">{{ productParts[0]|trim }}<br/></span>
  143.                                 <span class="swm_pdtop_banner_txt_extra">{{ productParts[1]|replace({')': ''}) }}</span>
  144.                             {% else %}
  145.                                 <span class="swm_pdtop_banner_txt_title">{{ productName }}<br/></span>
  146.                             {% endif %}
  147.                         </div>
  148.                         <div class="position-absolute prod-detail-share-button-container">
  149.                             {% sw_include '@Storefront/storefront/component/buttons/button-pill.html.twig' with {
  150.                                 className: 'swm-btn prod-detail-share-button d-flex' ,
  151.                                 label: 'app.share'|trans,
  152.                                 styleBtn: 'white-space: nowrap;',
  153.                                 classNameLabel: 'prod-detail-share-button-text text-heading-5-m',
  154.                                 icon: asset('bundles/shopwithmeui/assets/icons/product-detail/ic_share.svg') ,
  155.                                 styleIcon: 'width: 20px; height: 20px',
  156.                                 extraAttributes: {
  157.                                     'desktop-modal-target': '#' ~ desktopShareModal
  158.                                 }
  159.                             } %}
  160.                         </div>
  161.                     </div>
  162.                 </section>
  163.                 <section class="swm_pdtop_slide_container d-flex flex-col">
  164.                     {% if productCustomFields is not null %}
  165.                         <div class="swm_pdtop_slide_container-content d-flex justify-between items-center m-tablet:flex-col mobile:flex-col gap-1rem">
  166.                             <span class="swm_pdtop_slide_txt_top">{{ productCustomFields.subtitle }}</span>
  167.                             <div class="d-flex swm_pdtop_slide_certi_container">
  168.                                 {% for certificate in productCustomFields.certificates %}
  169.                                     <div style="height: 120px; width: 120px;" class="align-center justify-center">
  170.                                         <img class="width-full" src="{{ certificate.media.url }}"/>
  171.                                     </div>
  172.                                 {% endfor %}
  173.                             </div>
  174.                         </div>
  175.                     {% endif %}
  176.                     <div class="d-flex flex-col" style="gap:20px">
  177.                         <div class="swm_pdtop_slider_img d-flex mobile:flex-col">
  178.                             {% if topLeftImage is not null %}
  179.                                 <div class="swm_pdtop_slider_img_1">
  180.                                     <img class="swm_pdtop_slider_img_mobile swm_prod_detail_img_radius_15"
  181.                                          src="{{ topLeftImage.url }}" width="100%"/>
  182.                                 </div>
  183.                             {% endif %}
  185.                             {% if topRightImage is not null %}
  186.                                 <div class="swm_pdtop_slider_img_2 flex-1">
  187.                                     <img class="swm_pdtop_slider_img_mobile swm_prod_detail_img_radius_15 object-fit-cover height-full"
  188.                                          src="{{ topRightImage.url }}" width="100%"/>
  189.                                 </div>
  190.                             {% endif %}
  191.                         </div>
  192.                         {% if video is not null %}
  193.                             <div class="position-relative">
  194.                                 <div id="swm_toggle_video" class="position-absolute items-center justify-center d-flex">
  195.                                     <div id="swm_icon_play_video">
  196.                                         <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_play.png') }}"
  197.                                              width="100%"/>
  198.                                     </div>
  199.                                 </div>
  200.                                 <video allow="autoplay" width="100%" height="100%" playsinline="true" loop
  201.                                        controlsList="nodownload" style="z-index: 1;"
  202.                                        id="swm_pdtop_video" class="swm_pdtop_slide_video">
  203.                                     <source src="{{ video.url }}" type="{{ video.mimetype }}"/>
  204.                                 </video>
  205.                             </div>
  206.                         {% endif %}
  207.                     </div>
  208.                 </section>
  210.                 {% if uiVersion > 1 %}
  211.                     {% if ingredientList is not null and ingredientList|length > 0 %}
  212.                         {% set validIngredientList = ingredientList|filter(v => v is not null) %}
  213.                         {% if validIngredientList|length > 0 %}
  214.                             <div class="product-detail__technologies">
  215.                                 <div class="product-detail__technologies-list">
  216.                                     {% for ingredientItem in ingredientList %}
  217.                                         {% if ingredientItem %}
  218.                                             <div class="product-detail__technologies-item">
  219.                                                 <img class="product-detail__technologies-item-img"
  220.                                                     src="{{ ingredientItem.url }}"/>
  221.                                             </div>
  222.                                         {% endif %}
  223.                                     {% endfor %}
  224.                                 </div>
  225.                             </div>
  226.                         {% endif %}
  227.                     {% endif %}
  229.                     {% if introduceBenefitList is not null and introduceBenefitList|length > 0 %}
  230.                         <div class="product-detail__benefits">
  231.                             {% for introduceItem in introduceBenefitList %}
  232.                                 {% if introduceItem and introduceItem.items|length >= 2 %}
  233.                                     {% set leftItem = introduceItem.items[0] %}
  234.                                     <div class="layout__benefit">
  235.                                         <div class="layout__benefit-item-left">
  236.                                             <div class="mobile:d-none-important"></div>
  237.                                             {# Góc trên bên trái: text #}
  238.                                             <div class="layout__benefit-item-left-before">
  239.                                                 {% if leftItem %}
  240.                                                     <div class="benefit-text">
  241.                                                         {% if leftItem.title %}
  242.                                                             <div class="benefit-title">{{ leftItem.title }}</div>
  243.                                                         {% endif %}
  244.                                                         {% if leftItem.description %}
  245.                                                             <div class="benefit-description">{{ leftItem.description }}</div>
  246.                                                         {% endif %}
  247.                                                     </div>
  248.                                                 {% endif %}
  249.                                             </div>
  251.                                             {# Góc dưới bên trái: image #}
  253.                                             <div class="layout__benefit-item-left-after layout__benefit-item-left-after-mobile">
  254.                                                 {% if leftItem and leftItem.image %}
  255.                                                     <img class="layout__benefit-item-left-after-img"
  256.                                                         src="{{ leftItem.image.url }}"/>
  257.                                                 {% endif %}
  258.                                             </div>
  260.                                             <div class="layout__benefit-item-left-after layout__benefit-item-left-after-desktop">
  261.                                                 {% if leftItem and leftItem.image %}
  262.                                                     <img class="layout__benefit-item-left-after-img"
  263.                                                         src="{{ leftItem.image.url }}"/>
  264.                                                 {% endif %}
  265.                                             </div>
  266.                                         </div>
  268.                                         <div class="layout__benefit-item-right">
  269.                                             {# Góc trên bên phải: image #}
  270.                                             <div class="layout__benefit-item-right-before">
  271.                                                 {% set rightItem = introduceItem.items[1] %}
  272.                                                 {% if rightItem and rightItem.image %}
  273.                                                     <img class="layout__benefit-item-right-before-img"
  274.                                                         src="{{ rightItem.image.url }}"/>
  275.                                                 {% endif %}
  276.                                             </div>
  278.                                             {# Góc dưới bên phải: text #}
  279.                                             <div class="layout__benefit-item-right-after">
  280.                                                 {% if rightItem %}
  281.                                                     <div class="benefit-text">
  282.                                                         {% if rightItem.title %}
  283.                                                             <div class="benefit-title">{{ rightItem.title }}</div>
  284.                                                         {% endif %}
  285.                                                         {% if rightItem.description %}
  286.                                                             <div class="benefit-description">{{ rightItem.description }}</div>
  287.                                                         {% endif %}
  288.                                                     </div>
  289.                                                 {% endif %}
  290.                                             </div>
  291.                                         </div>
  292.                                     </div>
  293.                                 {% endif %}
  294.                             {% endfor %}
  295.                         </div>
  296.                     {% else %}
  297.                         {% if introduceList is not null and introduceList|length > 0 %}
  298.                             <div class="product-detail__benefits">
  299.                                 {% for introduceItem in introduceList %}
  300.                                     {% if introduceItem %}
  301.                                         <div class="layout__benefit">
  302.                                             <div class="layout__benefit-item-left">
  303.                                                 <div class="mobile:d-none-important"></div>
  304.                                                 <div class="layout__benefit-item-left-before">
  305.                                                     {% if introduceItem.firstImage %}
  306.                                                         <img class="layout__benefit-item-left-before-img"
  307.                                                             src="{{ introduceItem.firstImage.url }}"/>
  308.                                                     {% endif %}
  309.                                                 </div>
  310.                                                 <div class="layout__benefit-item-left-after">
  311.                                                     {% if introduceItem.secondImage %}
  312.                                                         <img class="layout__benefit-item-left-after-img"
  313.                                                             src="{{ introduceItem.secondImage.url }}"/>
  314.                                                     {% endif %}
  315.                                                 </div>
  316.                                             </div>
  317.                                             <div class="layout__benefit-item-right">
  318.                                                 <div class="layout__benefit-item-right-before">
  319.                                                     {% if introduceItem.thirdImage %}
  320.                                                         <img class="layout__benefit-item-right-before-img"
  321.                                                             src="{{ introduceItem.thirdImage.url }}"/>
  322.                                                     {% endif %}
  323.                                                 </div>
  324.                                                 <div class="layout__benefit-item-right-after">
  325.                                                     {% if introduceItem.fourthImage %}
  326.                                                         <img class="layout__benefit-item-right-after-img"
  327.                                                             src="{{ introduceItem.fourthImage.url }}"/>
  328.                                                     {% endif %}
  329.                                                 </div>
  330.                                             </div>
  331.                                         </div>
  332.                                     {% endif %}
  333.                                 {% endfor %}
  334.                             </div>
  335.                         {% endif %}
  336.                         {% if introduceMobileList is not null and introduceMobileList|length > 0 %}
  337.                             <div class="product-detail__benefits-mobile d-none">
  338.                                 {% for introduceItem in introduceMobileList %}
  339.                                     {% if introduceItem %}
  340.                                         <div class="layout__benefit-mobile">
  341.                                             <div class="layout__benefit-item-left">
  342.                                                 {% if introduceItem.firstImage %}
  343.                                                     <div class="layout__benefit-item-left-before">
  344.                                                         <img class="layout__benefit-item-left-before-img"
  345.                                                             src="{{ introduceItem.firstImage.url }}"/>
  346.                                                     </div>
  347.                                                 {% endif %}
  348.                                                 {% if introduceItem.secondImage %}
  349.                                                     <div class="layout__benefit-item-left-after">
  350.                                                         <img class="layout__benefit-item-left-after-img"
  351.                                                             src="{{ introduceItem.secondImage.url }}"/>
  352.                                                     </div>
  353.                                                 {% endif %}
  354.                                             </div>
  355.                                             <div class="layout__benefit-item-right">
  356.                                                 {% if introduceItem.thirdImage %}
  357.                                                     <div class="layout__benefit-item-right-after">
  358.                                                         <img class="layout__benefit-item-right-after-img"
  359.                                                             src="{{ introduceItem.thirdImage.url }}"/>
  360.                                                     </div>
  361.                                                 {% endif %}
  362.                                                 {% if introduceItem.fourthImage %}
  363.                                                     <div class="layout__benefit-item-right-before">
  364.                                                         <img class="layout__benefit-item-right-before-img"
  365.                                                             src="{{ introduceItem.fourthImage.url }}"/>
  366.                                                     </div>
  367.                                                 {% endif %}
  368.                                             </div>
  369.                                         </div>
  370.                                     {% endif %}
  371.                                 {% endfor %}
  372.                             </div>
  373.                         {% endif %}
  374.                     {% endif %}
  376.                     {% if study is not null and study.image is not null %}
  377.                         <div class="product-detail__certificate">
  378.                             <div class="product-detail__certificate-box">
  379.                                 <img class="product-detail__certificate-img"
  380.                                      src="{{ study.image.url }}"/>
  381.                             </div>
  382.                         </div>
  383.                     {% endif %}
  384.                 {% else %}
  385.                     {% if productCustomFields.benefitsList|length > 0 %}
  386.                         <section class="section-5__product_detail">
  387.                             <div class="section-5__product_detail-header text-heading-2-b swm-mt-8 swm-mb-10 text-center">
  388.                                 {{ 'app.productDetail.productBenefits.title'|trans }}
  389.                             </div>
  390.                             <div class="section-5__product_detail-container d-flex items-start justify-between">
  391.                                 {% for benefitItem in productCustomFields.benefitsList %}
  392.                                     <div class="section-5__product_detail-container-item d-flex flex-col items-center">
  393.                                         <div class="section-5__product_detail-container-item-img overflow-hidden swm-mb-4">
  394.                                             <img src="{{ benefitItem.media.url }}"
  395.                                                  class="item-img-product-detail width-full height-full"/>
  396.                                         </div>
  397.                                         <div class="section-5__product_detail-container-item-content text-center">
  398.                                             <div class="section-5__product_detail-container-item-content-name typo-head-4-b swm-mb-4">
  399.                                                 {{ benefitItem.name }}
  400.                                             </div>
  401.                                             <div class="section-5__product_detail-container-item-content-name typo-sub-text-2">
  402.                                                 {{ benefitItem.description }}
  403.                                             </div>
  404.                                         </div>
  405.                                     </div>
  406.                                 {% endfor %}
  407.                             </div>
  408.                         </section>
  409.                     {% endif %}
  410.                 {% endif %}
  412.                 <section
  413.                         class="productDetail_product_wrapper swm-m-auto">
  414.                     <!--Container-->
  415.                     <div
  416.                             class="d-flex flex-col gap-1.5rem">
  417.                         <!--Title-->
  418.                         <div class="d-flex flex-col" style="gap:9px">
  419.                             <p class="login__title__title">{{ page.product.translated.name }}</p>
  420.                             <div class="d-flex gap-1rem">
  421.                                 {% for tag in productCustomFields.productTags %}
  422.                                     <button class="swm-btn swm-btn-certificate">
  423.                                         {{ tag.name }}
  424.                                     </button>
  425.                                 {% endfor %}
  426.                             </div>
  427.                         </div>
  428.                         <!--Product-->
  429.                         <div
  430.                                 class="d-flex m-tablet:flex-col mobile:flex-col" style="gap:46px;">
  431.                             <!--Images-->
  433.                             <div class="product-detail__information__left d-flex productDetail_product_images_wrapper">
  434.                                 <div class="product-detail__information__left__image mobile:m-auto productDetail_product_images_main overflow-hidden radius-15px">
  435.                                     <img loading="lazy" class="product-detail__information__left__image-img"
  436.                                          src="{{ imageProduct }}"/>
  437.                                     <img loading="lazy"
  438.                                          class="product-detail__information__left__image-save4more-config d-none-important"
  439.                                          src="{{ imageProductSave4more }}"/>
  440.                                 </div>
  441.                             </div>
  442.                             <!--Infos-->
  443.                             <div
  444.                                     class="product-detail__information__right d-flex flex-col"
  445.                                     style="gap: 21px; flex: 1;">
  446.                                 <!--Cao đao-->
  447.                                 <div class="homePage_productList_cao_dao d-flex gap-1rem items-center justify-between swm-p-3">
  448.                                     <div class="d-flex" style="gap: 4px;">
  449.                                         <img src="{{ asset('bundles/shopwithmeui/assets/icons/lighting-circle.svg') }}"/>
  450.                                         <span class="homePage_productList_cao_dao_text">{{ 'app.home.listing.timeLeft'|trans }}</span>
  451.                                     </div>
  452.                                     <div class="deals-expiration-timer homePage_productList_cao_dao_time d-flex items-center"
  453.                                          data-expired-text="{{ 'app.expired'|trans|sw_sanitize }}"
  454.                                          data-expired-time="{{ currentDeal.endDate|date("U") }}"></div>
  455.                                 </div>
  456.                                 <!--Quantity-->
  457.                                 <div class="d-flex flex-col" style="gap: 21px;">
  458.                                     <div class="productDetail_product_optional d-flex flex-col" style="gap: 21px;">
  459.                                         <div class="productDetail_product_optional_order-right d-flex flex-col">
  460.                                             {% if not subscriptionProduct %}
  461.                                             <div class="d-flex flex-col product-detail-quantity" style="gap: 12px;">
  462.                                                 <p class="typo-head-5">{{ 'app.quantity'|trans }}</p>
  463.                                                 {% if isLoggedIn %}
  464.                                                     <div class="d-flex" style="gap: 12px;">
  465.                                                         <button id="decreaseBtn"
  466.                                                                 class="productDetail_product_quantity_minus radius-8px cursor-pointer">
  467.                                                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_minus.svg') }}"/>
  468.                                                         </button>
  469.                                                         <input id="quantityInput"
  470.                                                                 class="productDetail_product_quantity radius-8px d-flex text-center no-arrows"
  471.                                                                 value="1" type="number" min="1"
  472.                                                                 data-productId="{{ page.product.id }}">
  473.                                                         <button id="increaseBtn"
  474.                                                                 class="productDetail_product_quantity_minus radius-8px cursor-pointer">
  475.                                                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_plus.svg') }}"/>
  476.                                                         </button>
  477.                                                     </div>
  478.                                                 {% else %}
  479.                                                     <div class="d-flex" style="gap: 12px;">
  480.                                                         <a href="{{ redirectAfterLogin }}">
  481.                                                             <button class="productDetail_product_quantity_minus radius-8px cursor-pointer">
  482.                                                                 <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_minus.svg') }}"/>
  483.                                                             </button>
  484.                                                         </a>
  485.                                                         <input id="quantityInput"
  486.                                                                 class="productDetail_product_quantity radius-8px d-flex text-center no-arrows"
  487.                                                                 value="1" type="number" min="1"
  488.                                                                 data-productId="{{ page.product.id }}">
  489.                                                         <a href="{{ redirectAfterLogin }}">
  490.                                                             <button class="productDetail_product_quantity_minus radius-8px cursor-pointer">
  491.                                                                 <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_plus.svg') }}"/>
  492.                                                             </button>
  493.                                                         </a>
  494.                                                     </div>
  495.                                                 {% endif %}
  496.                                                 <div class="product-item-error d-none">{{ 'app.limit'|trans }} {{ page.product.calculatedMaxPurchase }} {{ 'app.perOrder'|trans }}</div>
  497.                                             </div>
  498.                                             {% endif %}
  499.                                         </div>
  500.                                         <div class="d-flex flex-col gap-8px">
  501.                                             {% set dealSaved = marketValue - page.product.calculatedPrice.unitPrice %}
  502.                                             <!--Price Saving-->
  503.                                             <div class="d-flex gap-8px">
  504.                                                 <div class="d-flex gap-8px flex-wrap">
  505.                                                     <p class="productDetail_product_origin_price typo-head-5">{{'app.productDetail.product.regularPrice'|trans|sw_sanitize}}:</p>
  506.                                                     <p class="productDetail_product_origin_price line-through typo-head-5">{{ marketValue|currency }}</p>
  507.                                                 </div>
  508.                                                 {# {% if discountRate is not null %}
  509.                                                     <p class="productDetail_product_origin_price_savings typo-head-5 {% if isSave4moreProduct %} productDetail_product_origin_price_savings-color-save4more {% endif %}">{{ discountRate }}
  510.                                                         %</p>
  511.                                                     <p class="productDetail_product_origin_price_savings typo-head-5 {% if isSave4moreProduct %} productDetail_product_origin_price_savings-color-save4more {% endif %}">{{ 'app.savings'|trans }}</p>
  512.                                                 {% endif %} #}
  513.                                             </div>
  514.                                             <!--Final Price-->
  515.                                             <div class="d-flex items-center gap-1rem">
  516.                                                 <div class="productDetail_product_origin_price_savings typo-head-4-b d-flex items-center gap-4px flex-wrap {% if isSave4moreProduct %} productDetail_product_origin_price_savings-color-save4more {% endif %}">
  517.                                                     <span class="productDetail_product_origin_price typo-head-5">{{'app.productDetail.product.todayPrice'|trans|sw_sanitize}}:</span>
  518.                                                     {{ page.product.calculatedPrice.unitPrice|currency }}
  519.                                                     {% if context.customer.affiliateCode is not null and context.customer.campaignCode is not null %}
  520.                                                         {% if context.customer.affiliateCode == context.customer.campaignCode %}
  521.                                                             {% if page.product.customFields.pointValue %}
  522.                                                                 <span>
  523.                                                                         ({{ page.product.customFields.pointValue }} PV)
  524.                                                                         {# {{ 'app.productDetail.product.point'|trans|sw_sanitize }} #}
  525.                                                                     </span>
  526.                                                             {% endif %}
  527.                                                         {% endif %}
  528.                                                     {% endif %}
  529.                                                 </div>
  530.                                             </div>
  531.                                             <div class="d-flex items-center gap-4px flex-wrap">
  532.                                                 <span class="productDetail_product_origin_price typo-head-5">{{'app.productDetail.product.youSave'|trans|sw_sanitize}}:</span>
  533.                                                 <span class="productDetail_product_origin_price_savings typo-head-4-b">{{ dealSaved|currency }}</span>
  534.                                                 {% if discountRate %}
  535.                                                     <span class="productDetail_product_origin_price typo-head-5">({{discountRate}}% {{'app.productDetail.product.discount'|trans|sw_sanitize}})</span>
  536.                                                 {% endif %}
  537.                                             </div>
  538.                                         </div>
  539.                                         {# {% if buyable == false or outOfStock %} #}
  540.                                         {% if buyable == false %}
  541.                                             <div class="error_out_of_stock">{{ 'app.productNotAvailable'|trans }}</div>
  542.                                         {% endif %}
  543.                                         {% if isSave4moreProduct and planId == false %}
  544.                                             <div class="error_out_of_stock">{{ 'app.planIdBuyWithSubcription'|trans }}</div>
  545.                                         {% endif %}
  546.                                         <!--Buttons-->
  547.                                         {% if subscriptionProduct %}
  548.                                         <a href="{{ hasActiveSubscription ? '#' : seoUrl('frontend.checkout.subscription', {'id': page.product.id}) }}"
  549.                                             class="productDetail-btn-save4more text-decoration-none {{ hasActiveSubscription ? 'disabled-link-save4more' : '' }}">
  550.                                             {% set extraAttributes = not planId or buyable == false ? { 'disabled': true } : {} %}
  551.                                             {% sw_include '@Storefront/storefront/component/buttons/button-primary.html.twig' with {
  552.                                                 id: page.product.id,
  553.                                                 className: 'subscription-buy-btn',
  554.                                                 label: "app.productDetail.buyWithSubscription"|trans,
  555.                                                 icon: 'bundles/shopwithmeui/assets/icons/prod_buynow.svg',
  556.                                                 extraAttributes: extraAttributes
  557.                                             } %}
  558.                                         </a>
  560.                                         {% if hasActiveSubscription %}
  561.                                             <p class="error_out_of_stock">{{ 'app.productDetail.hasActiveSubscription'|trans|sw_sanitize }}</p>
  562.                                         {% endif %}
  564.                                         <div class="productDetail_list_feature d-flex flex-col gap-16px">
  565.                                             {% for feature in arrFeatureProduct %}
  566.                                                 <div class="d-flex align-center justify-start gap-1">
  567.                                                     <img src="{{ asset('bundles/shopwithmeui/assets/icons/checked_icon.svg') }}"/>
  568.                                                     <span class="productDetail_list_feature-title">
  569.                                                                 {{ feature.title }}
  570.                                                             </span>
  571.                                                 </div>
  572.                                             {% endfor %}
  573.                                         </div>
  574.                                         {% else %}
  575.                                         <div class="productDetail-btns-order d-flex gap-1rem"
  576.                                                 style="flex-wrap: wrap;">
  577.                                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' with {
  578.                                                 isHeaderButton: false,
  579.                                                 isAddToCart: false,
  580.                                                 fullWidth: false,
  581.                                             } %}
  582.                                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' with {
  583.                                                 isHeaderButton: false,
  584.                                                 isAddToCart: true,
  585.                                                 fullWidth: false,
  586.                                             } %}
  587.                                             {# {% set isShop4freeProduct = true %}
  589.                                                     {% if isShop4freeProduct %}
  590.                                                         <button class="section-2__shop4free-content-product-info-description-btn button-square button-primary d-flex items-center shop4free-purchase-btn" 
  591.                                                                 title="Shop4free now" 
  592.                                                                 aria-label="Shop4free now"
  593.                                                                 data-product-id= "{{ product.id }}"
  594.                                                                 data-product-name= "{{ product.translated.name }}"
  595.                                                                 data-product-credit= "{{ product.customFields.productCreditPrice }}"
  596.                                                                 desktop-modal-target='#{{context.customer ? desktopFreePurchaseModal : ''}}' 
  597.                                                                 >
  598.                                                             <div class="section-2__shop4free-content-product-info-description-title d-flex items-center justify-between">
  599.                                                                 <div class="d-flex flex-col items-start gap-8px">
  600.                                                                     <span class="{{classTextButton}} button-title typo-sub-text-2 section-2__shop4free-content-product-info-description-title-text">{{'app.shop4freeNowButton'|trans}}</span>
  601.                                                                 </div>
  602.                                                                 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
  603.                                                                     xmlns="http://www.w3.org/2000/svg">
  604.                                                                     <path
  605.                                                                         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"
  606.                                                                         stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
  607.                                                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  608.                                                                         stroke-linecap="round" stroke-linejoin="round" />
  609.                                                                 </svg>
  610.                                                             </div>
  611.                                                             <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
  612.                                                                 xmlns="http://www.w3.org/2000/svg">
  613.                                                                 <path
  614.                                                                     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"
  615.                                                                     stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
  616.                                                                 <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  617.                                                                     stroke-linecap="round" stroke-linejoin="round" />
  618.                                                             </svg>
  619.                                                         </div>
  620.                                                     </button>
  621.                                                 {% endif %} #}
  622.                                             </div>
  623.                                         {% endif %}
  624.                                         <div class="productDetail_list_feature d-flex flex-col gap-16px {% if not isSave4moreProduct %} d-none-important {% endif %}">
  625.                                             {% for feature in arrFeatureProduct %}
  626.                                                 <div class="d-flex align-center justify-start gap-1">
  627.                                                     <img src="{{ asset('bundles/shopwithmeui/assets/icons/checked_icon.svg') }}"/>
  628.                                                     <span class="productDetail_list_feature-title">
  629.                                                             {{ feature.title }}
  630.                                                         </span>
  631.                                                 </div>
  632.                                             {% endfor %}
  633.                                         </div>
  634.                                     </div>
  635.                                     {% if ( not subscriptionProduct ) and ( productCustomFields.productSubscriptionId is not null ) %}
  636.                                         <div class="product_detail_join_save4more d-flex items-center justify-between">
  637.                                             <div class="product_detail_join_save4more-left d-flex items-center gap-4px">
  638.                                                 <img src="{{ asset('bundles/shopwithmeui/assets/icons/autoship_save4more.svg') }}"/>
  639.                                                 <div class="product_detail_join_save4more-left-content d-flex flex-col gap-8px">
  640.                                                     <span class="product_detail_join_save4more-left-content-head text-body-m-b">{{ "app.productDetail.enjoySave4more"|trans }}</span>
  641.                                                     <span class="product_detail_join_save4more-left-content-title text-smallest-b">{{ "app.productDetail.subscribe"|trans }}</span>
  642.                                                 </div>
  643.                                             </div>
  644.                                             <div class="product_detail_join_save4more-right">
  645.                                                 <a href="{{ seoUrl('frontend.detail.page', {'productId': redirectProductSave4moreId}) }}"
  646.                                                    class="text-decoration-none">
  647.                                                     <button class="product_detail_join_save4more-right-action-btn swm-btn swm-btn-shop4free-secondary text-smallest-b">
  648.                                                         {{ 'app.home.learnMore'|trans }}
  649.                                                     </button>
  650.                                                 </a>
  651.                                             </div>
  652.                                         </div>
  653.                                     {% endif %}
  654.                                 </div>
  655.                                 <!--Product Infos-->
  656.                                 <div class="d-flex flex-col" style="gap: 21px;">
  657.                                     {% if productTranslatedCustomFields.promotion %}
  658.                                         <div class="productDetail_product_infos swm-btn swm-btn-shop4free-primary flex-col toggleButton">
  659.                                             <div class="d-flex justify-between">
  660.                                                 <span class="productDetail_product_infos_title typo-sub-text-4-smb d-flex items-center">{{ 'app.productDetail.product.promotion'|trans }}</span>
  661.                                                 <img class="cursor-pointer"
  662.                                                      src="{{ asset('bundles/shopwithmeui/assets/icons/prod_dropdown.svg') }}"/>
  663.                                             </div>
  664.                                             <div class="productDetail_product_infos_des typo-sub-text-2 d-none">{{ productTranslatedCustomFields.promotion|raw }}</div>
  665.                                         </div>
  666.                                     {% endif %}
  667.                                     <div class="productDetail_product_infos swm-btn swm-btn-shop4free-primary flex-col toggleButton">
  668.                                         <div class="d-flex justify-between">
  669.                                             <span class="productDetail_product_infos_title typo-sub-text-4-smb d-flex items-center">{{ 'app.productDetail.product.description'|trans }}</span>
  670.                                             <img class="cursor-pointer"
  671.                                                  src="{{ asset('bundles/shopwithmeui/assets/icons/prod_dropdown.svg') }}"/>
  672.                                         </div>
  673.                                         <div class="productDetail_product_infos_des typo-sub-text-2 d-none">{{ page.product.translated.description|raw }}</div>
  674.                                     </div>
  675.                                     <div class="productDetail_product_infos swm-btn swm-btn-shop4free-primary flex-col toggleButton">
  676.                                         <div class="d-flex justify-between">
  677.                                             <span class="productDetail_product_infos_title typo-sub-text-4-smb d-flex items-center">{{ 'app.productDetail.product.benefits'|trans }}</span>
  678.                                             <img class="cursor-pointer"
  679.                                                  src="{{ asset('bundles/shopwithmeui/assets/icons/prod_dropdown.svg') }}"/>
  680.                                         </div>
  681.                                         <div class="productDetail_product_infos_des typo-sub-text-2 d-none">{{ productTranslatedCustomFields.benefits|raw }}</div>
  682.                                     </div>
  683.                                     <div class="productDetail_product_infos swm-btn swm-btn-shop4free-primary flex-col toggleButton">
  684.                                         <div class="d-flex justify-between">
  685.                                             <span class="productDetail_product_infos_title typo-sub-text-4-smb d-flex items-center">{{ productTranslatedCustomFields.ingredientLabel ?: 'app.productDetail.product.ingredients'|trans }}</span>
  686.                                             <img class="cursor-pointer"
  687.                                                  src="{{ asset('bundles/shopwithmeui/assets/icons/prod_dropdown.svg') }}"/>
  688.                                         </div>
  689.                                         <div class="productDetail_product_infos_des typo-sub-text-2 d-none">{{ productTranslatedCustomFields.ingredients|raw }}
  690.                                         </div>
  691.                                     </div>
  692.                                 </div>
  693.                             </div>
  694.                         </div>
  695.                     </div>
  696.                 </section>
  697.             </div>
  698.             <section class="section-5__home__experience swm-m-auto overflow-hidden swm-mb-8"
  699.                      data-video-list-plugin="true"
  700.                      data-path="{{ path('frontend.data-stream') }}"
  701.                      data-csrf="{{ sw_csrf('frontend.data-stream', {'mode': 'token'}) }}"
  702.                      data-product-id="{{ page.product.id }}"
  703.                      data-type="details">
  704.                 <div class="section-5__home__experience-header typo-head-2">
  705.                     {{ 'app.aiStream'|trans }}
  706.                 </div>
  707.                 <div class="section-5__home__experience-container d-flex items-center justify-start">
  709.                 </div>
  710.             </section>
  711.             {#                <div class="section-5__home__experience-container_mobile d-flex items-center justify-start"> #}
  712.             {#                    {% if productVideo|first %} #}
  713.             {#                        {% set video = null %} #}
  714.             {#                        {% if productVideo|first.postChildren.elements && productVideo|first.postChildren.elements|first %} #}
  715.             {#                        {% set video = productVideo|first.postChildren.elements|first.file.fileUrl %} #}
  716.             {#                        {% endif %} #}
  717.             {#                        <div class="section-5__home__experience-container-item border-radius-1 position-relative overflow-hidden"> #}
  718.             {#                            <div id="home_aiStream_play" #}
  719.             {#                                 class="section-5__home__experience-container-item-content  position-absolute d-flex justify-between flex-col"> #}
  720.             {#                                <div class="section-5__home__experience-container-item-tag d-flex items-center justify-start"> #}
  721.             {#                                    <img src="/bundles/shopwithmetheme/assets/icons/mage_video.svg" #}
  722.             {#                                         class="item_experience_img_icon"> #}
  723.             {#                                    <span class="section-5__home__experience-container-item-tag-name typo-sub-text-4-smb">Consumer #}
  724.             {#                                    Electronics</span> #}
  725.             {#                                </div> #}
  726.             {#                                <div class="section-5__home__experience_container_mobile_navigation position-absolute d-flex flex-col"> #}
  727.             {#                                    <div class="d-flex gap-1rem flex-col section-5__home__experience_container_mobile_navigation_actions"> #}
  728.             {#                                        <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  729.             {#                                            <img class="section-5__home__experience_container_mobile_navigation_action_img" #}
  730.             {#                                                 src="/bundles/shopwithmetheme/assets/imgs/aiStream_heart.svg"/> #}
  731.             {#                                            <span class="typo-sub-text-4 section-5__home__experience_container_mobile_navigation_info">{{ productVideo|first.likeCount }}</span> #}
  732.             {#                                        </div> #}
  733.             {#                                        <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  734.             {#                                            <img class="section-5__home__experience_container_mobile_navigation_action_img" #}
  735.             {#                                                 src="/bundles/shopwithmetheme/assets/imgs/aiStream_edit.svg"/> #}
  736.             {#                                            <span class="typo-sub-text-4 section-5__home__experience_container_mobile_navigation_info">10k</span> #}
  737.             {#                                        </div> #}
  738.             {#                                        <div class="section-5__home__experience_container_mobile_navigation_action d-flex flex-col items-center"> #}
  739.             {#                                            <img class="section-5__home__experience_container_mobile_navigation_action_img" #}
  740.             {#                                                 src="/bundles/shopwithmetheme/assets/imgs/aiStream_cart.svg"/> #}
  741.             {#                                        </div> #}
  742.             {#                                    </div> #}
  743.             {#                                    <div class=" gap-8px d-flex flex-col"> #}
  744.             {#                                        <img src="/bundles/shopwithmetheme/assets/imgs/aiStream_navUp.svg"/> #}
  745.             {#                                        <img src="/bundles/shopwithmetheme/assets/imgs/aiStream_navDown.svg"/> #}
  746.             {#                                    </div> #}
  747.             {#                                </div> #}
  748.             {#                                <div class="section-5__home__experience_container_mobile_video_infor d-flex flex-col"> #}
  749.             {#                                    <div class="section-5__home__experience_container_video_infor_user_info d-flex items-center"> #}
  750.             {#                                        <img class="section-5__home__experience_container_video_avatar_image" #}
  751.             {#                                             src="/bundles/shopwithmeui/assets/imgs/shop_with_me.svg"/> #}
  752.             {#                                        <span class="section-5__home__experience_container_username typo-sub-text-4">{{ productVideo|first.postUser }}</span> #}
  753.             {#                                    </div> #}
  754.             {#                                    <div class="section-5__home__experience_container_video_infor d-flex flex-col gap-8px"> #}
  755.             {#                                        <span class="section-5__home__experience_container_video_infor_product_name">{{ productVideo|first.product.translated.name }}</span> #}
  756.             {#                                        <div id="userScore" #}
  757.             {#                                             class="section-5__home__experience_container_mobile_video_infor_truncate-text-container d-flex"> #}
  758.             {#                                            <span class="typo-sub-text-5-smb section-5__home__experience_container_video_infor_user_review truncate-text truncated"> #}
  759.             {#                                            {{ productVideo|first.product.translated.description|raw }} #}
  760.             {#                                        </span> #}
  761.             {#                                            <span class="typo-sub-text-5-smb show-more-btn">more</span> #}
  762.             {#                                        </div> #}
  763.             {#                                    </div> #}
  764.             {#                                </div> #}
  765.             {#                                <div class="section-5__home__experience_container_mobile_video_pause_button position-absolute"> #}
  766.             {#                                    <img id="home_aiStream_play_button" #}
  767.             {#                                         src="/bundles/shopwithmetheme/assets/imgs/aiStream_play.svg"/> #}
  768.             {#                                </div> #}
  769.             {#                            </div> #}
  770.             {#                            <video id="home_aiStream_vid" #}
  771.             {#                                   class="section-5__home__experience-container-item-img item_experience_img" muted #}
  772.             {#                                   playsinline loop> #}
  773.             {#                                <source src="/bundles/shopwithmetheme/assets/video-eg.mp4" type="video/mp4"/> #}
  774.             {#                            </video> #}
  775.             {#                            <div class="section-5__home__experience-container-item-overlay position-absolute"></div> #}
  776.             {#                        </div> #}
  777.             {#                    {% endif %} #}
  778.             {#                </div> #}
  779.         </div>
  780.         {# Modal #}
  781.         {% sw_include '@Storefront/storefront/component/aistream/desktop-common-modal.html.twig' with {
  782.             id: desktopShareModal,
  783.             height: '100%',
  784.             className: 'lazy-load-modal full-screen appear-center',
  785.             style: 'position: fixed !important; background-color: #00000066;',
  786.             content: desktopShareModalContent|raw,
  787.             showTopNut: false,
  788.         } %}
  789.     {% endblock %}
  790.     <script>
  791.         const caodaoTimeProductDetail = {{ currentDeal.endDate|date("U") is not empty ? currentDeal.endDate|date("U")|json_encode|raw : 'null' }};
  792.         const translationsProductDetail = {
  793.             expired: "{{ 'app.expired'|trans|sw_sanitize }}",
  794.             addToCartSuccess: "{{ 'app.addToCartSuccess'|trans|sw_sanitize }}",
  795.             addToCartFailed: "{{ 'app.addToCartFailed'|trans|sw_sanitize }}",
  796.         };
  798.         const checkoutLinks = {
  799.             checkoutCartLink: "{{ seoUrl('frontend.checkout.cart.page') }}",
  800.         }
  801.     </script>
  802. {% endblock %}