Stranice trgovine i blokovi za plaćanje

Modul 2: Instalacija i postavljanje · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije prepoznat ćete stranice trgovine u WooCommerceu i ispravno ih povezati te ćete svjesno birati između blokova i kratkih kodova (shortcodes) za košaricu i blagajnu.

Ključni pojmovi: stranica trgovine, košarica, blagajna, Moj račun, stranica s uvjetima, postavljanje stranica, blokovi, kratki kodovi (shortcodes), blok-tema, klasična tema, kompatibilnost proširenja, noindex

Četiri stranice s posebnom ulogom

WordPress stranica sastoji se od stranica i objava (tečaj o WordPressu, lekcija 4.2). WooCommerce dodaje proizvode kao zasebnu vrstu objave i nekim običnim stranicama dodjeljuje posebnu ulogu. Te stranice na popisu Stranice izgledaju kao i svaka druga stranica, ali WooCommerce zna koja stranica ima koju zadaću. To je zapisano u postavkama, a ne u nazivu ili adresi stranice.

Budući da je povezivanje zapisano u postavkama, stranicama možete dati drugi naslov i drugu adresu. Theehuis Example košaricu naziva "Mandje" (nizozemski za košaricu) na /mandje/ i to funkcionira, sve dok je ta stranica u Postavljanju stranica postavljena kao košarica.

Ako povezivanje pođe po zlu, to ćete primijetiti na neočekivanim mjestima. Nekoliko čestih primjera:

• Netko izbriše stranicu Košarica jer je "bila dvaput". Nakon toga posjetitelj nakon klika na Dodaj u košaricu dolazi na stranicu s pogreškom, a neke teme više ne prikazuju košaricu u zaglavlju.
• Nakon preseljenja ili uvoza uz Blagajnu je povezana druga stranica, a ne ona s blokom za plaćanje. Posjetitelj vidi praznu stranicu i ne može naručiti.
• Nakon ponovnog pokretanja čarobnjaka nastane druga stranica "Blagajna-2". Jedna je stranica povezana, a druga se nalazi u izborniku.

Zato nakon svake veće promjene (tema, preseljenje, uvoz) u Postavljanju stranica provjerite koja je stranica povezana i otvorite tu stranicu.

Blokovi ili kratki kodovi

Košarica i blagajna mogu se na stranicu postaviti na dva načina.

Kratki kodovi (shortcodes) stari su način: na stranici stoji kratki kod u uglatim zagradama, primjerice [woocommerce_cart] i [woocommerce_checkout]. WooCommerce ga pri prikazu zamjenjuje obrascem. Izgled dolazi iz teme, a vrlo su mnoga proširenja godinama izrađivana upravo za ovaj oblik.

Blokovi su novi način: stranica sadrži blok Košarica ili Blagajna, sastavljen od manjih blokova (adresa, dostava, način plaćanja, pregled, gumb za narudžbu). Vidite ih i uređujete u uređivaču blokova (tečaj o WordPressu, lekcija 4.1). Blokovi komuniciraju s poslužiteljem putem Store API sučelja (lekcija 2.4): obrazac radi izravno u pregledniku, bez ponovnog učitavanja stranice.

Od verzije WooCommerce 8.3 (studeni 2023.) nova instalacija dobiva blokove. Postojeća trgovina koja se ažurira zadržava ono što je imala. Kratki kodovi i dalje su dostupni.

Što odabrati? Pomoći će nekoliko pitanja:

• Rade li Vaša proširenja s blokovima? Ovo je najvažnije pitanje. Proširenje koje dodaje polje na blagajnu (datum dostave, PDV identifikacijski broj, poruku uz poklon) mora biti posebno prilagođeno za blokove. Na stranici proširenja obično piše je li ono "kompatibilno s blokom za plaćanje". U uređivaču bloka za plaćanje WooCommerce može prikazati obavijest o aktivnim proširenjima koja nisu označena kao kompatibilna.
• Koju temu imate? S blok-temom (tečaj o WordPressu, lekcija 5.1) blokovi se najbolje uklapaju. S klasičnom temom također rade, ali se izgled tada manje samorazumljivo podudara.
• Morate li prilagoditi gumb za narudžbu? U blokovima tekst gumba postavljate u uređivaču. S obzirom na pravila koja za to vrijede (lekcija 5.4), to je praktično.
• Želite li da Store API bude javno dostupan? Uz blokove on mora biti dostupan; dodatak za sigurnost koji zatvara REST API onemogućuje plaćanje.

Theehuis Example ne koristi proširenja koja dodaju polja i ima blok-temu. Zadržava blokove. Neka druga trgovina s dodatkom za datum dostave koji radi samo s kratkim kodom privremeno odabire kratki kod i pri svakom većem ažuriranju tog dodatka ponovno provjerava.

Ako mijenjate oblik, učinite to u svojoj testnoj trgovini i zatim testirajte cijelu narudžbu (lekcija 4.5). WooCommerce u WooCommerce > Status > Alati ima alat za ponovnu izradu stranica trgovine koje nedostaju; on izrađuje nove stranice, a postojeće ne pretvara.

Zašto košarica i blagajna ne pripadaju u tražilice

