custom/plugins/HemoCheckoutStepper/src/Resources/views/storefront/page/checkout/_page.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/checkout/_page.html.twig' %}
  3. {% block page_checkout %}
  4.     {# ═══════════════════════════════════════════
  5.        CHECKOUT STEPPER — 3-Step Wizard
  6.        Only visible on confirm page (after login) and finish page
  7.        Steps: Anschrift → Zahlung → Bestellung abschließen
  8.     ═══════════════════════════════════════════ #}
  10.     {% set isConfirmPage = controllerAction|lower == 'confirmpage' %}
  11.     {% set isFinishPage = controllerAction|lower == 'finishpage' %}
  12.     {% set showStepper = isConfirmPage or isFinishPage %}
  14.     {% set steps = [
  15.         { number: 1, label: 'checkoutStepper.address'|trans },
  16.         { number: 2, label: 'checkoutStepper.payment'|trans },
  17.         { number: 3, label: 'checkoutStepper.summary'|trans },
  18.     ] %}
  20.     {% if showStepper %}
  21.         <nav class="checkout-stepper"
  22.              aria-label="{{ 'checkoutStepper.progress'|trans }}"
  23.              data-label-continue="{{ 'checkoutStepper.continue'|trans }}"
  24.              data-label-back="{{ 'checkoutStepper.back'|trans }}"
  25.              data-label-edit-address="{{ 'checkoutStepper.editAddress'|trans }}"
  26.              data-label-edit-payment="{{ 'checkoutStepper.editPayment'|trans }}"
  27.              data-label-step-1="{{ steps[0].label }}"
  28.              data-label-step-2="{{ steps[1].label }}"
  29.              data-label-step-3="{{ steps[2].label }}">
  30.             <div class="container">
  31.                 <ol class="checkout-stepper__list">
  32.                     {% for step in steps %}
  33.                         {# On finish page: all completed. On confirm: JS manages state #}
  34.                         {% if isFinishPage %}
  35.                             {% set state = 'completed' %}
  36.                         {% else %}
  37.                             {# Default: step 1 active, rest upcoming. JS overrides this immediately #}
  38.                             {% set state = step.number == 1 ? 'active' : 'upcoming' %}
  39.                         {% endif %}
  41.                         <li class="checkout-stepper__item checkout-stepper__item--{{ state }}" {% if state == 'active' %}aria-current="step"{% endif %}>
  42.                             {# Connector line #}
  43.                             {% if not loop.first %}
  44.                                 <div class="checkout-stepper__connector">
  45.                                     <div class="checkout-stepper__connector-fill {% if state == 'completed' or state == 'active' %}checkout-stepper__connector-fill--active{% endif %}"></div>
  46.                                 </div>
  47.                             {% endif %}
  49.                             {# Step circle + label #}
  50.                             {% if state == 'completed' %}
  51.                                 <span class="checkout-stepper__step" style="cursor: default;">
  52.                                     <span class="checkout-stepper__circle checkout-stepper__circle--completed">
  53.                                         <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
  54.                                             <path d="M11.6 3.5L5.25 9.85L2.4 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  55.                                         </svg>
  56.                                     </span>
  57.                                     <span class="checkout-stepper__label">{{ step.label }}</span>
  58.                                 </span>
  59.                             {% elseif state == 'active' %}
  60.                                 <span class="checkout-stepper__step">
  61.                                     <span class="checkout-stepper__circle checkout-stepper__circle--active">{{ step.number }}</span>
  62.                                     <span class="checkout-stepper__label checkout-stepper__label--active">{{ step.label }}</span>
  63.                                 </span>
  64.                             {% else %}
  65.                                 <span class="checkout-stepper__step">
  66.                                     <span class="checkout-stepper__circle checkout-stepper__circle--upcoming">{{ step.number }}</span>
  67.                                     <span class="checkout-stepper__label checkout-stepper__label--upcoming">{{ step.label }}</span>
  68.                                 </span>
  69.                             {% endif %}
  70.                         </li>
  71.                     {% endfor %}
  72.                 </ol>
  73.             </div>
  74.         </nav>
  75.     {% endif %}
  77.     {{ parent() }}
  78. {% endblock %}