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.
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 = "";$(`.hotengine-marking[data-hotengine-marking-type="blog_catalog_page"]`);
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;
}$(`.hotengine-marking[data-hotengine-marking-type="blog_catalog_page"]`);
$orderBySelect.val(orderByValue).prop("selected", true);
$sortBySelect.val(sortByValue).prop("selected", true);
$shopNewGoodsSelect.val(shopNewGoodsValue).prop("selected", true);
$shopSaleSelect.val(shopSaleValue).prop("selected", true);$(`.hotengine-marking[data-hotengine-marking-type="blog_catalog_page"]`);
$(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.