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(){
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 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.