##########
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.

.. csv-table:: Atributy formuláře **search-form**
    :header: "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)

.. code-block:: html+twig

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

.. code-block:: html+twig

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

.. code-block:: html+twig

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

.. code-block:: html+twig

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

.. code-block:: html+twig

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

.. code-block:: html

    <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.

.. code-block:: html+twig

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

.. csv-table:: Pole formuláře **newsletter-signup**
    :header: "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)*

.. csv-table:: Atributy formuláře **newsletter-signup**
    :header: "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
"""""""""""""""

.. code-block:: html+twig

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

.. code-block:: html

    <!-- 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í
"""""""""
.. code-block:: html+twig

    <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>

.. code-block:: html

    <!-- 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
""""""""""""

.. code-block:: html+twig

    <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>

.. code-block:: html

    <!-- 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.

.. csv-table:: Atributy formuláře **gdpr-form**
    :header: "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)

.. code-block:: html+twig

    <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:

.. code-block:: html+twig

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

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

.. code-block:: html+twig

    <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.