Delivery Method

The delivery selection template is undergoing gradual unification, simplification, and migration to components. The goal is to introduce newer approaches incrementally without requiring a full rewrite of all templates from the start.

In the examples below, the i:**** tags are the important parts; the rest of the template will differ historically for each shop.

Delivery-transport and delivery-branch

Defines the element for selecting a carrier. Typically this is a radio input with a label such as Ceska posta (Czech Post).

Branch selection is displayed only if the given delivery method supports branches (this is not handled in the template). The branch selection button text is optional and is automatically added to translations.

The reload-targets attribute accepts selectors for elements that should be automatically updated when the transport or payment selection changes.

<i:delivery-transports tag="div" reload-targets=".order_totals">
    {% for transport in transports %}
        <i:delivery-transport tag="div" transport="transport">
            <label>
                <input type='radio' if:checked="transport.selected" name='transport'>
                {{ transport.name }}
            </label>
            <i:delivery-branch button-text="cart.select-branch.button"/>
        </i:delivery-transport>
    {% endfor %}
</i:delivery-transports>

<!-- generated code - subject to change! -->

<div data-component="delivery-transports">
    <div data-component="delivery-transport">
        <label>
            <input type="radio" name="transport" value="14">
            Česká pošta
        </label>
        <div data-component="delivery-branch">
            <input type="hidden" name="pobocka[zasilkovna_stat_1000]" value="17">
            <span>Drtinova 10, Praha</span>
            <a href="#">vyberte pobočku</a>
        </div>
    </div>
</div>

Delivery-payment

Defines the element for selecting a payment method. Typically this is a radio input with a label such as platba kartou (card payment). The tag identifies the related element for a single carrier -- currently only branch selection.

Available payment options are automatically updated when the transport selection changes.

<i:delivery-payments tag="div" reload-targets=".order_totals">
    {% for payment in payments %}
        <i:delivery-payment tag="div" payment="payment">
            <label>
                <input type='radio' if:checked="payment.selected" name='payment'>
                {{ payment.name }}
            </label>
        </i:delivery-payment>
    {% endfor %}
</i:delivery-payments>

<!-- generated code - subject to change! -->

<div data-component="delivery-payments">
    <div data-component="delivery-payment">
        <label>
            <input type="radio" name="payment" value="14">
            platba kartou
        </label>
    </div>
</div>

Delivery-map

Defines an element with an interactive carrier map.

<i:delivery-map />
<i:delivery-map country="cz" carrier="zasilkovna" query="Praha" />

Attributes of delivery-map

Attribute	Required	Description
country	no	Country
carrier	no	Carrier type
query	no	Search phrase

<!-- generated code - subject to change! -->

<div data-type="zasilkovna" data-search="Praha" data-country="cz" class="branch-map"></div>

Complete Delivery Step

The delivery step template (kosik_dodani.tpl) wraps the transport and payment selection in a form with step navigation. It is loaded by the checkout router (kosik.tpl) when sekce == 'dodani' (see Cart - Checkout Flow Architecture).

{# kosik_dodani.tpl — delivery step #}
<form action="{{ this.urlSave }}" method="post" class="form_adresa">
    <div class="grid-x">
        <div class="checkout-left cell">
            {# Step indicator breadcrumb — kosik_kroky.tpl #}
            {% include 'kosik_kroky.tpl' %}

            {# Optional info banner from content grid #}
            {% if this.contentGrid('checkout-delivery-info') %}
                {% set block = this.contentGrid('checkout-delivery-info').checkouttext %}
                <div style="color: {{ block.color }}; background: {{ block.bgcolor }};
                            border: {{ block.bordercolor ? '1px solid ' ~ block.bordercolor }}">
                    {{ block.text }}
                </div>
            {% endif %}

            <h1>{% trans 'checkout.headline' %}
                (<span i:dynamic="cart">{{ cart.catalogItemTotalAmount }}</span>
                {% trans 'template.qty' %})
            </h1>

            {# Transport and payment selection (shared partial) #}
            {% include '_dodani.tpl' %}
        </div>

        {# Order summary sidebar — receives checkout context #}
        {% include 'kosik_souhrn.tpl' with {'checkout': 'delivery'} %}
    </div>

    {# Hidden field to advance to address step on submit #}
    <input type="hidden" name="toSekce" value="udaje">
</form>

Key Structural Elements

Element	Purpose
kosik_kroky.tpl	Step progress breadcrumb, included at the top of each step
_dodani.tpl	Shared partial containing the i:delivery-transports and i:delivery-payments components documented above
kosik_souhrn.tpl	Order summary sidebar, receives {'checkout': 'delivery'} context to show delivery costs and a "Continue to address" button
toSekce hidden field	Set to udaje (address) to advance to the next checkout step on form submit
contentGrid('checkout-delivery-info')	Optional admin-configurable info banner (see Content Grid)
i:dynamic="cart"	Marks the item count span for automatic reload when cart data changes (see Syntax - Dynamic Content Reload)

The _dodani.tpl partial contains the i:delivery-transports and i:delivery-payments components documented above. The summary sidebar (kosik_souhrn.tpl) adapts its content based on the checkout variable — showing delivery costs and a "Continue to address" button on the delivery step.