Ako vo WooCommerce zobraziť naposledy prezerané produkty cez vlastný kód
Ako vývojár WooCommerce som sa stretol s problémom, že štandardná inštalácia WooCommerce nemá zabudovanú funkciu ani shortcode, ktorý by zobrazoval produkty, ktoré si zákazník naposledy prezeral. Na trhu existujú síce prémiové pluginy, ktoré túto funkcionalitu riešia, ale niekedy potrebujem riešenie, ktoré je ľahké, rýchle a nevyžaduje ďalšie pluginy.
Preto som vytvoril vlastný custom kód, ktorý využíva cookies na sledovanie prezeraných produktov a poskytuje shortcode na ich zobrazenie. Tento prístup má viaceré výhody:
- Žiadne ďalšie pluginy – menej záťaže pre web.
- Flexibilné nastavenie počtu a poradia produktov.
- Úplná kontrola nad tým, ako sa produkty zobrazujú na stránke.
Ako funguje kód
- Ukladanie prezeraných produktov do cookies
Každý produkt, ktorý používateľ otvorí, sa uloží do cookiewoocommerce_recently_viewed. Zoznam je obmedzený na posledných 15 produktov a automaticky odstraňuje najstarší produkt, ak prekročí limit. Tento mechanizmus zabezpečuje, že cookie vždy obsahuje aktuálne relevantné produkty.
Kód kontroluje, či je stránka detail produktu a až potom zapisuje ID produktu. Ak produkt už v zozname je, nepridá ho znova – produkty sa nenásobia a poradie zostáva prehľadné.
- Shortcode pre zobrazenie naposledy prezeraných produktov
Vytvoril som shortcode[moje_recently_viewed], ktorý načíta zoznam ID produktov z cookie a zobrazí ich pomocou WooCommerce[products]shortcode.
Shortcode podporuje:
- limit – počet produktov, ktoré sa zobrazia.
- columns – počet stĺpcov vo výpise produktov.
- order – zoradenie produktov (
desc= najnovšie prvé,asc= najstaršie prvé).
Poradie produktov je zachované pomocou orderby="post__in", takže zákazník vidí produkty v logickom poradí podľa toho, kedy ich naposledy prezeral.
Celý kód, ktorý môžeš vložiť do functions.php alebo vlastného pluginu
/* Uloží prezerané produkty do cookies */
function moje_wc_track_product_view() {
// Skontroluje, či je aktuálna stránka detail produktu
if ( ! is_singular( 'product' ) ) {
return; // ak nie je, funkcia sa skončí
}
global $post; // získa objekt aktuálneho produktu
// Ak cookie s naposledy prezeranými produktami neexistuje, inicializuje prázdne pole
if ( empty( $_COOKIE['woocommerce_recently_viewed'] ) ) {
$viewed_products = array();
} else {
// Ak existuje, prevedie cookie string na pole ID produktov
$viewed_products = explode( '|', wp_unslash( $_COOKIE['woocommerce_recently_viewed'] ) );
}
// Ak aktuálny produkt ešte nie je v zozname, pridá ho na koniec
if ( ! in_array( $post->ID, $viewed_products ) ) {
$viewed_products[] = $post->ID;
}
// Obmedzí počet uložených produktov na max 15, odstráni najstarší produkt, ak je viac
if ( sizeof( $viewed_products ) > 15 ) {
array_shift( $viewed_products );
}
// Uloží aktualizované pole produktov späť do cookie vo formáte "ID|ID|ID"
wc_setcookie( 'woocommerce_recently_viewed', implode( '|', $viewed_products ) );
}
// Pripojí funkciu na akciu template_redirect, aby sa spustila pred načítaním šablóny
add_action( 'template_redirect', 'moje_wc_track_product_view', 20 );
/* Shortcode pre zobrazenie naposledny prezeraných produktov */
function moje_recently_viewed_products( $atts ) {
// Definuje predvolené atribúty shortcodu a umožní ich prepísať pri vložení
$atts = shortcode_atts( array(
'limit' => 4, // počet produktov, ktoré sa zobrazia
'columns' => 4, // počet stĺpcov vo výpise produktov
'order' => 'desc', // zoradenie: 'desc' = najnovší prvý, 'asc' = najstarší prvý
), $atts, 'moje_recently_viewed' );
// Ak cookie s naposledy prezeranými produktami neexistuje, nič nezobrazí
if ( ! isset( $_COOKIE['woocommerce_recently_viewed'] ) ) {
return '';
}
// Prevedie cookie string na pole a očistí ho
$viewed_products = explode( '|', $_COOKIE['woocommerce_recently_viewed'] );
$viewed_products = array_filter( array_map( 'absint', $viewed_products ) );
// absint zabezpečí, že každý prvok je celé číslo (ID produktu)
// array_filter odstráni prázdne hodnoty
// Ak je pole prázdne, nič nezobrazí
if ( empty( $viewed_products ) ) {
return '';
}
// Zoradí produkty podľa atribútu 'order'
if ( strtolower($atts['order']) === 'desc' ) {
$viewed_products = array_reverse( $viewed_products ); // najnovší produkt prvý
}
// Ak 'asc', ponechá pôvodné poradie (najstarší prvý)
// Obmedzí počet produktov na hodnotu 'limit'
$viewed_products = array_slice( $viewed_products, 0, $atts['limit'] );
// Prevod ID produktov na string oddelený čiarkami pre WooCommerce shortcode
$ids = implode( ',', $viewed_products );
// Vykoná WooCommerce shortcode [products] s ID produktov a zachovaním poradia cez orderby="post__in"
return do_shortcode('[products ids="' . $ids . '" limit="' . $atts['limit'] . '" columns="' . $atts['columns'] . '" orderby="post__in"]');
}
// Registruje shortcode [moje_recently_viewed], ktorý volá vyššie definovanú funkciu
add_shortcode( 'moje_recently_viewed', 'moje_recently_viewed_products' );Výhody vlastného riešenia
- Rýchlosť a kontrola – nepotrebujete ďalšie pluginy, ktoré by mohli spomaliť web.
- Flexibilita – shortcode sa dá použiť kdekoľvek: na homepage, v sidebare, alebo na stránke produktu.
- Súlad s GDPR – využívame cookies, takže je možné doplniť informáciu o spracovaní údajov.
- SEO friendly – produkty sú zobrazené cez WooCommerce
[products]shortcode, ktorý je plne indexovateľný Googlebotom. Rýchlosť načítania stránky zostáva vysoká, čo Rank Math ocení.
// Vloženie naposledy prezeraných produktov na homepage
echo do_shortcode('[moje_recently_viewed limit="4" columns="4" order="desc"]');Praktické použitie
Týmto spôsobom môžeš elegantne a efektívne zvýšiť interaktivitu a predajnosť WooCommerce e-shopu bez nutnosti platených pluginov.
