Áruházi oldalak és a pénztár blokkjai

Modul 2: Telepítés és beállítás · Olvasási idő: 9 perc

Tanulási cél: A lecke után Ön felismeri a WooCommerce áruházi oldalait, helyesen kapcsolja be őket, és tudatosan választ a kosár és a pénztár blokkjai és rövidkódjai (shortcode) között.

Kulcsfogalmak: áruházi oldal, kosár, pénztár, Fiókom, feltételek oldala, oldalbeállítások, blokkok, rövidkódok, blokktéma, klasszikus téma, bővítmények kompatibilitása, noindex

Négy oldal különleges szereppel

Egy WordPress-webhely oldalakból és bejegyzésekből áll (WordPress-tanfolyam, 4.2. lecke). A WooCommerce a termékeket saját bejegyzéstípusként adja hozzá, és néhány hagyományos oldalnak különleges szerepet ad. Ezek az oldalak az Oldalak listájában ugyanúgy néznek ki, mint bármely más oldal, de a WooCommerce tudja, melyik oldalnak mi a feladata. Ez a beállításokban van rögzítve, nem az oldal nevében vagy címében.

Mivel a kapcsolat a beállításokban van, az oldalaknak más címet és más webcímet is adhat. A Theehuis Example a kosarat „Mandje” (kosárka) néven, a /mandje/ címen használja, és ez működik, amíg ez az oldal az Oldal beállításoknál kosárként van megadva.

Ha a kapcsolat elromlik, azt furcsa helyeken veszi észre. Néhány gyakori példa:

• Valaki törli a Kosár oldalt, mert „kétszer szerepelt”. Ezután a látogató a Kosárba teszem után hibaoldalra jut, és egyes témák már nem mutatják a kosarat a fejlécben.
• Költöztetés vagy importálás után a Pénztárnál más oldal van bekapcsolva, mint amelyiken a pénztárblokk található. A látogató üres oldalt lát, és nem tud rendelni.
• A varázsló második futtatása után létrejön egy második „Pénztár-2” oldal. Az egyik oldal van bekapcsolva, a másik szerepel a menüben.

Ezért minden nagyobb változtatás (téma, költöztetés, importálás) után ellenőrizze az Oldal beállításoknál, melyik oldal van bekapcsolva, és kattintson át erre az oldalra.

Blokkok vagy rövidkódok

A kosár és a pénztár kétféleképpen kerülhet az oldalra.

A rövidkódok a régi módszert jelentik: az oldalon egy szögletes zárójelek közötti rövid kód áll, például [woocommerce_cart] és [woocommerce_checkout]. A WooCommerce megjelenítéskor ezeket az űrlappal helyettesíti. A megjelenés a témától származik, és nagyon sok bővítményt évekig erre a formára készítettek.

A blokkok az új módszert jelentik: az oldal a Kosár vagy a Pénztár blokkot tartalmazza, amely kisebb blokkokból épül fel (cím, szállítás, fizetési mód, összesítő, a megrendelés gomb). Ezeket a blokkszerkesztőben látja és szerkeszti (WordPress-tanfolyam, 4.1. lecke). A blokkok a Store API-n keresztül kommunikálnak a szerverrel (2.4. lecke): az űrlap közvetlenül a böngészőben működik, anélkül hogy az oldal minden alkalommal újratöltődne.

A WooCommerce 8.3 (2023. november) óta egy új telepítés a blokkokat kapja. Egy meglévő áruház frissítéskor megtartja, ami addig volt. A rövidkódok továbbra is elérhetők.

Melyiket válassza? Néhány kérdés segít:

• Működnek a bővítményei a blokkokkal? Ez a legfontosabb kérdés. Egy bővítményt, amely mezőt ad a pénztárhoz (szállítási dátum, közösségi adószám, ajándéküzenet), külön át kell alakítani a blokkokhoz. A bővítmény oldalán általában szerepel, hogy „kompatibilis-e a pénztárblokkal”. A pénztárblokk szerkesztőjében a WooCommerce figyelmeztetést jeleníthet meg azokról az aktív bővítményekről, amelyek nincsenek kompatibilisként megjelölve.
• Milyen témát használ? Blokktémával (WordPress-tanfolyam, 5.1. lecke) a blokkok illeszkednek a legjobban. Klasszikus témával is működnek, de a megjelenés akkor kevésbé magától értetődően egyezik.
• Módosítania kell a megrendelés gombot? A blokkoknál a gomb szövegét a szerkesztőben állítja be. Ez hasznos az erre vonatkozó szabályok miatt (5.4. lecke); Magyarországon például a „fizetési kötelezettséggel járó megrendelés” vagy más egyértelmű megfogalmazás használható.
• Szeretné, hogy a Store API nyilvános legyen? A blokkokhoz elérhetőnek kell lennie; egy biztonsági bővítmény, amely lezárja a REST API-t, tönkreteszi a pénztárt.

A Theehuis Example nem használ mezőket hozzáadó bővítményeket, és blokktémája van. Megtartja a blokkokat. Egy másik áruház, amelynek szállítási dátum bővítménye csak a rövidkóddal működik, átmenetileg a rövidkódot választja, és a bővítmény minden nagyobb frissítésekor újra megnézi.

Ha formát vált, tegye ezt a tesztáruházában, majd teszteljen végig egy teljes rendelést (4.5. lecke). A WooCommerce > Állapot > Eszközök alatt a WooCommerce-ben van egy eszköz a hiányzó áruházi oldalak újbóli létrehozására; ez új oldalakat hoz létre, a meglévőket nem alakítja át.

Miért nem valók a kosár és a pénztár a keresőmotorokba

