Jeśli chcesz utworzyć własny formularz sortowania produktów, możesz to zrobić, przekazując zmienne GET. Poniżej znajdziesz instrukcję zapisywania wybranego sortowania w COOKIES, a także przykład implementacji sortowania. Aby szybko utworzyć sortowanie, możesz skorzystać z «Menu funkcjonalnego» - «Sortowanie produktów ". Do menu zostanie wstawiony formularz wyszukiwania, a także podstawowe pola do sortowania.
Do sortowania niestandardowego dostępne są następujące parametry GET:
«order_by»:
- 0 - według identyfikatora produktu
- 1 - według daty dodania produktu
- 2 - cena przedmiotu
- 4 - według nazwy produktu
- 5 - według priorytetu produktu
«sort_by»:
- 0 — Malejąco (DESC)
- 1 — Rosnąco (ASC)
«sort_instock_priority»: (posortowane według priorytetu, pozycje w magazynie są wyższe niż pozycje niedostępne)
- 0 - ignoruj parametr
- 1 - najpierw towary w magazynie i na zamówienie, potem te, których nie ma w magazynie. Następnie brane są pod uwagę opcje sortowania określone powyżej.
- 2 - produkty, które są niedostępne jako pierwsze.
"cena_od" - cena od
"cena_do" - cena do
"producent" - producent (id lub nazwa producenta)
"kolekcja" - kolekcja (ID lub nazwa kolekcji)
"szukaj" - zapytanie wyszukiwania
"smart_search" - dane zapytania wyszukiwania z filtra wyszukiwania
Ponadto wartości, które są brane pod uwagę, jeśli określono wartość niepustą (na przykład «1»):
"shop_sale" - promocyjny,
"shop_new_goods" - nowe pozycje,
"shop_bestsellers" - bestsellery,
"shop_discount" - rabat,
"shop_reduced_price" - Obniżona cena,
"order_by_param" - dodatkowy parametr o dowolnej wartości do stworzenia własnej listy sortującej według nazwy lub wartości.
Gdy GET znajdzie zmienną «sort_by» w adresie otwartej strony, dane sortowania zostaną odpowiednio ustawione. Jeśli strona z listą produktów jest otwarta, wówczas wartości zostaną uzupełnione z linku elementu «.hotengine-pagination-current». Ponadto po otwarciu posortowanej strony zostaną utworzone pliki cookie zapamiętujące opcje wybrane przez użytkownika. Skrypt realizujący tę funkcję, który jest również instalowany podczas tworzenia funkcjonalnego menu sortowania, znajduje się w
/templates/scripts/hotengine -script-sort-shop-products.js.
Połączone sortowanie produktów (menu funkcjonalne).
Połączona wersja sortowania pozwala na łączenie kilku kryteriów, takich jak sortowanie według ceny, nowości lub promocji. Jest to wygodne, jeśli chcesz jednocześnie uwzględniać kilka parametrów przy wyświetlaniu produktów.
Przykład połączonego menu sortowania:
- Sortowanie według ceny: można wybrać rosnąco lub malejąco.
- Dodatkowe parametry: nowości, promocje, produkty ze zniżką, obniżone ceny, bestsellery.
- Flaga "Dostępne najpierw": po aktywacji najpierw wyświetlane są produkty dostępne w magazynie.
Aby korzystać z tego sortowania, utwórz funkcjonalne menu «Sortowanie produktów Combo» w sekcji «Moje Bloki/Menu».
Spójrz na przykład tworzenia sortowania z własnymi wartościami.
Można to zrobić za pomocą dodatkowego parametru «order_by_param», którego wybranie spowoduje zmianę wartości pól «order_by», «sort_by» i innych.
Ustawmy jedno pole (#order_by_param) z wyborem opcji
i pozostaw liczbę wyświetlanych produktów.
Utwórz «Blok/Menu», lokalizacja «na górze».
Nazwa bloku/menu: hotengine_sort_products
Nagłówek/menu bloku: hotengine_sort_products
Pozycja bloku/menu: Góra
Pokaż blok/menu na stronach: wszędzie
Wprowadź znaki, po wykryciu których wyświetli się blok/menu: (bez spacji)
/pers_shop/
/producer/
/collection/
/shop/
Wprowadź znaki, które, jeśli zostaną znalezione, nie wyświetlają bloku/menu: (bez spacji)
.htm
Tekst menu:
<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">Sortować</option>
<option value="lowtohight">Od tanich do drogich</option>
<option value="highttolow">Od drogiego do taniego</option>
<option value="new">Nowy</option>
<option value="sales">Promocyjny</option>
<option value="date">Według daty</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">Sortować:</option>
<option value="ASC">Rosnąco</option>
<option value="DESC">Malejąco</option>
</select>
</label>
<label>
<select name="order_by" id="order_by">
<option value="5">Sortować:</option>
<option value="0">Według ID produktu</option>
<option value="4">Nazwa</option>
<option value="1">Według daty</option>
<option value="2">Według ceny</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 styl do sortowania (dodaj w edytorze projektów do stylów 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:"Sortować:"; 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;
}
}
Gdzie 000000 należy zastąpić identyfikatorem utworzonego menu z kodem rozliczeniowym.
Zmiana pola «order_by_param» spowoduje zmianę wartości sortowania i przesłanie formularza. Do Formularza dodano pola sortowania, w tym «Nowość» i «Promocja». Pola są ukryte, ponieważ wizualnie używana będzie tylko osobna lista «order_by_param» oraz liczba wyświetlanych produktów. Po przesłaniu formularza Wartości zostaną zapisane w PLIKU COOKIE.