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.