Strani trgovine in bloki za zaključek nakupa

Modul 2: Namestitev in nastavitev · Čas branja: 9 minut

Učni cilj: Po tej lekciji boste prepoznali strani trgovine v WooCommerce in jih pravilno povezali, med bloki in kratkimi kodami (shortcodes) za košarico in zaključek nakupa pa boste izbirali premišljeno.

Ključni pojmi: stran trgovine, košarica, zaključek nakupa, Moj račun, stran s pogoji, nastavitev strani, bloki, kratke kode (shortcodes), blokovna tema, klasična tema, združljivost razširitev, noindex

Štiri strani s posebno vlogo

Spletno mesto WordPress je sestavljeno iz strani in prispevkov (tečaj WordPress, lekcija 4.2). WooCommerce doda izdelke kot lastno vrsto prispevkov, nekaterim običajnim stranem pa dodeli posebno vlogo. Te strani so na seznamu Strani videti kot vse druge, vendar WooCommerce ve, katera stran ima katero nalogo. To je zapisano v nastavitvah, ne v imenu ali naslovu strani.

Ker je povezava zapisana v nastavitvah, lahko stranem date drug naslov in drug URL. Theehuis Example košarico imenuje »Mandje« (nizozemsko za košek) na /mandje/, in to deluje, dokler je ta stran v Nastavitvi strani nastavljena kot košarica.

Če gre pri povezavi kaj narobe, to opazite na nenavadnih mestih. Nekaj pogostih primerov:

• Nekdo izbriše stran Košarica, ker »je bila podvojena«. Nato obiskovalec po kliku na Dodaj v košarico pristane na strani z napako, nekatere teme pa v glavi ne prikazujejo več košarice.
• Po selitvi ali uvozu je pri Zaključku nakupa povezana druga stran kot tista z blokom za zaključek nakupa. Obiskovalec vidi prazno stran in ne more naročiti.
• Ko čarovnika zaženete drugič, nastane druga stran »Zaključek nakupa-2«. Ena stran je povezana, druga je v meniju.

Zato po vsaki večji spremembi (tema, selitev, uvoz) v Nastavitvi strani preverite, katera stran je povezana, in odprite to stran.

Bloki ali kratke kode

Košarica in zaključek nakupa lahko na stran prideta na dva načina.

Kratke kode (shortcodes) so starejši način: na strani je kratka koda v oglatih oklepajih, na primer [woocommerce_cart] in [woocommerce_checkout]. WooCommerce jo ob prikazu zamenja z obrazcem. Videz določa tema, zelo veliko razširitev pa je bilo leta izdelanih prav za to obliko.

Bloki so novejši način: stran vsebuje blok Košarica ali Zaključek nakupa, sestavljen iz manjših blokov (naslov, dostava, način plačila, pregled, gumb za naročilo). Vidite in urejate jih v urejevalniku blokov (tečaj WordPress, lekcija 4.1). Bloki s strežnikom komunicirajo prek Store API (lekcija 2.4): obrazec deluje neposredno v brskalniku, brez ponovnega nalaganja strani.

Od različice WooCommerce 8.3 (november 2023) nova namestitev dobi bloke. Obstoječa trgovina, ki se posodobi, obdrži, kar je imela. Kratke kode ostajajo na voljo.

Kaj izbrati? Pomaga nekaj vprašanj:

• Ali Vaše razširitve delujejo z bloki? To je najpomembnejše vprašanje. Razširitev, ki zaključku nakupa doda polje (datum dostave, identifikacijsko številko za DDV, sporočilo za darilo), mora biti za bloke posebej prilagojena. Na strani razširitve je običajno navedeno, ali je »združljiva z blokom za zaključek nakupa«. V urejevalniku bloka za zaključek nakupa lahko WooCommerce prikaže obvestilo o aktivnih razširitvah, ki niso označene kot združljive.
• Katero temo imate? Z blokovno temo (tečaj WordPress, lekcija 5.1) se bloki ujemajo najbolje. S klasično temo prav tako delujejo, vendar se videz manj samodejno ujema.
• Ali morate prilagoditi gumb za naročilo? Pri blokih besedilo gumba nastavite v urejevalniku. Za pravila, ki veljajo zanj (lekcija 5.4), je to priročno.
• Ali želite, da je Store API javen? Pri blokih mora biti dosegljiv; vtičnik za varnost, ki zapre REST API, pokvari zaključek nakupa.

Theehuis Example ne uporablja razširitev, ki dodajajo polja, in ima blokovno temo. Zato obdrži bloke. Druga trgovina z vtičnikom za datum dostave, ki deluje samo s kratko kodo, začasno izbere kratko kodo in ob vsaki večji posodobitvi tega vtičnika ponovno preveri.

Če zamenjate obliko, to storite v testni trgovini in nato preizkusite celotno naročilo (lekcija 4.5). WooCommerce ima pri WooCommerce > Stanje > Orodja orodje za ponovno ustvarjanje manjkajočih strani trgovine; to ustvari nove strani, obstoječih pa ne pretvori.

Zakaj košarica in zaključek nakupa ne sodita v iskalnike

