Stránky obchodu a bloky pokladne

Modul 2: Inštalácia a nastavenie · Čas čítania: 9 min.

Cieľ lekcie: Po tejto lekcii dokážete rozpoznať stránky obchodu WooCommerce a správne ich prepojiť a vedome si vyberiete medzi blokmi a shortcodmi pre košík a pokladňu.

Kľúčové pojmy: stránka obchodu, košík, pokladňa, Môj účet, stránka s podmienkami, nastavenie stránok, bloky, shortcody, blokový motív, klasický motív, kompatibilita rozšírení, noindex

Štyri stránky so zvláštnou úlohou

Stránka vo WordPress sa skladá zo stránok a článkov (kurz WordPress, lekcia 4.2). WooCommerce pridáva produkty ako vlastný typ obsahu a niekoľkým bežným stránkam prideľuje zvláštnu úlohu. Tieto stránky vyzerajú v zozname Stránky ako každá iná stránka, ale WooCommerce vie, ktorá stránka má akú úlohu. Je to uložené v nastaveniach, nie v názve ani v adrese stránky.

Keďže prepojenie je v nastaveniach, môžete stránkam dať iný názov a inú adresu. Theehuis Example nazýva košík „Mandje“ (po holandsky košíček) na adrese /mandje/ a funguje to, pokiaľ je táto stránka v časti Nastavenie stránky nastavená ako košík.

Ak sa prepojenie pokazí, prejaví sa to na nečakaných miestach. Niekoľko častých príkladov:

• Niekto zmaže stránku Košík, pretože „bola tam dvakrát“. Potom sa návštevník po kliknutí na Pridať do košíka dostane na chybovú stránku a niektoré motívy už v hlavičke nezobrazujú košík.
• Po sťahovaní alebo importe je pri Pokladňa prepojená iná stránka než tá s blokom pokladne. Návštevník vidí prázdnu stránku a nemôže objednať.
• Po druhom spustení sprievodcu vznikne druhá stránka „Pokladňa-2“. Jedna stránka je prepojená, druhá je v menu.

Preto po každej väčšej zmene (motív, sťahovanie, import) skontrolujte v časti Nastavenie stránky, ktorá stránka je prepojená, a prekliknite sa na ňu.

Bloky alebo shortcody

Košík a pokladňa sa na stránku môžu dostať dvoma spôsobmi.

Shortcody sú starší spôsob: na stránke je krátky kód v hranatých zátvorkách, napríklad [woocommerce_cart] a [woocommerce_checkout]. WooCommerce ho pri zobrazení nahradí formulárom. Vzhľad určuje motív a veľmi veľa rozšírení bolo roky vytváraných práve pre túto formu.

Bloky sú nový spôsob: stránka obsahuje blok Košík alebo Pokladňa, zložený z menších blokov (adresa, doprava, spôsob platby, prehľad, tlačidlo objednávky). Vidíte a upravujete ich v blokovom editore (kurz WordPress, lekcia 4.1). Bloky komunikujú so serverom cez Store API (lekcia 2.4): formulár funguje priamo v prehliadači bez opakovaného načítavania stránky.

Od WooCommerce 8.3 (november 2023) dostáva nová inštalácia bloky. Existujúci obchod, ktorý sa aktualizuje, si ponechá to, čo mal. Shortcody zostávajú k dispozícii.

Čo si vybrať? Pomôže niekoľko otázok:

• Fungujú vaše rozšírenia s blokmi? To je najdôležitejšia otázka. Rozšírenie, ktoré do pokladne pridáva pole (dátum doručenia, IČ DPH, darčekový odkaz), musí byť pre bloky osobitne upravené. Na stránke rozšírenia je zvyčajne uvedené, či je „kompatibilné s blokom pokladne“. V editore bloku pokladne môže WooCommerce zobraziť upozornenie na aktívne rozšírenia, ktoré nie sú označené ako kompatibilné.
• Aký motív máte? S blokovým motívom (kurz WordPress, lekcia 5.1) sa bloky hodia najlepšie. S klasickým motívom fungujú tiež, ale vzhľad potom menej samozrejme ladí.
• Potrebujete upraviť tlačidlo objednávky? V blokoch nastavíte text tlačidla v editore. Pre pravidlá, ktoré pre to platia (lekcia 5.4), je to praktické.
• Chcete, aby bolo Store API verejné? Pri blokoch musí byť dostupné; bezpečnostný plugin, ktorý zablokuje REST API, pokazí pokladňu.

Theehuis Example nepoužíva rozšírenia, ktoré pridávajú polia, a má blokový motív. Ponecháva si bloky. Iný obchod s pluginom na dátum doručenia, ktorý funguje len so shortcodom, si dočasne vyberie shortcode a pri každej väčšej aktualizácii pluginu to znova preverí.

Ak meníte formu, urobte to vo svojom testovacom obchode a potom otestujte celú objednávku (lekcia 4.5). WooCommerce má v časti WooCommerce > Stav > Nástroje nástroj na opätovné vytvorenie chýbajúcich stránok obchodu; ten vytvorí nové stránky, existujúce neprevedie.

