Külastaja siseneb poodi, sirvib viit toodet, sulgeb vahelehe ja unustab minuti pärast saidi. See on tuttav pilt igale WooCommerce'i omanikule. „Hiljuti vaadatud" plokk lahendab selle probleemi: üks klikk tuttaval kaardil toob külastaja tagasi müügilehtrisse.

WooCommerce kirjutab vaikimisi vaadatud toodete ID-d woocommerce_recently_viewed küpsisesse. Need andmed on juba sinu poe serveris olemas, eraldi jälgimispluginat pole vaja. Jääb üle vaid küpsisest lugeda ja tooted kuvada. Allpool on valmis lühikood, mis teeb seda 30 rea kaasaegse PHP-ga.

💡 Kiire ülevaade:

• Mõista, kuidas WooCommerce salvestab vaatamisi küpsisesse, üks lühike teoorialõik
• Kopeeri [recently_viewed_products] lühikood alamteema functions.php faili või Code Snippets'i
• Paiguta plokk ostukorvi lehele, toote külgribale või tühja otsingutulemuse järele ja too külastajad tagasi

Kuidas WooCommerce salvestab vaatamisajalugu

Kui külastaja avab tootelehe, lisab WooCommerce vaikselt selle toote ID woocommerce_recently_viewed küpsisesse. Vorming: string, kus eraldajaks on |, näiteks 123|456|789. Vanim kirje on vasakul, uusim paremal. Küpsis on seansipõhine: see püsib kuni brauseri sulgemiseni.

Me ei pea ise vaatamiste jälgimist kirjutama. WooCommerce juba kogub neid andmeid. Lühikoodi ülesanne: lugeda string, tükeldada see ID-deks, filtreerida välja ainult olemasolevad ja avaldatud tooted ning edastada need sisseehitatud [products] mehhanismile.

See lähenemine annab natiivse WooCommerce'i märgendi: responsiivne ruudustik, laoseisu ja hinna käsitlus, „Lisa ostukorvi" nupp, kõik, mida standardne [products] lühikood suudab, ilma kuvamismalli uuesti realiseerimata.

Valmis kood: [recently_viewed_products] lühikood

Lisa see kood alamteema functions.php faili või Code Snippets pluginaga. See registreerib [recently_viewed_products] lühikoodi kahe parameetriga: per_page ja columns.

1
/**
2
 * Shortcode: [recently_viewed_products per_page="5" columns="4"]
3
 *
4
 * Displays products recently viewed via the native WooCommerce cookie.
5
 * Uses the built-in [products] shortcode for rendering — no custom WP_Query.
6
 */
7
add_shortcode( 'recently_viewed_products', 'sd_recently_viewed_products' );
8
 
9
function sd_recently_viewed_products( $atts ) {
10
    $atts = shortcode_atts( array(
11
        'per_page' => 5,
12
        'columns'  => 4,
13
    ), $atts );
14
 
15
    // Read the WooCommerce cookie
16
    $cookie = ! empty( $_COOKIE['woocommerce_recently_viewed'] )
17
        ? wp_unslash( $_COOKIE['woocommerce_recently_viewed'] )
18
        : '';
19
 
20
    if ( empty( $cookie ) ) {
21
        return '<p>' . esc_html__( 'You have not viewed any products yet.', 'textdomain' ) . '</p>';
22
    }
23
 
24
    // Parse and sanitize product IDs
25
    $viewed_ids = array_filter( array_map( 'absint', explode( '|', $cookie ) ) );
26
 
27
    if ( empty( $viewed_ids ) ) {
28
        return '';
29
    }
30
 
31
    // Keep only the N most recent items (oldest first in cookie, so slice from start)
32
    $viewed_ids = array_slice( $viewed_ids, 0, (int) $atts['per_page'] );
33
 
34
    $ids_string = implode( ',', $viewed_ids );
35
 
36
    return '<h3>' . esc_html__( 'Recently Viewed Products', 'textdomain' ) . '</h3>'
37
        . do_shortcode(
38
            "[products ids=\"$ids_string\" columns=\"{$atts['columns']}\" orderby=\"post__in\"]"
39
        );
40
}

