Если вам необходимо создать собственную форму сортировки товаров, то это можно сделать при помощи передачи 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.
Рассмотрим пример по созданию сортировки с собственными значениями.
Это можно сделать при помощи дополнительного параметра «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.