Košarica je za svakog posjetitelja drukčija, a za tražilicu je uvijek prazna. Prazna košarica u rezultatima pretraživanja nikome ne pomaže. Zato WooCommerce na stranice košarice, blagajne i Moj račun sam postavlja noindex: tražilica smije posjetiti stranicu, ali je ne uvrštava u rezultate pretraživanja. U izvornom kodu to izgleda ovako:

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

SEO dodatak ili tema mogu prebrisati taj redak. To je rijetko namjerno. U zadatku ove lekcije provjeravate postoji li taj redak.

Te iste tri stranice također ne smiju biti u predmemoriji stranica. WooCommerce uz njih šalje zaglavlja koja predmemoriji govore da stranicu ne smije spremati. Kako provjeriti pridržava li se Vaša predmemorija toga, saznat ćete u lekciji 6.4.

Što vidi posjetitelj bez košarice

Ako otvorite stranicu blagajne bez ičega u košarici, događa se nešto drugo nego kad u njoj ima proizvoda:

• S blokovima stranica blagajne obično prikazuje obavijest da je košarica prazna, s gumbom za povratak u trgovinu.
• S kratkim kodom WooCommerce Vas često preusmjerava na košaricu.

Oboje je normalno. Provjera u ovoj lekciji to uzima u obzir: program nikada ništa ne stavlja u Vašu košaricu i gleda samo ono što vidi posjetitelj bez košarice.

U praksi: ovako to izgleda u WooCommerceu

S drugim temama i pružateljima hostinga postupak je sličan; razlikuje se samo izgled.

1. Otvorite WooCommerce > Postavke > Napredno (Advanced) i otvorite Postavljanje stranica (Page setup). Zabilježite koja je stranica postavljena uz Košarica, Blagajna, Moj račun i Opći uvjeti poslovanja.
2. U Stranice kliknite na svaku od tih stranica i provjerite nalazi li se na njoj blok (ili kratki kod).
3. Otvorite stranicu blagajne u uređivaču. Kliknite na blok Blagajna i pogledajte dijelove u prikazu popisa: podaci za kontakt, adresa za dostavu, mogućnosti dostave, mogućnosti plaćanja, napomena, uvjeti, gumb.
4. U uređivaču bloka za plaćanje (i kod samih proširenja) provjerite postoji li obavijest o proširenjima koja nisu kompatibilna s blokovima.
5. Otvorite košaricu u privatnom prozoru i pogledajte izvorni kod (Ctrl+U): potražite noindex.

Sažetak

• WooCommerce četirima stranicama dodjeljuje ulogu (trgovina, košarica, blagajna, Moj račun), uz stranicu s uvjetima; povezivanje je zapisano u postavkama, a ne u nazivu.
• Nakon preseljenja, uvoza ili promjene teme provjerite povezivanja u Postavljanju stranica.
• Nove trgovine od verzije WooCommerce 8.3 dobivaju blokove; kratki kodovi i dalje postoje. Odaberite na temelju svojih proširenja i teme.
• Blokovima je potreban Store API; nemojte zatvarati REST API.
• Košarica, blagajna i Moj račun od WooCommercea dobivaju noindex i ne pripadaju u predmemoriju.

Kviz

Zadatak

Zadatak A2.2: Stranice Vaše trgovine. Unesite adresu svoje (testne) trgovine i adrese svoje košarice, stranice blagajne i stranice Moj račun (putanju, primjerice /kosarica/, ili puni URL na istom hostu). Program svaku stranicu dohvaća jednom, bez kolačića i bez stavljanja ičega u košaricu.

Za svaku stranicu rezultat je dobar ako:

• stranica odgovara putem https sa statusom 200;
• HTML sadrži obilježje WooCommercea: za košaricu blok wp-block-woocommerce-cart ili body klasu woocommerce-cart, za blagajnu wp-block-woocommerce-checkout ili woocommerce-checkout, za Moj račun woocommerce-account ili WooCommerceov obrazac za prijavu;
• postoji noindex (meta robots ili zaglavlje X-Robots-Tag).

Ako stranica blagajne s praznom košaricom preusmjerava na košaricu koju ste unijeli, i to je dobro.

Narančasta: nema oznake noindex (provjerite uklanja li je SEO dodatak ili Vaša tema); stranica koristi kratki kod umjesto bloka (nije pogreška, ali je pitanje je li to svjestan izbor). Crvena: status pogreške poput 404, stranica bez obilježja WooCommercea (povežite ispravnu stranicu u Postavljanju stranica), preusmjeravanje na drugi host ili http bez https.

Zatim za sebe zapišite koji oblik (blokove ili kratki kod) koristite i zašto.

Daljnje čitanje

• Besplatan WordPress tečaj 5.1: Teme: blok teme i klasične teme
• Besplatan WordPress tečaj 4.2: Stranice, objave, kategorije i oznake
• Besplatan WordPress tečaj 4.1: Blok uređivač
• WooCommerce 8.3: blokovi kao zadana postavka za nove trgovine (developer.woocommerce.com, na engleskom): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, na engleskom): https://developer.woocommerce.com/docs/apis/store-api/