checkout-base.html.twig

{% extends 'base.html.twig' %}

{% block title %}{{ 'Checkout'|trans }}{% endblock %}

{% block robots %}<meta name="robots" content="noindex, follow">{% endblock %}

{% block header %}
    <twig:Layouts:Header:Checkout />
{% endblock %}

{# Child pages define the checkoutContent, checkoutSummary, checkoutNextButton
   and checkoutBackButton blocks. Each block is rendered ONCE into a variable:
   testing block('...') != '' directly would render it a second time, which
   re-executes every LiveComponent it contains. #}
{% block body %}
    {# Turbo Drive is opt-in (disabled globally in app.js): the whole tunnel
       zone navigates client-side between the checkout steps. #}
    <div data-turbo="true" class="contents">
    {# The refusals of the checkout land here as 'error' flashes: the core redirect
       listener only reads the url and the status off RedirectException, so the flash
       bag is the one channel that gets the wording onto the step the buyer lands on.
       Thelia's Twig `app` has no flashes() helper — the bag is read via the session.
       Some of these messages quote back-office wording (a consent title): they must
       come out escaped, so no SnackBar component here (its `text` prop renders |raw). #}
    {% set checkoutFlashes %}
        {% for message in app.session ? app.session.flashBag.get('error') : [] %}
            <div class="SnackBar bg-error-lightest border-error SnackBar--error mb-6">
                <div class="SnackBar-content">
                    <span class="SnackBar-icon">
                        {{ ux_icon('error') }}
                    </span>
                    <div class="SnackBar-message">
                        {{ message }}
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endset %}
    {% set checkoutContent = block('checkoutContent') is defined ? block('checkoutContent') : '' %}
    {% set checkoutSummary = block('checkoutSummary') is defined ? block('checkoutSummary') : '' %}
    {% set checkoutNextButton = block('checkoutNextButton') is defined ? block('checkoutNextButton') : '' %}
    {% set checkoutBackButton = block('checkoutBackButton') is defined ? block('checkoutBackButton') : '' %}
    {% set useSidebar = checkoutSummary|trim != '' %}

    {{ theme_hook('checkout.top') }}

    {% block checkoutSteps %}
        <twig:Molecules:CheckoutSteps:Base
            :steps="[
                {text: 'Your cart', link: path('checkout_cart')},
                {text: 'Delivery', link: path('checkout_delivery')},
                {text: 'Payment', link: path('checkout_payment')},
                {text: 'Confirmation'},
            ]"
            :current="current"
        />
    {% endblock %}

    {% if useSidebar %}
        <div class="container-double-1">
            <div>
                <div class="py-9 lg:py-12">
                    {{ checkoutFlashes }}
                    {{ checkoutContent|raw }}
                    {{ checkoutBackButton|raw }}
                </div>
            </div>
            <div class="bg-lightest">
                <div class="py-12 lg:py-20">
                    <h2 class="text-black h3 pb-4">
                        {{ 'Summary'|trans }}
                    </h2>
                    {{ checkoutSummary|raw }}

                    {% if checkoutNextButton|trim != '' %}
                        <div class="mt-8">
                            {{ checkoutNextButton|raw }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="container-m py-9 lg:py-12">
            {{ checkoutFlashes }}
            {{ checkoutContent|raw }}
            {{ checkoutBackButton|raw }}
        </div>
    {% endif %}

    {{ theme_hook('checkout.bottom') }}
    </div>
{% endblock %}

{% block footer %}
    <twig:Layouts:Footer:Checkout />
{% endblock %}