Kuhu kood sisestada

**Alamteema **functions.php, parim valik. Kood säilib peateema uuendustel ja on versioonihalduses koos ülejäänud saidi kohandustega.

Code Snippets plugin, kui alamteemat pole. Paigalda Code Snippets WordPress.org-ist kataloogist, loo uus jupp, kleebi kood ja aktiveeri. Töötab iga teemaga.

Ära sisesta koodi peateema functions.php faili: kaotad selle esimesel uuendusel.

Rea-realt selgitus

• shortcode_atts() ühendab kasutaja parameetrid vaikeväärtustega, standardne WordPressi funktsioon lühikoodi atribuutide töötlemiseks. Erinevalt aegunud extract()-ist ei loo see massiivist muutujaid ega reosta skoopi.
• wp_unslash() eemaldab küpsise väärtusest paomärgid, standardpraktika superglobaalide lugemisel WordPressis.
• explode('|', ...) tükeldab stringi 123|456|789 string-ID-de massiiviks.
• array_map('absint', ...) muudab iga ID mittenegatiivseks täisarvuks, kaitse küpsises leiduva prügi vastu.
• array_filter() viskab välja nullid ja tühjad väärtused: tooted, mida andmebaasis enam ei eksisteeri, välistatakse ID tasemel.
• array_slice() jätab alles ainult N kõige värskemat vaatamist. Küpsis kirjutab vanad ID-d esimesena, värsked viimasena, seega kärbime massiivi algusest.
• implode(',', ...) koostab stringi 123,456,789 sisseehitatud lühikoodi ids parameetri jaoks.
• do_shortcode('[products ids="..."]') käivitab natiivse WooCommerce'i mehhanismi: pisipildid, pealkirjad, hinnad, „Lisa ostukorvi" nupp, kõik standardse teema märgendis. Laos mitteolevaid tooteid automaatselt ei kuvata.

Pole vaja käsitsi <ul><li><a>... kokku panna. Sisseehitatud [products] juba oskab seda kõike teha ja seda hooldab WooCommerce'i meeskond.

Kuidas lühikoodi kasutada: parameetrid ja näited

Paiguta [recently_viewed_products] ükskõik kuhu, kus WordPress lühikoode töötleb: leht, postitus, tekstividin, lühikoodiplokk redaktoris.

Näited:

• [recently_viewed_products per_page="3" columns="3"], kompaktne kolme toote rida külgriba jaoks
• [recently_viewed_products per_page="8" columns="4"], kaks nelja toote rida ostukorvi lehe jaoks

Kui külastaja pole veel ühtegi toodet vaadanud, kuvab lühikood neutraalse teate „Te pole veel ühtegi toodet vaadanud", mille saab asendada oma tekstiga real, kus on esc_html__().

Praktikas võtab seadistamine kolm minutit. Ülalolevas videos on samm-sammuline selgitus WooCommerce'i lühikoodidega töötamisest ja nende saidile paigutamisest.

Kuhu lühikood paigutada: mis töötab

Ostukorvi leht, tugevaim paigutus. Külastaja on juba tooteid kogunud, kuid enne kassasse minekut näeb meeldetuletust sellest, mida ta varem vaatas. 50+ tootega poodide puhul toob see märgatava osa katkenud vaatamistest ostukorvi tagasi.

Tootelehe külgriba. Ostja võrdleb mitut mudelit, „te vaatasite" plokk hoiab alternatiivid silme ees. Töötab eriti hästi elektroonika- ja riidepoodides, kus võrdlemine on valikuprotsessi osa.

