Если вам необходимо создать собственную форму сортировки товаров, то это можно сделать при помощи передачи 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(){
if($(this).val()=="lowtohight"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("2").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("ASC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true);
} else if($(this).val()=="highttolow"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("2").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true);
} else if($(this).val()=="date"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true);
} else if($(this).val()=="sales"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("1").prop('selected',true);
} else if($(this).val()=="new"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("1").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true);
} else if($(this).val()=="none"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("5").prop('selected',true);
$('#hotengine-sort-products-generated select[name="sort_by"]').val("ASC").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true);
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").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.