Фильтры и сортировка категории
Фильтр в категориях возможен по параметрам/свойствам/наличию/цене.
Так же возможно менять порядок сортировки товара и менять кол-во товара на страницу.
Передачу параметров фильтрации и сортировки можно проводить запросом на адрес категории.
Фильтр по параметрам
Формат:
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>
Важно! При наличии нескольких видов сортировки рекомендуется объединять их в одну форму (кроме поиска внутри категории).