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.
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>
{# autocomplete #}
<i:search-form autocomplete>
<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>
Přihlášení k newsleteru¶
Jednoduchý formulář pro přihlášení k newsletteru.
data-role |
Povinný |
Popis |
---|---|---|
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) |
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.
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.