Если вам необходимо создать собственную форму сортировки товаров, то это можно сделать при помощи передачи GET переменных. Ниже найдете инструкцию по сохранению выбранной сортировки в COOKIES, а также пример по реализации сортировки. Для быстрого создания сортировки вы можете использовать «Функциональное меню» - «Сортировка товаров». В меню будет вставлена поисковая форма, а также базовые поля для сортировки.
Доступные следующие GET параметры для собственной сортировки:
«order_by»:
- 0 - по id товара
- 1 - по дате добавления товара
- 2 - по цене товара
- 4 - по наименованию товара
- 5 - по приоритету товара
«sort_by»:
- 0 - По убыванию (DESC)
- 1 - По возрастанию (ASC)
«sort_instock_priority»: (сортировка по приоритету, товары в наличии выше чем товары не в наличии)
- 0 - не учитывать параметр
- 1 - сначала товары в наличии и под заказ, потом те, которых нет в наличии. Далее учитываются параметры сортировки, указанные выше.
- 2 - сначала товары которых нет в наличии.
«price_from» - цена от
«price_to» - цена до
«producer» - производитель (id или наименование производителя)
«collection» - коллекция (id или наименование коллекции)
«search» - поисковый запрос
«smart_search» - данные поискового запроса из поискового фильтра
Кроме того значения, которые учитываются если указано не пустое значение (Например «1»):
«shop_sale» - акционные,
«shop_new_goods» - новинки,
«shop_bestsellers» - хиты продаж,
«shop_discount» - скидка,
«shop_reduced_price» - Цена снижена,
«order_by_param» - дополнительный параметр с произвольным значением, для создания собственного списка сортировка по названию или значению.
При обнаружении GET переменной «sort_by» в адресе открытой страницы, данные сортировки будут установлены соответственно этим значениям. Если открыта страница со списком товаров, то значения будут заполнены из ссылки элемента «.hotengine-pagination-current». Кроме того, при открытии страницы с сортировкой будут созданы COOKIE для запоминания выбранных пользователем параметров. Скрипт, выполняющий данную функцию, который также устанавливается при создании фукнционального меню сортировки, расположен по адресу
/templates/scripts/hotengine-script-sort-shop-products.js.
Комбинированная сортировка товаров (функциональное меню).
Комбинированная версия сортировки позволяет объединять несколько критериев, например, сортировку по цене, новизне или акциям. Это удобно, если вы хотите одновременно учитывать несколько параметров при отображении товаров.
Пример комбинированного меню сортировки:
- Сортировка по цене: можно выбрать возрастание или убывание.
- Дополнительные параметры: новинки, акции, товары со скидкой, сниженные цены, хиты продаж.
- Флаг «В наличии в начале»: при активации сначала будут показаны товары, которые есть в наличии.
Для использования данной сортировки создайте Функциональное меню «Сортировка товаров Combo» в разделе «Мои Блоки/Меню».
Рассмотрим пример по созданию сортировки с собственными значениями.
Это можно сделать при помощи дополнительного параметра «order_by_param», при выборе которого будут изменяться значения полей «order_by», «sort_by» и других.
Установим одно поле (#order_by_param) с выбором вариантов
, а также оставим количество отображаемых товаров.
Создайте "Блок/Меню", расположение "вверху".
Имя Блока/Меню: hotengine_sort_products
Заголовок Блока/Меню: hotengine_sort_products
Положение Блока/Меню: вверху
Показывать Блок/Меню на страницах: везде
Введите символы, при обнаружении которых отображать Блок/Меню: (Без пробелов)
/pers_shop/
/producer/
/collection/
/shop/
Введите символы, при обнаружении которых не отображать Блок/Меню: (Без пробелов)
.htm
Текст меню:
<form id="hotengine-sort-products-generated" name="hotengine-sort-products-generated" method="get" action="">
<span>
<label>
<select name="order_by_param" id="order_by_param">
<option value="none">Сортировать</option>
<option value="lowtohight">От дешевых к дорогим</option>
<option value="highttolow">От дорогих к дешевым</option>
<option value="new">Новинки</option>
<option value="sales">Акционные</option>
<option value="date">По Дате</option>
</select>
</label>
<div class="hidden">
<select name="shop_new_goods" id="shop_new_goods"><option value=""><option value="1"></select>
<select name="shop_sale" id="shop_sale"><option value=""><option value="1"></select>
<label>
<select name="sort_by" id="sort_by">
<option value="ASC">Сортировать:</option>
<option value="ASC">По возрастанию</option>
<option value="DESC">По убыванию</option>
</select>
</label>
<label>
<select name="order_by" id="order_by">
<option value="5">Сортировать:</option>
<option value="0">По ID товара</option>
<option value="4">По Наименованию</option>
<option value="1">По Дате</option>
<option value="2">По Цене</option>
</select>
</label>
</div>
<label>
<select name="NUM_ONPAGE" id="NUM_ONPAGE" onchange="this.form.submit()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
</label>
<input class="smart_search" name="smart_search" type="hidden" value="">
<input class="search" name="search" type="hidden" value="">
</span>
</form>
<script>
$(function() {
$(document).on("change", "#order_by_param", function() {
const $sortForm = $("#hotengine-sort-products-generated");
const $orderBySelect = $sortForm.find(`select[name="order_by"]`);
const $sortBySelect = $sortForm.find(`select[name="sort_by"]`);
const $shopNewGoodsSelect = $sortForm.find(`select[name="shop_new_goods"]`);
const $shopSaleSelect = $sortForm.find(`select[name="shop_sale"]`);
const selectedValue = $(this).val();
let orderByValue = "5";
let sortByValue = "ASC";
let shopNewGoodsValue = "";
let shopSaleValue = "";
switch (selectedValue) {
case "lowtohight":
orderByValue = "2";
sortByValue = "ASC";
break;
case "highttolow":
orderByValue = "2";
sortByValue = "DESC";
break;
case "date":
orderByValue = "1";
sortByValue = "DESC";
break;
case "sales":
orderByValue = "1";
sortByValue = "DESC";
shopSaleValue = "1";
break;
case "new":
orderByValue = "1";
sortByValue = "DESC";
shopNewGoodsValue = "1";
break;
case "none":
orderByValue = "5";
sortByValue = "ASC";
break;
}
$orderBySelect.val(orderByValue).prop("selected", true);
$sortBySelect.val(sortByValue).prop("selected", true);
$shopNewGoodsSelect.val(shopNewGoodsValue).prop("selected", true);
$shopSaleSelect.val(shopSaleValue).prop("selected", true);
$(this).closest("form").submit();
});
});
</script>
<script type="text/javascript" src="/templates/scripts/hotengine-script-sort-shop-products.js"></script>
CSS стиль для сортировка (добавить в редакторе дизайна в CSS стили):
.menu_position_top_000000 #menu_c .headm{ display:none; }
.menu_position_top_000000 #menu_c { border: none; background: none; text-align: right;}
.menu_position_top_000000 #menu_c select {
background: transparent;
padding: 5px 8px 5px 5px;
font-size: 12px;
line-height: 1;
border-radius: 2px;
height: 24px;
-webkit-appearance: none;
overflow: hidden;
background: url(/templates/styles/menu_arrow/arrow-down.svg) no-repeat 95%; background-size: 16px;
}
.menu_position_top_000000 #menu_c select[name="NUM_ONPAGE"] { background:none;}
.menu_position_top_000000 #menu_c span:before{ content:"Сортировать:"; display:inline-block; padding: 5px; font-size: 12px; }
@-moz-document url-prefix(){
.menu_position_top_000000 #menu_c select {
padding:0px!important;
background:none!important;
}
}
Где 000000 нужно заменить на ID созданного меню с кодом сортировки.
При изменении поля «order_by_param» будут изменены значения сортировки и выполнена отправка формы. В Форме добавлены поля сортировки, в том числе «Новинки» и «Акция». Поля скрыты, так как визуально будет использоваться только отдельный список «order_by_param» и количество отображаемых товаров. После отправки формы, Значения будут сохранены в COOKIE.