Filtr produktů

Filter form

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

Atributy filter-form

Atribut	Default	Povinný	Popis
name	ano	—	název
auto-scroll	true	—	automaticky scrollovat na výsledky (true/false)

Filter attribute

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

Atributy filter-attribute

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.

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

Atributy filter-values

data-role	Povinný	Popis
name	ano	název objektu

Filter placeholder

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

Atributy filter-placeholder

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

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

Atributy filter-placeholder

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.

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

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

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

$('.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