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č
{# 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>

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>

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.