custom/plugins/ShopWithMeUI/src/Resources/views/storefront/page/shop4free/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/base.html.twig' %}
  3. {% block base_content %}
  4.     {% block layout_shop4free %}
  5.         {% set desktopShop4freePurchaseModal = "desktop-share-modal-" %}
  6.         {% set desktopShop4freePurchaseModalContent %}
  7.             {% sw_include '@Storefront/storefront/page/shop4free/shop4free-purchase-modal.html.twig' %}
  8.         {% endset %}
  9.         <div id="swm-shop4free">
  10.             <section class="shop4free_banner_wrapper shop4free_banner_wrapper-mobile swm-m-auto position-relative desktop:d-none-important" style="margin-top: 24px">
  11.                 {# <!--Container-->
  12.                 <div
  13.                     class="d-flex justify-center items-center flex-col" style="gap: 15.25px;">
  14.                     <!--Pic-->
  15.                     <div class="shop4free_banner_pictures d-flex items-center justify-center position-relative">
  16.                         <img src="/bundles/shopwithmeui/assets/imgs/shop4freeBanner/left.png" class="shop4free_banner_pictures_side"/>
  17.                         <img class="shop4free_banner_pictures_center position-absolute" src="/bundles/shopwithmeui/assets/imgs/shop4freeBanner/center.png"/>
  18.                         <img src="/bundles/shopwithmeui/assets/imgs/shop4freeBanner/right.png" class="shop4free_banner_pictures_side"/>
  19.                     </div>
  20.                     <!--Text-->
  21.                     <div class="d-flex flex-col gap-1rem items-center">
  22.                         <span class="shop4free_banner_text_title typo-head-2 d-flex text-center">{{'app.shop4freePage.title'|trans|raw}}</span>
  23.                         <p class="shop4free_banner_text_des typo-head-5 text-center">{{'app.shop4freePage.subTitle'|trans}}</p>
  24.                     </div>
  25.                 </div>
  26.                 <img class="shop4free_banner_vector position-absolute" src="/bundles/shopwithmeui/assets/imgs/shop4freeBanner/Vector.svg"/>
  27.                 <img class="shop4free_banner_vector_mobile position-absolute" src="/bundles/shopwithmeui/assets/imgs/shop4freeBanner/Vector_mobile.svg"/> #}
  29.                 <div class="shop4free_banner_wrapper-mobile-head typo-head-4-b text-center" style="margin-bottom: 32px">
  30.                     SHOP4FREE
  31.                 </div>
  32.                 <div class="shop4free_banner_wrapper-mobile-media width-full" style="padding: 16px">
  33.                     <img class="shop4free_banner_wrapper-mobile-media-img width-full height-full" src="{{ asset('bundles/shopwithmeui/assets/imgs/shop4freeBanner/banner-shop4free-mobile.jpeg') }}"/>
  34.                 </div>
  35.                 
  37.             </section>
  38.             <section class="shop4free_banner_wrapper shop4free_banner_wrapper-desktop swm-m-auto">
  39.                 <div class="shop4free_banner_wrapper-desktop-head typo-head-2 text-center text-uppercase">
  40.                     SHOP4FREE
  41.                 </div>
  42.                 <div class="shop4free_banner_wrapper-desktop-media width-full">
  43.                     <img class="shop4free_banner_wrapper-desktop-media-img width-full height-full" src="{{ asset('bundles/shopwithmeui/assets/imgs/shop4freeBanner/banner-shop4free.jpeg') }}"/>
  44.                 </div>
  45.             </section>
  46.             <section class="section-2__shop4free">
  47.                 <div class="section-2__shop4free-content d-flex flex-col swm-mb-8">
  49.                     {% for product in products %}
  50.                         {% set isTop3Credit = product.customFields.productCreditPrice >= 999999 %}
  51.                         {% set widthProgress = 0 %}
  52.                         {% set balance = 0 %}
  54.                         {% if not isTop3Credit %}
  55.                             {% if (customer / product.customFields.productCreditPrice * 100) > 100 %}
  56.                                 {% set widthProgress = 100 %}
  57.                             {% else %}
  58.                                 {% set widthProgress = ( customer / product.customFields.productCreditPrice * 100) %}
  59.                             {% endif %}
  60.                         {% endif %}
  61.                         {% set balance = customer %}
  62.                         <div class="section-2__shop4free-content-product d-flex items-center" style="background-image: url({{ asset('bundles/shopwithmeui/assets/imgs/shop4free/img-bg1.png') }})">
  63.                             <div class="section-2__shop4free-content-product-info">
  64.                                 <div class="section-2__shop4free-content-product-info-description d-flex flex-col">
  65.                                     <div class="section-2__shop4free-content-product-info-description-name typo-head-2">
  66.                                         {{product.translated.name}}
  67.                                     </div>
  68.                                     <div class="section-2__shop4free-content-product-info-description-describe typo-sub-text-3-pr">
  69.                                         {{product.description|raw}}
  70.                                     </div>
  71.                                 </div>
  72.                                 <div class="section-2__shop4free-content-product-info-description-buy d-flex items-center justify-content-between">
  73.                                     {# Credit #}
  74.                                     <div class="d-flex flex-col justify-between section-2__shop4free-content-product-info-left-content">
  75.                                         <div class="d-flex gap-1rem">
  76.                                             {# {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' with {
  77.                                                 isHeaderButton: false,
  78.                                                 classTextButton: 'section-2__shop4free-content-product-info-left-content-earnmore-text'
  79.                                             } %} #}
  80.                                             {% set checkEnoughCredit = (context.customer && (balance < product.customFields.productCreditPrice)) %}
  81.                                             <button class="section-2__shop4free-content-product-info-description-btn button-square button-primary d-flex items-center shop4free-purchase-btn" 
  82.                                                     title="Shop4free now" 
  83.                                                     aria-label="Shop4free now"
  84.                                                     data-product-id= "{{ product.id }}"
  85.                                                     data-product-name= "{{ product.translated.name }}"
  86.                                                     data-product-credit= "{{ product.customFields.productCreditPrice }}"
  87.                                                     desktop-modal-target='#{{context.customer ? desktopShop4freePurchaseModal : ''}}'
  88.                                                     data-balance= "{{ balance }}"
  89.                                                     {% if checkEnoughCredit %} disabled {% endif %}
  90.                                                     >
  91.                                                 <div class="section-2__shop4free-content-product-info-description-title d-flex items-center justify-between">
  92.                                                     <div class="d-flex flex-col items-start gap-8px">
  93.                                                         <span class="{{classTextButton}} button-title typo-sub-text-2 section-2__shop4free-content-product-info-description-title-text">{{'app.shop4freeNowButton'|trans}}</span>
  94.                                                     </div>
  95.                                                     <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
  96.                                                         xmlns="http://www.w3.org/2000/svg">
  97.                                                         <path
  98.                                                             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"
  99.                                                             stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
  100.                                                         <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5"
  101.                                                             stroke-linecap="round" stroke-linejoin="round" />
  102.                                                     </svg>
  103.                                                 </div>
  104.                                             </button>
  105.                                         </div>
  106.                                         <div class="section-2__shop4free-content-product-img_mobile">
  107.                                             {% if product.cover.media.mimeType starts with 'video' %}
  108.                                                 <video loading="lazy" class="section-2__shop4free-content-product-img-container" autoplay playsinline muted>
  109.                                                     <source src="{{ product.cover.media.url }}" type="{{ product.cover.media.mimeType }}" />
  110.                                                 </video>
  111.                                             {% else %}
  112.                                                 <img src-lazy="{{ product.cover.media.url }}" alt="{{product.name}}" class="section-2__shop4free-content-product-img-container"/>
  113.                                             {% endif %}
  114.                                         </div>
  115.                                         <div class="section-2__shop4free-content-product-info-credit d-flex flex-col">
  116.                                         {% if isTop3Credit %}
  117.                                             <div class="section-2__shop4free-content-product-info-credit-number">
  118.                                                 {{'app.shop4freePage.top3'|trans}} ({{'app.shop4freePage.mercedesMonth'|trans}} {{ "now"|date("Y") }})
  119.                                             </div>
  120.                                         {% else %}
  121.                                             <div class="section-2__shop4free-content-product-info-credit-number">
  122.                                                 {{product.customFields.productCreditPrice}}
  123.                                                 {{'app.credits'|trans}}
  124.                                             </div>
  125.                                         {% endif %}
  126.                                             
  127.                                             <div class="section-2__shop4free-content-product-info-credit-line"></div>
  128.                                             <div class="section-2__shop4free-content-product-info-credit-progress text-center d-flex flex-col">
  129.                                                 <div class="section-2__shop4free-content-product-info-credit-progress-head typo-sub-text-3-pr">
  130.                                                     {{'app.yourProgress'|trans}}
  131.                                                 </div>
  133.                                                 <div class="section-2__shop4free-content-product-info-credit-progress-ratio">
  134.                                                     <div class="section-2__shop4free-content-product-info-credit-progress-ratio-active" style="width: {{widthProgress}}%"></div>
  135.                                                 </div>
  136.                                                 <div class="section-2__shop4free-content-product-info-credit-progress-balance typo-sub-text-3-pr">
  137.                                                     {{'app.currentBalance'|trans}}:
  138.                                                     <span class="customer-credit-balance">{{balance}}</span>
  139.                                                     {{'app.credits'|trans}}
  140.                                                 </div>
  141.                                             </div>
  142.                                             <a href="{{ seoUrl('frontend.credit.lucky-wheel') }}" class="section-2__shop4free-content-product-info-credit-btn swm-btn swm-btn-earn-credit">
  143.                                                 <div class="section-2__shop4free-content-product-info-credit-btn-content-title d-flex items-center justify-center">
  144.                                                     <div class="d-flex flex-col items-start gap-8px">
  145.                                                         <span class="shop4free-earnmore-btn button-title typo-sub-text-4">{{'app.shop4freePage.earnMoreCredits'|trans}}</span>
  146.                                                     </div>
  147.                                                     <img src="{{ asset('bundles/shopwithmeui/assets/icons/earnmore_icon.svg') }}" alt="Earn More Credits Icon"/>
  148.                                                 </div>
  149.                                             </a>
  150.                                         </div>
  151.                                     </div>
  152.                                     <div class="section-2__shop4free-content-product-img">
  153.                                         {% if product.cover.media.mimeType starts with 'video' %}
  154.                                             <video loading="lazy" class="section-2__shop4free-content-product-img-container" autoplay playsinline muted>
  155.                                                 <source src="{{ product.cover.media.url }}" type="{{ product.cover.media.mimeType }}" />
  156.                                             </video>
  157.                                         {% else %}
  158.                                             <img src-lazy="{{ product.cover.media.url }}" alt="{{product.name}}" class="section-2__shop4free-content-product-img-container"/>
  159.                                         {% endif %}
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     {% endfor %}
  165.                 </div>
  166.             </section>
  167.             {% sw_include '@Storefront/storefront/component/aistream/desktop-common-modal.html.twig' with {
  168.                 id: desktopShop4freePurchaseModal,
  169.                 height: '100%',
  170.                 className: 'lazy-load-modal full-screen appear-center',
  171.                 style: 'position: fixed !important; background-color: #00000066;',
  172.                 content: desktopShop4freePurchaseModalContent|raw,
  173.                 showTopNut: false,
  174.             } %}
  175.         </div>
  176.     {% endblock %}
  178.     <script>
  179.         const translationsShop4free = {
  180.             thisProduct: "{{ 'app.shop4freePage.thisProduct'|trans|sw_sanitize }}",
  181.             successMessage: "{{ 'app.shop4freePage.successMessage'|trans|sw_sanitize }}",
  182.             errorMessage: "{{ 'app.shop4freePage.errorMessage'|trans|sw_sanitize }}",
  183.         };
  185.         const redirectShop4free = {
  186.             shop4free: "{{ seoUrl('frontend.shop4free') }}",
  187.             login: "{{ seoUrl('frontend.econsor.app.storefront.login') }}",
  188.         }
  189.     </script>
  190. {% endblock %}