If you need to create your own product sorting form, you can do this by passing GET variables. Below you will find instructions on how to save the selected sorting in COOKIES, as well as an example on how to implement sorting. To quickly create sorting you can use a «Functional Menu» - «Sorting goods». A search form will be inserted into the menu, as well as basic sorting fields.
The following GET parameters are available for custom sorting:
«order_by»:
- 0 - by product id
- 1 - by the date the product was added
- 2 - by product price
- 4 - by product name
- 5 - by product priority
«sort_by»:
- 0 - Descending (DESC)
- 1 - Ascending (ASC)
«sort_instock_priority»: (sorted by priority, goods in stock are higher than goods out of stock)
- 0 - ignore parameter
- 1 - first, goods are in stock and on order, then those that are not in stock. Further, the sorting parameters specified above are taken into account.
- 2 - initially out of stock.
«Price_from» - price from
«Price_to» - price up to
«Producer» - manufacturer (id or name of the manufacturer)
«Collection» - collection (id or collection name)
«Search» - search query
«Smart_search» - search query data from the search filter
In addition, the values that are taken into account if a non-empty value is specified (for example, «1»):
«Shop_sale» - promotional,
«Shop_new_goods» - new items,
«Shop_bestsellers» - bestsellers,
«Shop_discount» - discount,
«Shop_reduced_price» - Reduced price,
«Order_by_param» - an additional parameter with an arbitrary value, for creating your own list, sorting by name or value.
When a GET variable «sort_by»is found in the address of the open page, the sorting data will be set accordingly to these values. If a page with a list of products is opened, the values will be filled from the link of the «.hotengine-pagination-current» element. In addition, upon opening a sorted page, COOKIEs will be generated to remember the user-selected options. The script that performs this function, which is also installed when creating the functional sorting menu, is located at
/templates/scripts/hotengine-script-sort-shop-products.js.
Combined product sorting (functional menu).
The combined sorting version allows you to combine multiple criteria, such as sorting by price, new arrivals, or promotions. This is convenient if you want to consider several parameters simultaneously when displaying products.
Example of a combined sorting menu:
- Price sorting: you can choose ascending or descending.
- Additional parameters: new arrivals, sales, discounted items, reduced prices, bestsellers.
- "In stock first" flag: when enabled, products available in stock are shown first.
To use this sorting, create the Functional Menu «Combo Product Sorting» in the «My Blocks/Menus» section.
Consider an example of creating a sort with your own values.
This can be done using the additional parameter «order_by_param», when selected, the values of the fields «order_by», «sort_by» and others will be changed.
Set one field (#order_by_param) with a choice of options
, and also leave the number of products displayed.
Create "Block/Menu", location "at the top".
Block Name/Menu: hotengine_sort_products
Block Header/Menu: hotengine_sort_products
Block Position/Menu: Top
Show Block/Menu on pages: everywhere
Enter characters to display Block/Menu when found: (No spaces)
/pers_shop/
/producer/
/collection/
/shop/
Enter characters to not display Block / Menu when found: (No spaces)
.htm
Menu text:
<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">Sort</option>
<option value="lowtohight">Cheap to expensive</option>
<option value="highttolow">From expensive to cheap</option>
<option value="new">New</option>
<option value="sales">Promotional</option>
<option value="date">By 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">Sort:</option>
<option value="ASC">Ascending</option>
<option value="DESC">Descending</option>
</select>
</label>
<label>
<select name="order_by" id="order_by">
<option value="5">Sort:</option>
<option value="0">By item ID</option>
<option value="4">By Name</option>
<option value="1">By date</option>
<option value="2">By price</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 style for sorting (add CSS styles in the design editor):
.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:"Sort:"; 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;
}
}
Where 000000 needs to be replaced with the ID of the created menu with the sorting code.
Changing the «order_by_param» field will change the sort values and submit the form. Sorting fields have been added to the Form, including «New items» и «Promotion». The fields are hidden, since only a separate list «order_by_param» and the number of displayed products will be used visually. After submitting the form, the Values will be saved in a COOKIE.