Skip to content

Filter Price

The <filter-price> webcomponent is used to manage filtering of products depending on their price.

Attributes

Attribute name Type Default Description
is-active boolean null If a price filter is active this should be set to true

DOM events

This webcomponent dispatches the following DOM events:

Example

In this example we render a price filter. Remember that in order for the webcomponent to work you will need filters-aggregator and filters-group.

{% set filters = ObjectApi.getFilters() %}
{% set currency = ObjectApi.getShopCurrency() %}

<filter-price>
    <div class="grid__row">
        <div class="grid__col grid__col_xs-grow">
            <div class="control">
                <div class="control__label">
                    <label class="label" for="{{ filters.priceFilter.priceFromUrlKey }}-{{ moduleInstance }}">
                        {{ translate('Price from') }}
                    </label>
                </div>

                <div class="control__content">
                    <div class="control__element">
                        <label class="input">
                            <input
                                name="{{ filters.priceFilter.priceFromUrlKey }}"
                                id="{{ filters.priceFilter.priceFromUrlKey }}-{{ moduleInstance }}"
                                type="text"
                                class="input__control"
                                value="{{ filters.priceFilter.priceFrom }}">

                            <span class="input__unit">{{ currency.symbol }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid__col grid__col_xs-grow">
            <div class="control">
                <div class="control__label">
                    <label class="label" for="{{ filters.priceFilter.priceToUrlKey }}-{{ moduleInstance }}">
                        {{ translate('Price up to') }}
                    </label>
                </div>

                <div class="control__content">
                    <div class="control__element">
                        <label class="input">
                            <input
                                name="{{ filters.priceFilter.priceToUrlKey }}"
                                id="{{ filters.priceFilter.priceToUrlKey }}-{{ moduleInstance }}"
                                type="text"
                                class="input__control"
                                value="{{ filters.priceFilter.priceTo }}">

                            <span class="input__unit">{{ currency.symbol }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</filters-price>

    <filter-price>
        <div class="grid__row">
            <div class="grid__col grid__col_xs-grow">
                <div class="control">
                    <div class="control__label">
                        <label class="label" for="10-123">
                            Price from
                        </label>
                    </div>

                    <div class="control__content">
                        <div class="control__element">
                            <label class="input">
                                <input
                                    name="10"
                                    id="10-123"
                                    type="text"
                                    class="input__control"
                                    value="0">

                                <span class="input__unit">$</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid__col grid__col_xs-grow">
                <div class="control">
                    <div class="control__label">
                        <label class="label" for="11-123">
                            Price up to
                        </label>
                    </div>

                    <div class="control__content">
                        <div class="control__element">
                            <label class="input">
                                <input
                                    name="11"
                                    id="11-123"
                                    type="text"
                                    class="input__control"
                                    value="900">

                                <span class="input__unit">$</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </filters-price>

Object Api methods reference

Object Api objects reference

DOM events reference

Webcomponents reference