Top.Mail.Ru

Фильтры и сортировка категории

Фильтр в категориях возможен по параметрам/свойствам/наличию/цене.

Так же возможно менять порядок сортировки товара и менять кол-во товара на страницу.


Передачу параметров фильтрации и сортировки можно проводить запросом на адрес категории.

 

Фильтр по параметрам

Формат:

characteristics[]=id_значения_параметра

Пример запроса:

?characteristics[]=1529938&characteristics[]=1529937

Где 1529938 и 1529937 это ID значений параметра.

Пример на liquid:

<script>
    $(function () {
        $(".characteristic").change(function () {
            $("form#options").submit();
        });
    });
</script>
<form id="options" action="{{collection.url}}" method="get">
    <table>
        {% for property in collection.properties %}
        <tr>
            <td class="accent">
                <b>{{property.title}} : </b>
            </td>
            <td>
                <select name="characteristics[]" class="characteristic">
                    <option value="">выберите</option>
                    {% for characteristic in property.characteristics %}
                    <option value="{{characteristic.id}}" {% if characteristic.current? %} selected="selected"
                        {% endif %}>{{characteristic.title}} ({{characteristic.products_count}})</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        {% endfor%}
    </table>
</form>


Так же возможно передавать мин. и макс. значения параметра для фильтрации по диапазону

Если параметр числовой- фильтруется как числа. Если не числовой- как строки.

Формат:

мин.: properties_gt[id_параметра]=значение

макс.: properties_lt[id_параметра]=значение

Пример запроса:

?properties_gt[502084]=54&properties_lt[502084]=219

Где 502084 это ID параметра, а 54 и 219 макс. и мин значения.

 

Фильтр по свойствам.

Формат:

options[id_свойства][]=id_значения_свойства

Пример запроса:

?options[236043][]=2355528

Где 236043 это ID свойства, а 2355528 - id значения свойства.

Пример на liquid:

<script>
    $(function () {
        $(".characteristic").change(function () {
            $("form#options").submit();
        });
    });
</script>
<form id="options" action="{{collection.url}}" method="get">
    <table>
        {% for option in collection.options %}
        <tr>
            <td class="accent">
                <b>{{option.title}} : </b>
            </td>
            <td>
                <select name="options[{{option.id}}][]" class="characteristic">
                    <option value="">выберите</option>
                    {% for value in option.values %}
                    <option value="{{value.id}}" {% if value.selected %} selected="selected" {% endif %}>{{value.title}}
                        ({{value.products_count}})</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        {% endfor%}
    </table>
</form>

 

Фильтр по наличию

Формат:

only_available=true

Вывести только товары в наличии

Пример запроса:

?only_available=true

Пример на liquid:

<form action="{{collection.url}}" method="get" id="options">

    <input type="checkbox" name="only_available" style="margin-right: 5px;" value="true"
        {% if only_available == true %}checked="checked" {% endif %} onclick="$('#options').submit();" /><label
        for="only_available">Только в наличии</label>
</form>

Фильтр по цене

Формат:

мин.: price_min=значение

макс.: price_max=значение

Пример запроса:

?price_min=45000&price_max=65000

Где 45000 и 65000 это минимальная и максимальная цена товара.

Пример на liquid:

<form id="options" action="{{collection.url}}" method="get">
    <h2>Цена</h2>

    <div class="price-filter-wrap">
        <div class="price-filter">
            От <input type="text" class="txt" id="minCost"
                value="{% if price_min %}{{price_min}}{% else %}{{ collection.products_price_min | round:0 }}{% endif %}" />
            до
            <input type="text" class="txt" id="maxCost"
                value="{% if price_max %}{{price_max}}{% else %}{{ collection.products_price_max | round:0 }}{% endif %}" />
            р.
        </div>
        {% if price_min %}<input type="hidden" name="price_min" value="{{price_min}}" />{% endif %}
        {% if price_max %}<input type="hidden" name="price_max" value="{{price_max}}" />{% endif %}
        <input type="submit" class="button" name="" value="Применить" />
    </div>

    <script type="text/javascript">
        $('#minCost').focus(function () {
            if ($(this).attr('name') != 'price_min') {
                $('input[name="price_min"]').remove();
                $(this).attr('name', 'price_min');
            }
        });
        $('#maxCost').focus(function () {
            if ($(this).attr('name') != 'price_max') {
                $('input[name="price_max"]').remove();
                $(this).attr('name', 'price_max');
            }
        });
    </script>