A kosár minden látogatónak más, a keresőmotor számára pedig mindig üres. Egy üres kosár a találati listában senkinek sem segít. Ezért a WooCommerce maga tesz noindex jelölést a kosár, a pénztár és a Fiókom oldalra: a keresőmotor meglátogathatja az oldalt, de nem veszi fel a találatok közé. A forráskódban így látja:

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

Egy SEO-bővítmény vagy téma felülírhatja ezt a sort. Ez ritkán szándékos. A lecke feladatában ellenőrzi, hogy ott van-e.

Ugyanez a három oldal nem kerülhet az oldalgyorsítótárba sem. A WooCommerce olyan fejléceket küld velük, amelyek közlik a gyorsítótárakkal, hogy nem tárolhatják az oldalt. Hogy hogyan ellenőrizheti, betartja-e ezt a gyorsítótára, azt a 6.4. lecke mutatja be.

Mit lát egy látogató üres kosárral

Ha üres kosárral nyitja meg a pénztár oldalt, más történik, mint amikor termékek vannak benne:

• A blokkoknál a pénztár oldal általában értesítést mutat, hogy a kosár üres, egy gombbal vissza a boltba.
• A rövidkódnál a WooCommerce gyakran átirányítja a kosárhoz.

Mindkettő normális. A lecke ellenőrzése számol ezzel: a program soha nem tesz semmit a kosarába, és csak azt nézi, mit lát egy üres kosarú látogató.

A gyakorlatban: így néz ki a WooCommerce-ben

Más témáknál és tárhelyszolgáltatóknál hasonlóan működik; csak a megjelenés különbözik.

1. Lépjen a WooCommerce > Beállítások > Haladó (Advanced) menüpontba, és nyissa meg az Oldal beállítások (Page setup) részt. Jegyezze fel, melyik oldal szerepel a Kosár, a Pénztár, a Fiókom és az Általános Szerződési Feltételek mellett.
2. Az Oldalak alatt kattintson mindegyik oldalra, és ellenőrizze, hogy rajta van-e a blokk (vagy a rövidkód).
3. Nyissa meg a pénztár oldalt a szerkesztőben. Kattintson a Pénztár blokkra, és nézze meg a részeit a listanézetben: kapcsolati adatok, szállítási cím, szállítási lehetőségek, fizetési lehetőségek, megjegyzés, feltételek, a gomb.
4. Nézze meg a pénztárblokk szerkesztőjében (és magánál a bővítményeknél), hogy van-e figyelmeztetés a blokkokkal nem kompatibilis bővítményekről.
5. Nyissa meg a kosarat egy privát ablakban, és nézze meg a forráskódot (Ctrl+U): keressen rá a noindex kifejezésre.

Összefoglalás

• A WooCommerce négy oldalnak ad szerepet (bolt, kosár, pénztár, Fiókom), valamint a feltételek oldalának; a kapcsolat a beállításokban van, nem a névben.
• Költöztetés, importálás vagy témaváltás után ellenőrizze a kapcsolatokat az Oldal beállításoknál.
• Az új áruházak a WooCommerce 8.3 óta a blokkokat kapják; a rövidkódok továbbra is léteznek. A bővítményei és a témája alapján válasszon.
• A blokkoknak szükségük van a Store API-ra; ne zárja le a REST API-t.
• A kosár, a pénztár és a Fiókom oldal a WooCommerce-től noindex jelölést kap, és nem való a gyorsítótárba.

Kvíz

Feladat

A2.2. feladat: Az Ön áruházi oldalai. Adja meg a (teszt)áruháza címét, valamint a kosár, a pénztár oldal és a Fiókom oldal címét (útvonalként, például /winkelwagen/, vagy teljes URL-ként ugyanazon a hoston). A program minden oldalt egyszer kér le, sütik nélkül és anélkül, hogy bármit a kosárba tenne.

Egy oldal akkor megfelelő, ha:

• az oldal https-en keresztül 200-as állapotkóddal válaszol;
• a HTML tartalmaz egy WooCommerce-ismertetőjelet: a kosárnál a wp-block-woocommerce-cart blokkot vagy a woocommerce-cart body-osztályt, a pénztárnál a wp-block-woocommerce-checkout vagy a woocommerce-checkout jelölést, a Fiókom oldalnál a woocommerce-account jelölést vagy egy WooCommerce bejelentkezési űrlapot;
• van rajta noindex (meta robots vagy X-Robots-Tag fejléc).

Ha a pénztár oldal üres kosárral átirányít az Ön által megadott kosárra, az is megfelelő.

Narancssárga: nincs noindex (nézze meg, nem egy SEO-bővítmény vagy a téma távolítja-e el); az oldal a blokk helyett a rövidkódot használja (ez nem hiba, de kérdés, hogy tudatos döntés-e). Piros: hibás állapotkód, például 404, WooCommerce-ismertetőjel nélküli oldal (kapcsolja be a helyes oldalt az Oldal beállításoknál), átirányítás egy másik hostra, vagy http https nélkül.

Ezután jegyezze fel magának, melyik formát (blokkok vagy rövidkód) használja, és miért.

Bővebben olvasva

• Ingyenes WordPress-tanfolyam 5.1: Sablonok: blokk sablonok és klasszikus sablonok
• Ingyenes WordPress-tanfolyam 4.2: Oldalak, bejegyzések, kategóriák és címkék
• Ingyenes WordPress-tanfolyam 4.1: A blokkszerkesztő
• WooCommerce 8.3: alapértelmezett blokkok az új áruházakhoz (developer.woocommerce.com, angol nyelven): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• A Store API (developer.woocommerce.com, angol nyelven): https://developer.woocommerce.com/docs/apis/store-api/