Filtr produktů

Filter container (v přípravě)

{# minimální zápis #}
<i:filter-container>
    {% for parameter in parameters %}
        <h4>{{parameter.nazev}}</h4>
        <div data-parameter="parameter" />
    {% endfor %}
    <button type="submit">Filtrovat</button>
</i:filter-container>

Filter value (v přípravě)

<i:filter-value name="checkbox">
    <label><input type="checkbox"> {{value}}</label>
</i:filter-values>

<i:filter-value name="checkboxStrong">
    <label>
        <input type="checkbox">
        {% if active %}<strong>{{value}}</strong>
        {% else %}{{value}}{% endif %}
    </label>
</i:filter-value>

Price Slider

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');