##############
Filtr produktů
##############

===========
Filter form
===========

.. code-block:: html+twig

    {# minimální zápis #}
    <i:filter-form name="default">
        {% for attribute in attributes %}
            <i:filter-attribute attribute="attribute">
                <a data-role="show-more">více (%n)</a>
            </i:filter-attribute>
        {% endfor %}
        <div data-role="reset">
            Je aktivní filtr.
            <a data-role="reset">zrušit filtr</a>
        </div>
        <button type="submit">Filtrovat</button>
    </i:filter-form>

.. csv-table:: Atributy **filter-form**
    :header: Atribut, Default, Povinný, "Popis"

    **name**, **ano**, --- , název
    auto-scroll, true, ---, automaticky scrollovat na výsledky (true/false)

================
Filter attribute
================

.. code-block:: html+twig

    <i:filter-form>
        {% for attribute in attributes %}
            <i:filter-attribute attribute="attribute" choice-wrap="div">
                <a data-role="show-more">více (%n)</a>
                <a data-role="show-less">méně</a>
            </i:filter-attribute>
        {% endfor %}
        <button type="submit">Filtrovat</button>
    </i:filter-form>


    Odkaz "show-more"/"show-less" se zobrazí jen pokud je potřeba a volitelná značka "%n" bude nahrazena za počet skrytých hodnot. Funkčnost rozbalování je zajištěna globálně a rozbalení je uloženo do LocalStorage.


.. csv-table:: Atributy **filter-attribute**
    :header: Atribut, Default, Povinný, "Popis"

    **attribute**, **ano**, --- , Twig object
    choice-wrap, *ne*, span,  tag pro obalení
    checkbox-class, *ne*, ---,  třídy pro input checkbox
    img-format, *ne*, 30x30,  velikost případného obrázků (stejně jako u i:img)
    img-sizes, *ne*, ---,  responzivita u případného obrázků (stejně jako u i:img)

=============
Filter values
=============
Výpis aktivních hodnot filtru s možností zrušení hodnot nebo celého filtru.

.. code-block:: html+twig

    <i:filter-values name="default">
        {% for value in values %}
            <a href="{{value.url}}">{{value.name}}</a>
        {% endfor%}
        <a href="{{resetUrl}}">zrušit filtr</a>
    </i:filter-values>

.. csv-table:: Atributy **filter-values**
    :header: "data-role",  Povinný, "Popis"

    **name**, **ano**, název objektu

==================
Filter placeholder
==================

.. code-block:: html+twig

    <i:filter-placeholder name="default" config="default" />

.. csv-table:: Atributy **filter-placeholder**
    :header: "data-role",  Povinný, "Popis"

    **name**, **ano**, název objektu
    **config**, **ano**, kód skupiny filtrů
    **hide-empty**, **ne**, nevypisovat formulář pokud nejsou žádné filtry k vypsání
    **always-collapsed**, **ne**, sbalit všechny filtry bez ohledu na nastavení v administraci

=========================
Filter placeholder values
=========================

Blok i:filter-placeholder-values není možné obalovat podmínkou na aktivní filtr! Pokud filtr není aktivní, bude vykreslen jen jako prázdný div. Pokud by ale byl skrytý nadřazenou podmínkou, tak se nemůže zobrazit dynamicky během filtrování.

.. code-block:: html+twig

    <i:filter-placeholder-values name="default" config="default" />

.. csv-table:: Atributy **filter-placeholder**
    :header: "data-role",  Povinný, "Popis"

    **name**, **ano**, název objektu
    **config**, **ano**, kód skupiny filtrů

===========================
Price Slider (staré filtry)
===========================

Cenový slider do filtru. Používá jQuery UI Slider (je potřeba zapnout v pluginech). Není potřeba nijak spouštět z javascriptu - vložením do šablony se vše samo nastaví.
Tagy označené rolí *from* a *to* jsou použity pro zobrazení aktuální ceny.

.. code-block:: html+twig

    {# minimální zápis #}
    <i:price-slider>
        <div data-role="slider"/>
        <span data-role="from"/> - <span data-role="to"/>
    </i:price-slider>

    {# viditelný input #}
    <i:price-slider>
        <div data-role="slider"/>
        <input data-role="from"/> - <input data-role="to"/>
    </i:price-slider>

    {# vlastní třídy (jakékoliv) #}
    <i:price-slider>
        <div data-role="slider"  class="slider-range" />
        <div class="range">
            <em>{%trans%}od {%endtrans%} <span class="range-from" data-role="from"/>  do <span class="range-to" data-role="to"/></em>
        </div>
    </i:price-slider>

Pokud je potřeba změnit chování slideru, lze k tomu použít standardní eventy jQuery UI (dokumentace__). Slideru nejprve přidáme vlastní třídu a v externím javascriptu změníme chování:

    __ https://api.jqueryui.com/slider/

.. code-block:: javascript

    $(document).on('slide', '.slider-range', function(event, ui) {
        alert(ui.value);
    });

Stejným způsobem lze změnit vlastnosti slideru:

.. code-block:: javascript

    $('.slider-range').slider('option', 'animate', 'fast');


======================
Dostupné třídy pro CSS
======================

-----
Flags
-----

* **filter-flag-in-stock** - skladem
* **filter-flag-new** - novinka
* **filter-flag-promo** - akce
* **filter-flag-discount** - zlevněno