Pärast tühja otsingut. Parim varuvariant: „Ei leidnud midagi, kuid siin on see, mida varem vaatasite." Tühja lehe asemel näeb külastaja tuttavaid tooteid ja jääb tõenäolisemalt saidile.

Lisa lühikood külgriba tekstividinasse või lühikoodiploki kaudu Gutenbergi redaktoris. Teema konksudesse (woocommerce_after_cart, woocommerce_before_shop_loop) ainult siis, kui oled kindel mallide redigeerimises.

⁉️🤔 Korduma kippuvad küsimused

Kas lühikood töötab vahemäluga?

Lühikood sõltub woocommerce_recently_viewed PHP küpsisest, mida loetakse serveri poolel. Kui leht on vahemällu salvestatud HTTP tasemel (Varnish, NGINX FastCGI Cache või plugin nagu WP Rocket), salvestatakse ka lühikoodi sisu vahemällu ja üks külastaja võib näha „kellegi teise" vaadatud tooteid. Lahendus: välista lühikoodiga lehed vahemälust või luba WooCommerce'iga ühilduv vahemälurežiim (ESI või fragmentide vahemällu salvestamine).

Kas ma saan vaadatud tooteid kuvada ilma lühikoodita, konksu kaudu?

Jah. Funktsioon sd_recently_viewed_products() tagastab stringi, seda saab otse välja kutsuda igas teema konksus: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Sobivad konksud on woocommerce_after_cart, woocommerce_after_single_product ja woocommerce_before_shop_loop. Arvesta vahemäluga, kui leht on tervenisti vahemällu salvestatud.

Mitu toodet küpsisesse salvestatakse?

Vaikimisi salvestab WooCommerce viimase 10 vaadatud toote ID-d. See on määratud WooCommerce'i koodis ega ole liidese kaudu seadistatav. Lühikood määrab per_page parameetri kaudu, kui paljusid neist 10-st kuvada.

Miks on see lähenemine parem kui eraldi plugin?

30-realine kood ei lisa täiendavaid andmebaasipäringuid, kasutab sama küpsist, mille WooCommerce juba kirjutas. Eraldi plugin tõmbab sageli sisse oma jälgimismehhanismi (täiendavad küpsised, JS sündmused, andmebaasitabelid). Tüüpilise poe jaoks katab lühikood stsenaariumi täielikult, ilma administraatoriliidest paisutamata.

Miks kasutada [products], mitte enda WP_Query?

Sisseehitatud [products] annab tasuta teema responsiivse ruudustiku, hinnad, „Lisa ostukorvi" nupu, laoseisu käsitluse ja laost otsas oleku. Käsitsi WP_Query puhul peaksid sa seda kõike uuesti realiseerima ja WooCommerce'i uuenduste ajal hooldama.

Lühikood 30 reaga: kas on seda väärt

woocommerce_recently_viewed küpsis on andmed, mida sinu pood juba kogub. 30-realine lühikood muudab selle töötavaks „hiljuti vaadatud" plokiks ilma pluginateta ja täiendavate andmebaasipäringuteta.

• Kui sul on 50+ tootega pood, paiguta lühikood ostukorvi lehele ja proovi A/B testi kontrollgrupiga, kus plokki pole.
• Kui kasutad agressiivset vahemällu salvestamist, välista lühikoodiga leht või luba fragmentide vahemällu salvestamine.
• Kui külastaja pole tooteid vaadanud, kuvab lühikood vaikselt neutraalse teate ega lõhu küljendust.

Lisa [recently_viewed_products] oma saidile ja kontrolli inkognito brauseriaknas: ava paar toodet, seejärel mine lühikoodiga lehele. Kui plokk ei näita seda, mida vaatasid, kontrolli oma vahemälu seadeid, tõenäoliselt on see põhjus. Millist vaadatud toodete kuvamise meetodit sina kasutad, lühikoodi, pluginat või teema konksu? Kirjuta kommentaaridesse.