Custom loop item je v Elementore brutálna vec. Umožňuje ti pripraviť si dizajn pomocou dynamických polí a potom pekne – krásne tento dizajn používať pre články, produkty, alebo hocijaké iné CPT.
Všetko v poriadku, keď tento vlastný vizuál produktov ideš zobraziť v carouseli na homepage, alebo v custom gride. Keď však príde na zobrazenie na taxonómií produktov, tak si skončil, pretože pagination ešte nejako dostaneš, ale counting a ordering nie.
Čo to je counting a ordering?
Poznáš to zo všetkých eshopov. Counting ti počíta celkový počet produktov v danej taxonómií a na základe aktuálnej stránky, kde sa nachádzaš, ti vypíše niečo ako „Zobrazujem 13 – 24 produktov z 112“.
Ordering je ten selectbox, na ktorý keď klikneš, produkty sa ti zoradia podľa niečoho. Najčastejšie podľa ceny od najlacnejšieho. Woocommerce však natívne podporuje radenia podľa viacerých kritérií.
No a čo s tým?
Jednoducho si odkázaný na to, aby si si to dokódil sám. Hlavná vec, že tisic evra ročne Elementoru platiť to hej, ale aby implementovali tak základnú vec ako toto, to ňe!
Poďme na to
V prvom rade, keď používaš Custom loop grid element, musíš ho nechať zapnutý na články. Keď ho totiž prepneš na produkty, zmizne ti možnosť pridať vlastné query ID, čo budeme neskôr potrebovať. Dáva to zmysel? No nedáva. Ale je to tak. Takže template type necháš nastavený na články.
Prejdeš do sekcie Query. Tu si vyberieš zdroj. V prípade products archive najlepšie urobíš, keď dáš Current query, čo ti vlastne hodí produkty, príslušné danej kategórií, značke, tagu. To chceš. Pridáme si tu aj vlastné Query ID, napríklad „moja_habadura„.
No a potom nastavíme už len pagination, prípadne „Not found message„.
Kodime
Counting
Counting je jednoduchší, takže ho pridáme len ako shortcode. Vyzerá takto:
add_shortcode('product_count', function() {
global $wp_query;
if ( ! $wp_query instanceof WP_Query ) {
return '';
}
$total = $wp_query->found_posts; // celkový počet produktov
$per_page = $wp_query->get('posts_per_page'); // koľko na stránke
$paged = max( 1, get_query_var('paged') ); // aktuálna stránka
if ($total == 0) return 'Žiadne produkty';
$start = ($paged - 1) * $per_page + 1;
$end = min($start + $per_page - 1, $total);
return "Zobrazené produkty $start – $end z $total";
});
Šupneme do functions.php alebo do vlastného pluginu a potom použijeme [product_count] shortcode tam, kde ho chceme na front-ende zobraziť.
Náš snippet robí to, že sa napája na globálnu wp_query, nájde celkový počet produktov, koľko produktov má byť na stránke a získa aktuálnu stránku. Potom pomocou polojednoduchej matematiky vypočíta konečné čísla.
Pre mňa novinka, čo sa týka riadku 17 – ak použiješ normálne úvodzovky a nie apostrofy, ide o interpoláciu premennej, takže hodnoty premenných $start, $end a $total sa ti normálne vypíšu. Ak by si použil apostrofy, vypísali by sa ti $start a $end a $total len ako plain text (tak ako ich vidíš napísané s dolárom a názvom premennej, nie ich hodnota).
Vidíš, človek nikdy nevie všetko 😉
Ordering
Ordering je trošku väčší magic, lebo potrebuješ zabezpečiť formulár so selectboxom (ale teoreticky by sa to dalo urobiť aj vedľa seba, všetko by to boli len obyčajné linky – napríklad Alza to tak má…)
Woocommerce v zásade obsahuje nejaké základné možnosti radenia, založené na GET parametri orderby v query stringu. Konkrétne sú to tieto:
- menu_order: Poradie podľa poradia vo wp-admine
- popularity: Poradie podľa počtu nákupov (najviac predávané produkty sú prvé)
- rating: Poradie podľa užívateľských recenzií
- date: Poradie podľa dátumu pridania
- price: Poradie podľa ceny, od najnižšej po najvyššiu
- price-desc: Poradie podľa ceny, ale od najvyššej po najnižšiu
To znamená, že ak na akomkoľvek zozname produktov do URL ručne dopíšeš ?orderby=price, dostaneš tieto produkty zoradené od najlacnejšieho. No a presne túto woocommerce fičúru použiješ aj ty. Akurát, že nebudeš čakať od užívateľa, že si bude ručne dopisovať query string, všakže, ale dáš mu pomocou formulára spôsob ako to dosiahne.
Pozor, má to jeden háčik. Tým, že ideš použiť Custom loop grid element a nie Archive products element, musíš tieto orderby srandičky definovať aj v PHP. Bez toho sa Elementor bude tváriť, že netuší, čo je orderby, a ani nemá prečo. Toto sú veci Woocommercu, nie Elementora.
Začni teda touto srandou do functions.php:
// Custom ordering pre Elementor Custom Loop Grid
add_action( 'elementor/query/moja_habadura', function( $query ) {
if ( isset($_GET['orderby']) ) {
switch( $_GET['orderby'] ) {
case 'menu_order':
$query->set('orderby', 'menu_order title');
$query->set('order', 'ASC');
break;
case 'popularity':
// zoradenie podľa počtu predajov
$query->set('meta_key', 'total_sales');
$query->set('orderby', 'meta_value_num');
$query->set('order', 'DESC');
break;
case 'rating':
// zoradenie podľa priemerného hodnotenia
$query->set('meta_key', '_wc_average_rating');
$query->set('orderby', 'meta_value_num');
$query->set('order', 'DESC');
break;
case 'date':
$query->set('orderby', 'date');
$query->set('order', 'DESC');
break;
case 'price':
$query->set('meta_key', '_price');
$query->set('orderby', 'meta_value_num');
$query->set('order', 'ASC');
break;
case 'price-desc':
$query->set('meta_key', '_price');
$query->set('orderby', 'meta_value_num');
$query->set('order', 'DESC');
break;
default:
// prednastavené
$query->set('orderby', 'menu_order title');
$query->set('order', 'ASC');
}
}
});
Pozor, na riadku č.2 musí byť názov zhodný s tvojim Query ID, inak to nebude fungovať:
elementor/query/moja_habadura
No a ďalej už len cez switch nastavuješ, ako sa má upravovať daná query v prípade, že je niečo zadané v query stringu. Tu máš hotovo.
Ideš na front end a na žiadané miesto vložíš html formulár (ideálne cez HTML element). Ak si lenivý ako ja, tak tam hodíš aj javascript, ak si slušák, tak javascript hodíš do zvláštneho súboru (alebo cez Custom code v Elementore).
<form method="GET">
<select name="orderby" id="orderby-select">
<option value="menu_order">Prednastavené zoradenie</option>
<option value="popularity">Najpredávanejšie</option>
<option value="date">Najnovšie</option>
<option value="price">Najlacnejšie</option>
<option value="price-desc">Najdrahšie</option>
</select>
</form>
Jednoduchý formulár s jedným selectom, kde jednotlivé options majú hodnoty, ktoré sa následne premietnu do query stringu.
Ak si trošku pozorný, zaiste ti neunikne, že teraz sa po výbere zvolenej hodnoty vo formulári nestane vôbec nič. Nemáš totiž submit button.
Z toho vyplýva, že buď to potrebuješ submit button, čo je ale také old-schoolové riešenie, alebo potrebuješ nejaký obslužný javascript, ktorý na základe change listeneru spustí nejakú akciu a hodnotu, ktorú užívateľ vybral, jednoducho prepasíruje do query stringu.
Že som dobráčisko od kosti, tu máš ten javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Zober GET parameter 'orderby' z URL
const urlParams = new URLSearchParams(window.location.search);
const orderby = urlParams.get('orderby') || 'menu_order';
// Nájde select element
const select = document.querySelector('select[name="orderby"]');
if(select) select.value = orderby;
select.addEventListener('change', function() {
this.form.submit();
});
});
</script>
Keď toto urobíš, všetko bude fungovať tak, ako si predstavuješ.
Fakt bieda, že takáto základná vec nie je zakomponovaná v Elementore natívne, ale musíš si to kódiť sám…