</form>

Сортировка

Формат:

order=значение

Возможные значения:

price: По возрастанию цены

descending_price: По убыванию цены

title: По алфавиту А-Я

descending_title: По алфавиту Я-А

age: По дате добавления новые-старые

descending_age: По дате добавления старые-новые

discount: По размеру скидки. От меньшей к большей. Считается как процентное отношение новой цены к старой.

descending_discount: По размеру скидки. От большей к меньшей. Считается как процентное отношение новой цены к старой.

sort_weight и descending_sort_weight: По весовому коэффициенту.

popularity и descending_popularity: По популярности.

Пример запроса:

?order=price

Пример на liquid:

<script type="text/javascript">
    $(function () {
        $(".options").change(function () {
            this.form.submit();
        });
</script>

<form action="{{collection.url}}" method="get" id="options">
    <div class="podbor_par_title">Сортировать по:<br />
        <select name="order" class="options select4">
            {{ "" | select_option: order, "" }}
            {{ "price" | select_option: order, "по возрастанию цены" }}
            {{ "descending_price" | select_option: order, "по убыванию цены" }}
            {{ "title" | select_option: order, "Алфавиту А-Я" }}
            {{ "descending_title" | select_option: order, "Алфавиту Я-А" }}
            {{ "age" | select_option: order, "Дате добавления Новые-Старые" }}
            {{ "descending_age" | select_option: order, "Дате добавления Старые-Новые" }}
        </select>
    </div>
</form>

Кол-во товара на странице

Формат:

page_size=значение

Пример запроса:

?page_size=40

Пример на liquid:

<script type="text/javascript">
    $(function () {
        $(".options").change(function () {
            this.form.submit();
        });
</script>

<form action="{{collection.url}}" method="get" id="options">
    <select name="page_size" id="page_size" onchange="$('#sortForm').submit();" class="params" style="">
        {{ "24" | select_option: page_size, "24 товара" }}
        {{ "48" | select_option: page_size, "48 товара" }}
        {{ "72" | select_option: page_size, "72 товара" }}
    </select>
</form>

Поиск в категории

Формат:

q=значение

Пример запроса:

?q=Картофель

Пример на liquid:

<script>
    changeSearch();
    $('.search_check').change(function () {
        changeSearch();
    });

    function changeSearch() {
        if ($('.search_check').is(':checked')) {
            $('form.searchform').attr('action', '{{collection.url}}');
        } else {
            $('form.searchform').attr('action', '{{search_url}}');
        }
    }
</script>

<form action="{{search_url}}" method="get" class="searchform">
    {% if language.not_default? %} <input type="hidden" name="lang" value="{{ language.locale }}"> {% endif %}
    <fieldset>
        <input type="text" name="q" class="txt"
            value="{% if search.query == nil %}Поиск{% else %}{{search.query | escape}} {% endif %}"
            onfocus="if(this.value=='Поиск'){this.value='{{search.query | escape}}';}"
            onblur="if(this.value==''){this.value='';}" />
        <input type="submit" class="btn" value="" />
        {% if template == 'collection' and collection.subcollections.size == 0 %}
        <input type="checkbox" class="checkbox search_check" value=""
            {% if search.performed? and template == 'collection' %}checked="checked" {% endif %}
            id="search-in-col" /><label for="search-in-col">В текущей категории</label>
        {% endif %}
    </fieldset>
</form>

 

Важно! При наличии нескольких видов сортировки рекомендуется объединять их в одну форму (кроме поиска внутри категории).

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
CAPTCHAОбновить изображение
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Недавно просмотренные статьи