Nákupní proces

Výběr varianty

Zprovoznění výběru varianty v detailu košíku má tři kroky:

1. v config.json vypsat podporované způsoby výběru (roletka, ikonky, …)

2. v administraci eshopu definovat kroky (jaký číselník má jaký způsob výběru, popisky, …)

3. v šabloně implementovat i:variant-choice

i:variant-choice

Tag i:variant-choice se použije uvnitř formuláře pro vložení do košíku. Zajistí zobrazení potřebného počtu kroků, jejich postupné načítání, předvybrání podle URL nebo preferencí zákazníka, změnu URL při výběru atd.

Důlěžité prvky:

• větev else - pokud je podporováno víc režimů výběru, měl by jeden (ideálně ten nejjednoduší jako třeba roletka) být ve větvi else. Pokud by se v šabloně počítalo jen s určitými režimy a z nějakého důvodu by eshop počítal s jinými, tak by nešlo nakoupit - poslední větev else nákup umožní.

• data-role=“step“ - obal určující jednotlivé kroky - při načítání voleb podle aktuálního výběru se nahrazují jen následující kroky

• reload-targets - třídy (nebo CSS selector) prvků, které se mají při každém výběru volby aktualizovat - typicky obrázky, cena, dostupnost atd. V šabloně tyto prvky musí být nejprve označeny přes i:dynamic

• step.inputName, choice.inputValue - název/hodnota pro input formuláře. Jestli bude v použit select/radio je na šabloně.

• choice.image - obrázek od produktu nebo varianty (typicky fotka produktu), který není dostupný všude

• choice.icon - obrázek nahraný u číselníku (typicky ikonka)

• choice.color - HEX kód barvy vyplněný u hodnoty číselníku

<i:variant-choice product="product" reload-targets=".js_var_change_example">
    {%for step in product.variantChoiceSteps%}
    <div data-role="step">
        {%if step.mode == 'icons'%}
            <h5>{{step.headline}}</h5>
            <ul>
                {%for choice in step.choices%}
                    <li>
                        <label for="color-{{choice.inputValue}}" title="{{choice.name}}" class="custom-tooltip" i:href="{{choice}}">
                            <input name="{{step.inputName}}" type="radio" value="{{choice.inputValue}}" required data-msg-required="{{step.messageEmpty}}" if:checked="choice.selected">
                            {%if choice.image%}
                                <i:img src="choice.image" format="50x50" fill lazyload/>
                            {%elseif choice.icon%}
                                <i:img src="choice.icon" format="50x50" fill vector lazyload/>
                            {%elseif choice.color%}
                                <span style="background-color: {{choice.color}}"/>
                            {%endif%}
                            {{choice.name}}
                        </label>
                    </li>
                {%endfor%}
            </ul>
        {%else%}
            <h5>{%if step.headline%}{{step.headline}}{%else%}{%trans%}Vyberte variantu{%endtrans%}{%endif%}</h5>
            <select name="{{step.inputName}}" required>
                <option value="">{{step.placeholder}}</option>
                {%for choice in step.choices%}
                    <option value="{{choice.inputValue}}" if:selected="choice.selected">
                        {{choice.name}}
                    </option>
                {%endfor%}
            </select>
        {%endif%}
    </div>
    {%endfor%}
</i:variant-choice>