Košarica je za vsakega obiskovalca drugačna, za iskalnik pa vedno prazna. Prazna košarica v rezultatih iskanja nikomur ne koristi. Zato WooCommerce na strani košarice, zaključka nakupa in Moj račun sam doda noindex: iskalnik stran sme obiskati, vendar je ne vključi v rezultate iskanja. V izvorni kodi je to videti tako:

<meta name='robots' content='noindex, follow' />

Vtičnik za SEO ali tema lahko to vrstico prepiše. To je le redko namerno. V nalogi te lekcije preverite, ali je prisotna.

Te tri strani prav tako ne smejo v predpomnilnik strani. WooCommerce zanje pošlje glave, ki predpomnilnikom sporočajo, da strani ne smejo shraniti. Kako preverite, ali Vaš predpomnilnik to upošteva, obravnava lekcija 6.4.

Kaj vidi obiskovalec s prazno košarico

Če odprete stran za zaključek nakupa s prazno košarico, se zgodi nekaj drugega kot s polno košarico:

• Pri blokih stran za zaključek nakupa običajno prikaže obvestilo, da je košarica prazna, z gumbom za vrnitev v trgovino.
• Pri kratki kodi Vas WooCommerce pogosto preusmeri v košarico.

Oboje je običajno. Preverjanje v tej lekciji to upošteva: program nikoli ničesar ne doda v košarico in gleda le, kaj vidi obiskovalec s prazno košarico.

V praksi: tako je videti v WooCommerce

Pri drugih temah in ponudnikih gostovanja deluje podobno; razlikuje se le videz.

1. Pojdite na WooCommerce > Nastavitve > Napredno (Advanced) in odprite Nastavitev strani (Page setup). Zapišite si, katera stran je nastavljena pri Košarici, Zaključku nakupa, Moj račun in Pogojih poslovanja.
2. Pri Straneh kliknite vsako od teh strani in preverite, ali je na njej blok (ali kratka koda).
3. Stran za zaključek nakupa odprite v urejevalniku. Kliknite blok Zaključek nakupa in si v pogledu seznama oglejte dele: kontaktni podatki, naslov za dostavo, možnosti dostave, možnosti plačila, opomba, pogoji, gumb.
4. V urejevalniku bloka za zaključek nakupa (in pri samih razširitvah) preverite, ali je prikazano obvestilo o razširitvah, ki niso združljive z bloki.
5. Košarico odprite v zasebnem oknu in si oglejte izvorno kodo (Ctrl+U): poiščite noindex.

Povzetek

• WooCommerce štirim stranem dodeli vlogo (trgovina, košarica, zaključek nakupa, Moj račun), poleg tega še strani s pogoji; povezava je v nastavitvah, ne v imenu.
• Po selitvi, uvozu ali zamenjavi teme preverite povezave v Nastavitvi strani.
• Nove trgovine od različice WooCommerce 8.3 dobijo bloke; kratke kode še obstajajo. Izberite glede na svoje razširitve in temo.
• Bloki potrebujejo Store API; REST API ne zaprite.
• Košarica, zaključek nakupa in Moj račun od WooCommerce dobijo noindex in ne sodijo v predpomnilnik.

Kviz

Naloga

Naloga A2.2: Strani Vaše trgovine. Vnesite naslov svoje (testne) trgovine ter naslove košarice, strani za zaključek nakupa in strani Moj račun (pot, na primer /winkelwagen/, ali celoten URL na istem gostitelju). Program vsako stran zahteva enkrat, brez piškotkov in ne da bi kaj dodal v košarico.

Posamezna stran je v redu, če:

• stran odgovori prek https s stanjem 200;
• HTML vsebuje oznako WooCommerce: za košarico blok wp-block-woocommerce-cart ali razred body woocommerce-cart, za zaključek nakupa wp-block-woocommerce-checkout ali woocommerce-checkout, za Moj račun woocommerce-account ali prijavni obrazec WooCommerce;
• je prisoten noindex (meta robots ali glava X-Robots-Tag).

Če stran za zaključek nakupa ob prazni košarici preusmeri na košarico, ki ste jo vnesli, je tudi to v redu.

Oranžno: ni noindex (preverite, ali ga odstrani vtičnik za SEO ali Vaša tema); stran uporablja kratko kodo namesto bloka (ni napaka, je pa vprašanje, ali je to premišljena izbira). Rdeče: stanje napake, na primer 404, stran brez oznake WooCommerce (v Nastavitvi strani povežite pravo stran), preusmeritev na drug gostitelj ali http brez https.

Nato si zapišite, katero obliko (bloke ali kratko kodo) uporabljate in zakaj.

Za nadaljnje branje

• Brezplačni tečaj WordPress 5.1: Teme: teme z bloki in klasične teme
• Brezplačni tečaj WordPress 4.2: Strani, prispevki, kategorije in oznake
• Brezplačni tečaj WordPress 4.1: Urejevalnik blokov
• WooCommerce 8.3: bloki privzeto za nove trgovine (developer.woocommerce.com, angleško): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, angleško): https://developer.woocommerce.com/docs/apis/store-api/