Prečo košík a pokladňa nepatria do vyhľadávačov

Košík je pre každého návštevníka iný a pre vyhľadávač vždy prázdny. Prázdny košík vo výsledkoch vyhľadávania nikomu nepomôže. WooCommerce preto na stránky košík, pokladňa a Môj účet sám pridáva noindex: vyhľadávač smie stránku navštíviť, ale nezaradí ju do výsledkov vyhľadávania. V zdrojovom kóde to vyzerá takto:

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

SEO plugin alebo motív môže tento riadok prepísať. Málokedy je to zámer. V úlohe tejto lekcie skontrolujete, či tam je.

Tieto tri stránky tiež nesmú byť v cache stránok. WooCommerce k nim posiela hlavičky, ktoré cache oznamujú, že stránku nesmú uložiť. Ako skontrolovať, či to vaša cache dodržiava, sa dozviete v lekcii 6.4.

Čo vidí návštevník bez košíka

Ak otvoríte stránku pokladne bez ničoho v košíku, stane sa niečo iné, než keď v ňom tovar je:

• S blokmi stránka pokladne zvyčajne zobrazí upozornenie, že košík je prázdny, s tlačidlom späť do obchodu.
• So shortcodom vás WooCommerce často presmeruje do košíka.

Oboje je normálne. Kontrola v tejto lekcii s tým počíta: program nikdy nič nevkladá do košíka a pozerá sa len na to, čo uvidí návštevník bez košíka.

V praxi: takto to vyzerá vo WooCommerce

Pri iných motívoch a hostingoch to funguje podobne; líši sa len vzhľad.

1. Prejdite do WooCommerce > Nastavenia > Pokročilé (Advanced) a otvorte Nastavenie stránky (Page setup). Poznačte si, ktorá stránka je nastavená pri Košík, Pokladňa, Môj účet a Obchodné podmienky.
2. V časti Stránky kliknite na každú z týchto stránok a skontrolujte, či je na nej blok (alebo shortcode).
3. Otvorte stránku pokladne v editore. Kliknite na blok Pokladňa a pozrite si jeho časti v zobrazení zoznamu: kontaktné údaje, dodacia adresa, možnosti dopravy, možnosti platby, poznámka, podmienky, tlačidlo.
4. V editore bloku pokladne (a pri samotných rozšíreniach) skontrolujte, či sa nezobrazuje upozornenie na rozšírenia, ktoré nie sú kompatibilné s blokmi.
5. Otvorte košík v súkromnom okne a pozrite si zdrojový kód (Ctrl+U): vyhľadajte noindex.

Zhrnutie

• WooCommerce prideľuje úlohu štyrom stránkam (obchod, košík, pokladňa, Môj účet) a k tomu stránke s podmienkami; prepojenie je v nastaveniach, nie v názve.
• Po sťahovaní, importe alebo zmene motívu skontrolujte prepojenia v časti Nastavenie stránky.
• Nové obchody dostávajú od WooCommerce 8.3 bloky; shortcody stále existujú. Vyberte si podľa svojich rozšírení a motívu.
• Bloky potrebujú Store API; REST API neblokujte.
• Košík, pokladňa a Môj účet dostávajú od WooCommerce noindex a nepatria do cache.

Kvíz

Úloha

Úloha A2.2: Stránky vášho e-shopu. Zadajte adresu svojho (testovacieho) obchodu a adresy svojho košíka, stránky pokladne a stránky Môj účet (cestu, napríklad /kosik/, alebo celú URL na tom istom hostiteľovi). Program si každú stránku vyžiada raz, bez cookies a bez vkladania čohokoľvek do košíka.

Každá stránka je v poriadku, ak:

• stránka odpovedá cez https so stavom 200;
• HTML obsahuje znak WooCommerce: pre košík blok wp-block-woocommerce-cart alebo triedu body woocommerce-cart, pre pokladňu wp-block-woocommerce-checkout alebo woocommerce-checkout, pre Môj účet woocommerce-account alebo prihlasovací formulár WooCommerce;
• je tam noindex (meta robots alebo hlavička X-Robots-Tag).

Ak stránka pokladne s prázdnym košíkom presmeruje na košík, ktorý ste zadali, je to tiež v poriadku.

Oranžová: chýba noindex (skontrolujte, či ho neodstraňuje SEO plugin alebo váš motív); stránka používa shortcode namiesto bloku (nie je to chyba, ale otázka, či ide o vedomú voľbu). Červená: chybový stav ako 404, stránka bez znaku WooCommerce (prepojte správnu stránku v časti Nastavenie stránky), presmerovanie na iného hostiteľa alebo http bez https.

Potom si poznačte, akú formu (bloky alebo shortcode) používate a prečo.

Ďalšie čítanie

• Bezplatný kurz WordPress 5.1: Témy: blokové témy a klasické témy
• Bezplatný kurz WordPress 4.2: Stránky, články, kategórie a značky
• Bezplatný kurz WordPress 4.1: Blokový editor
• WooCommerce 8.3: bloky ako predvolené pre nové obchody (developer.woocommerce.com, anglicky): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, anglicky): https://developer.woocommerce.com/docs/apis/store-api/