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ů

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