Komponenty

Speciálním zápisem lze do šablony vkládat komponenty jako například formulář pro registraci k newsletteru. V šabloně se používá pouze zjednodušený zápis a na výstupu se automaticky doplní potřebné prvky - formuláře, třídy atd.

CSS se nesmí spoléhat na generovaný výstup - s budoucí verzí se může změnit! V budoucnu se například může změnit typ inputu z text na email, takže není možné v CSS definovat vzhled přes typ inputu a je nutné použít třídu.

Vyhledávací políčko

Formulář pro vyhledávání na webu. Například do hlavičky nebo sloupce eshopu.

Atributy formuláře search-form

Atribut	Povinný	Popis
img-format	ne	rozměr obrázku pro našeptávač
min-length	ne	Počet znaků pro zobrazení našeptávače. Defaultní hodnota 3
template	ne	název TPL souboru ze složky s šablonou výsledků (ze složky ajax	bez koncovky)

{# minimální zápis #}
<i:search-form>
  <input data-role="search" data-label="Hledat">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

{# vlastní zápis #}
<i:search-form class="custom-class">
  <label for="role:search">{%trans%}Hledaná fráze{%endtrans%}</label>
  <input data-role="search" placeholder="{%trans%}co hledáte?{%endtrans%}">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

{# obrázky pro našeptávač #}
<i:search-form img-format="300x400">
  <input data-role="search" data-label="Hledat">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

{# autofocus zobrazení vyhledávání #}
<i:search-form min-length="0">
  <input data-role="search" data-label="Hledat">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

{# autocomplete #}
<i:search-form autocomplete template="articles">
  <input data-role="search" data-label="Hledat">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

<i:search-form autocomplete="div .show-autocomplete">
  <input data-role="search" data-label="Hledat">
  <button data-role="submit">Vyhledat</button>
</i:search-form>

Příklad generovaného výstupu při minimální zápisu (může se změnit!). Například name inputu se mění podle aktuálního jazyka, takže podle něj nejde nastavit javascript nebo CSS.

<form action="/_action-search" method="GET">
    <label for="search_465">Hledat</label>
    <input id="search_465" type="search" name="fraze" required>
    <button type="submit">Vyhledat</button>
</form>

Šablona výsledků

V souboru ajax/search.tpl (pokud není určeno atributem template jinak) se definuje šablona pro zobrazené výsledky hledání. Jedinou proměnnou je q obsahující hledano frázi. V šabloně je možné vypsat produkty, kategorie, značky, bannery, …

Šablona výsledků musí mít každý odkaz (produkt, kategorii, …) označený atributem tabindex, aby správně fungovalo ovládání přes klávesnici. Každý odkaz by také měl mít atribut data-result-type s hodnotou odpovídající typu výsledku (product, category, brand, more, …) pro vyhodnocování úspěšnosti hledání.

V CSS je potřeba nastylovat třídu search-current-item, která se nastaví položce s focusem při procházení klávesami.

{# Použití v šabloně /ajax/search.tpl #}
{% if q is empty %}
    <div class="global-search__results">
        ... Empty search ...
    </div>
{% else %}
    {% set categories = repository.category.findBy({'search': q, 'limit': 6}) %}
    {% if categories is not empty %}
        <div class="global-search__results">
            <ul>
            {% for category in categories %}
                <li><a href="{{ category.url }}" tabindex="{{ loop.index }}" data-result-type="category">{{ category.name }}</a></li>
            {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endif %}

Přihlášení k newsleteru

Jednoduchý formulář pro přihlášení k newsletteru.

Pole formuláře newsletter-signup

data-role	Povinný	Popis
email	ano	adresa k přihlášení
first_name	ne	křestní jméno
last_name	ne	příjmení
street	ne	ulice
city	ne	příjmení
zip	ne	PSČ
country	ne	stát (cz, sk, …)
source	ne	zdroj novinek
gender	ne	pohlaví (m nebo f)

Atributy formuláře newsletter-signup

Atribut	Povinný	Popis
redirect	ne	cílová URL
autohide	ne	skrýt celý formulář u přihlášeného zákazníka
ignore-duplicated	ne	ignorovat duplicitní registraci (atribut bez hodnoty)
confirm-template	ne	ID šablony pro email s potvrzením přidání
discount	ne	ID slevové sady pro přiřazení slevového kódu (nebo více ID oddělených čárkou)

Pole source se používá jen ve specifických případech například při využití můstku pro napojení na externí systém.

Při použití atributu discount je zákazníkovi odeslán slevový kód ze zvolené sady a pro text emailu se použije šablona dle confirm-template. V šabloně emailu se slevový kód vypíše značkou {{discountCode}}. Při použití více kódů obsahuje {{discountCode}} všechny kódy, nebo je možné použít pole discountCodes, které obsahuje klíče podle ID sady a hodnota je slevový kód.

Minimální zápis

{# label přes atribut #}
<i:newsletter-signup>
  <input data-role="email" data-label="Váš email">
  <i:gdpr-form />
  <button data-role="submit">Registrovat</button>
</i:newsletter-signup>

{# label obyčejně #}
<i:newsletter-signup>
    <label for="role:email">Váš email</label>
    <input data-role="email">
    <i:gdpr-form />
    <button data-role="submit">Registrovat</button>
</i:newsletter-signup>

<!-- vygenerovaný kód - může se měnit! -->
<form action="/_action-newsletter-signup" method="POST">
    <label for="email_12564">Váš email</label>
    <input type="email" name="email" id="email_12564" required>
    <button type="submit">Registrovat</button>
</form>

Kompletní

<i:newsletter-signup redirect="{{this.stranka(5).link}}">
    <input data-role="email" data-label="Váš email">
    <input data-role="first_name" data-label="Vaše jméno">
    <input data-role="last_name" data-label="Vaše příjmení">
    <select data-role="source" data-label="Zdroj">
        <option value="prvni">první volba</option>
        <option value="druha">druhá volba</option>
    </select>
    <button data-role="submit">Registrovat</button>
</i:newsletter-signup>

<!-- vygenerovaný kód - může se měnit! -->
<form action="/_action-newsletter-signup" method="POST">
    <label for="email_12564">Váš email</label>
    <input type="email" name="email" id="email_12564" required>

    <label for="first_name_12564">Vaše jméno</label>
    <input type="text" name="firstname" id="first_name_12564">

    <label for="last_name_12564">Vaše příjmení</label>
    <input type="text" name="surname" id="last_name_12564">

    <label for="source_12564">Zdroj</label>
    <select name="source" id="source_12564">
        <option value="prvni">první volba</option>
        <option value="druha">druhá volba</option>
    </select>
    <button type="submit">Registrovat</button>
</form>

Vlastní HTML

<i:newsletter-signup class="custom-class">
    <h3>Registrujte se ještě dnes!</h3>
    <input data-role="email" data-label="Váš email" class="mycustomclass" placeholder="vas@email.cz">
    <button data-role="submit">Registrovat k odběru</button>
</i:newsletter-signup>

<!-- vygenerovaný kód - může se měnit! -->
<form action="/_action-newsletter-signup" method="POST">
    <h3>Registrujte se ještě dnes!</h3>
    <label for="email12564">Váš email</label>
    <input type="email" name="email" id="email12564"  placeholder="vas@email.cz" required>
    <button type="submit">Registrovat k odběru</button>
</form>

Získání souhlasu ke zpracování osobních údajů (GDPR)

Používá se v rámci jiných formulářů (registrace, přihlášení k newsletteru, objednávka, …) pro doplnění zatržítka pro soouhlas se zpracováním údajů nebo jen pro zobrazení informačního textu.

Vygenerování textu a zatržítka probíhá na pozadí a lze ovlivnit pouze obalový div.

Atributy formuláře gdpr-form

Atribut	Povinný	Popis
codes	ne	kódy formulářů k vypsání oddělené čárkou
context	ne	ruční nastavení kontextu (cart-sign-up	footer	sidebar)
list	ne	vypsat jako li bez obalového divu (bez hodnoty)

<i:newsletter-signup>
  <input data-role="email" data-label="Váš email">
  <i:gdpr-form />
  <button data-role="submit">Registrovat</button>
</i:newsletter-signup>

Pokud není uveden atribut „codes“, tak se GDPR formuláře doplní podle kontextu automaticky. Ve většině případů se bude spoléhat na automatické doplnění, protože s ním jde vzhled ovládat z administrace.

Menu

V základním použití jen organizuje použivání menu a nepřidává žádnou funkci. S parametrem lazy ale umožňuje asynchronní načítání menu a výrazně zrychluje web aniž by návštěvník poznal rozdíl.

Parametrem lazy v tpl menu se určí, která část menu se načítá asynchronně. Vždy to je ta část menu, která není okamžitě vidět. V html eshopu tato část menu nebude načítána a bude se načítat ajaxem.

TPL menu musí fungovat nezásvisle na umístění - není možné zohledňovat kategorii nebo URL, protože se menu cachuje. Je možné používát třídy pro zvýraznění aktivní kategorie, ale pouze přes speciální zápis {{ active_menu_placeholder_class(‚active‘, category) }} - ten zajistí nahrazování třídy v cachovaném výstupu. Třída může být libovolná. Kromě kategorie je možné použít také typ stránky - například „Vypis/Slevy“

Vložení menu na místo:

<i:menu-container name="main" tag="div" lazy />

Definice menu (vždy v souboru _menu.tpl)

<i:menu name="main">
  <ul>
     {% for category in repository.category.findBy({'parent': 0}) %}
        <li class="{{ active_menu_placeholder_class('active', subCategory)}}">
            <a href="{{category.url}}">{{category.name}}</a>
            {% if not lazy and category.subcategories is not empty %}
                <ul>
                {% for subCategory in category.subcategories %}
                    <li class="{{ active_menu_placeholder_class('active', subCategory)}}">
                        <a href="{{subCategory.url}}">{{subCategory.name}}</a>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </li>
     {% endfor %}
  </ul>
</i:menu>

Pokud není uveden atribut „codes“, tak se GDPR formuláře doplní podle kontextu automaticky. Ve většině případů se bude spoléhat na automatické doplnění, protože s ním jde vzhled ovládat z administrace.