templates/App/checkout/upsell_checkout_page.html.twig line 1

Open in your IDE?
  1. {% extends "App/checkout/base_product.html.twig" %}
  3. {% block content %}
  4.     {% set currency = product.defaultCurrency|currency_symbol %}
  5.     <input type="hidden" name="purchase_order_id" value="{{ lastPaidOrder ? lastPaidOrder.id : '' }}">
  7.     <div class="container upsell-checkout step-1">
  8.         <div class="split">
  9.             <div class="split__content">
  10.                 <!-- Status Bar -->
  11.                 <div class="status-bar">
  12.                     <div class="status-item status-completed">
  13.                         <div class="status-icon">
  14.                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  15.                                 <circle cx="10" cy="10" r="9" fill="#1acd8e"/>
  16.                                 <path d="M6 10L9 13L14 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  17.                             </svg>
  18.                         </div>
  19.                         <div class="status-label">{{ 'upsellPageProgressStep1' | trans }}</div>
  20.                     </div>
  21.                     <div class="status-connector status-connector-green"></div>
  22.                     <div class="status-item status-in-progress">
  23.                         <div class="status-icon">🟠</div>
  24.                         <div class="status-label">{{ 'upsellPageProgressStep2' | trans }}</div>
  25.                     </div>
  26.                     <div class="status-connector status-connector-orange"></div>
  27.                     <div class="status-item status-orange">
  28.                         <div class="status-icon">🟠</div>
  29.                         <div class="status-label">{{ 'upsellPageProgressStep3' | trans }}</div>
  30.                     </div>
  31.                     <!-- Label Timer -->
  32.                     {% if product.upsellPageProgressTimer > 0%}
  33.                         <div class="status-timer">
  34.                             <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  35.                                 <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none"/>
  36.                                 <path d="M8 4V8L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  37.                             </svg>
  38.                             <span id="labelTimerDisplay">0{{ product.upsellPageProgressTimer }}:00</span>{{ 'upsellPageProgressLabel' | trans }}
  39.                         </div>
  40.                     {% endif %}
  41.                 </div>
  42.                 <div class="page-title">
  43.                     {% if discountPercentage is defined and discountPercentage > 0 and product.upsellPageDescForNewCustomers %}
  44.                         {{ product.upsellPageDescForNewCustomers | raw }}
  45.                     {% elseif product.upsellPageDescription is not empty %}
  46.                         {{ product.upsellPageDescription | raw }}
  48.                     {% else %}
  49.                         {{ 'upsellPageTitle' | trans }}
  50.                     {% endif %}
  51.                 </div>
  52.                 <input type="hidden" value="{{ product.id }}" name="product_id">
  53.                 <input type="hidden" value="{{ isFirstOrder }}" name="is_first_order">
  54.                 {% include "App/checkout/partials/product_upsells_page.html.twig"
  55.                     with {'product': product, 'currency': currency, 'choosedUpsells': choosedUpsells, 'discountPercentage': discountPercentage}
  56.                 %}
  58.             </div>
  59.             <div class="split__content">
  60.                 <a href="#order" class="split__btn">
  61.                     <svg role="img" class="icon icon-cart">
  62.                         <use xlink:href="{{ asset('assets/svg/icons/icons.svg#icon-cart') }}"></use>
  63.                     </svg>
  64.                 </a>
  65.                 {{ form_start(form) }}
  66.                 <form class="form" method="post">
  68.                     <div class="receipt">
  69.                         <div class="select-item-title text-center">
  70.                             {{ 'upsellPageSelectItem' | trans }}
  71.                         </div>
  72.                         <div class="product-title-wrap">
  73.                             <div class="card-title skeleton"></div>
  74.                             <div class="card-title skeleton"></div>
  75.                             <div class="card-title skeleton"></div>
  77.                             <div id="product-title-block">
  79.                             </div>
  80.                         </div>
  81.                         <div class="shipping-wrap step-1">
  82.                             <div class="card-title skeleton pt-5"></div>
  84.                             <div id="shipping-block"></div>
  85.                         </div>
  86.                         <hr>
  87.                         <div class="total-wrap">
  88.                             <div class="card-title skeleton pt-5 pb-5"></div>
  90.                             <div id="total-block"></div>
  91.                         </div>
  92.                     </div>
  93.                     <hr>
  94.                     <div class="btn-wrap btn-wrap--start">
  95.                         <div class="d-flex justify-content-center w-100">
  96.                             <button type="submit" class="btn btn--sm d-flex justify-content-center align-items-center">{{ 'finishOrder'| trans }}</button>
  98.                         </div>
  99.                         <div class="d-flex justify-content-center w-100 mt-2">
  100.                             <a href="{{ skipUrl }}" class="link">{{ 'postUpsellSkipButton'| trans }}</a>
  101.                         </div>
  102.                     </div>
  104.                     {{ form_end(form) }}
  105.             </div>
  106.         </div>
  107.     </div>
  108.     <style>
  109.         .upsell-checkout .upsell-product__manage .form-control, .upsell-checkout .upsell-product__manage .input-group-append, .upsell-checkout .upsell-product__manage .input-group-append .input-group-text[role=button] {
  110.             background: #f5f5f5;
  111.         }
  112.         .status-timer span{
  113.             text-transform: uppercase;
  114.         }
  115.     </style>
  116.     <script>
  117.         document.addEventListener('DOMContentLoaded', function() {
  118.             startLabelTimer();
  119.         });
  120.         let labelTimeLeft = {{ product.upsellPageProgressTimer }} * 60;
  121.         let labelTimerInterval = null;
  122.         function startLabelTimer() {
  123.             const labelTimerDisplay = document.getElementById('labelTimerDisplay');
  124.             if (!labelTimerDisplay) return;
  126.             labelTimerInterval = setInterval(() => {
  127.                 const minutes = Math.floor(labelTimeLeft / 60);
  128.                 const seconds = labelTimeLeft % 60;
  130.                 labelTimerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  132.                 if (labelTimeLeft <= 0) {
  133.                     clearInterval(labelTimerInterval);
  134.                     labelTimerDisplay.textContent = '00:00';
  135.                 } else {
  136.                     labelTimeLeft--;
  137.                 }
  138.             }, 1000);
  139.         }
  140.     </script>
  141. {% endblock %}