Stránky obchodu a bloky pokladny

Modul 2: Instalace a nastavení · Doba čtení: 9 minut

Cíl lekce: Po této lekci dokážete rozpoznat stránky obchodu WooCommerce a správně je propojit a vědomě zvolíte mezi bloky a shortcody pro košík a pokladnu.

Klíčové pojmy: stránka obchodu, košík, pokladna, Můj účet, stránka s obchodními podmínkami, nastavení stránky, bloky, shortcody, bloková šablona, klasická šablona, kompatibilita rozšíření, noindex

Čtyři stránky se zvláštní rolí

Web na WordPressu se skládá ze stránek a příspěvků (kurz WordPress, lekce 4.2). WooCommerce přidává produkty jako vlastní typ obsahu a několika běžným stránkám přiděluje zvláštní roli. V seznamu Stránky vypadají tyto stránky jako kterékoli jiné, ale WooCommerce ví, která stránka má jakou úlohu. To je uloženo v nastavení, nikoli v názvu nebo adrese stránky.

Protože je propojení uloženo v nastavení, můžete stránkám dát jiný název a jinou adresu. Theehuis Example nazývá košík „Mandje“ na adrese /mandje/ a funguje to, pokud je tato stránka v Nastavení stránky uvedena jako košík.

Pokud se propojení pokazí, projeví se to na nečekaných místech. Několik častých příkladů:

• Někdo smaže stránku Košík, protože „tam byla dvakrát“. Návštěvník se pak po kliknutí na Přidat do košíku dostane na chybovou stránku a některé šablony přestanou v záhlaví zobrazovat košík.
• Po stěhování nebo importu je u Pokladny propojena jiná stránka než ta s blokem pokladny. Návštěvník vidí prázdnou stránku a nemůže objednat.
• Po druhém spuštění průvodce vznikne druhá stránka „Pokladna-2“. Jedna stránka je propojená, druhá je v menu.

Proto po každé větší změně (šablona, stěhování, import) zkontrolujte v Nastavení stránky, která stránka je propojená, a proklikněte se na ni.

Bloky, nebo shortcody

Košík a pokladna se na stránku dostanou dvěma způsoby.

Shortcody jsou starší způsob: na stránce je krátký kód v hranatých závorkách, například [woocommerce_cart] a [woocommerce_checkout]. WooCommerce ho při zobrazení nahradí formulářem. Vzhled určuje šablona a velké množství rozšíření bylo po léta vytvářeno právě pro tuto podobu.

Bloky jsou nový způsob: stránka obsahuje blok Košík nebo Pokladna, složený z menších bloků (adresa, doprava, způsob platby, přehled, tlačítko objednávky). Zobrazujete a upravujete je v editoru bloků (kurz WordPress, lekce 4.1). Bloky komunikují se serverem přes Store API (lekce 2.4): formulář funguje přímo v prohlížeči, aniž by se stránka pokaždé znovu načítala.

Od WooCommerce 8.3 (listopad 2023) dostává nová instalace bloky. Stávající obchod, který se aktualizuje, si ponechá to, co měl. Shortcody zůstávají k dispozici.

Co zvolit? Pomůže několik otázek:

• Fungují Vaše rozšíření s bloky? To je nejdůležitější otázka. Rozšíření, které do pokladny přidává pole (datum doručení, DIČ, dárkový vzkaz), musí být pro bloky zvlášť upraveno. Na stránce rozšíření bývá uvedeno, zda je „kompatibilní s blokem pokladny“. V editoru bloku pokladny může WooCommerce zobrazit upozornění na aktivní rozšíření, která nejsou označena jako kompatibilní.
• Jakou máte šablonu? S blokovou šablonou (kurz WordPress, lekce 5.1) se bloky hodí nejlépe. S klasickou šablonou fungují také, ale vzhled pak tolik automaticky neladí.
• Potřebujete upravit tlačítko objednávky? V blocích nastavíte text tlačítka v editoru. S ohledem na pravidla, která pro něj platí (lekce 5.4), je to praktické.
• Chcete, aby bylo Store API veřejné? U bloků musí být dostupné; bezpečnostní plugin, který uzavře REST API, pokladnu rozbije.

Theehuis Example nepoužívá žádná rozšíření, která přidávají pole, a má blokovou šablonu. Ponechává si tedy bloky. Jiný obchod s pluginem pro datum doručení, který funguje jen se shortcodem, zvolí dočasně shortcode a při každé větší aktualizaci tohoto pluginu to znovu prověří.

Pokud podobu měníte, udělejte to ve svém testovacím obchodě a poté otestujte celou objednávku (lekce 4.5). WooCommerce má v WooCommerce > Stav > Nástroje nástroj pro opětovné vytvoření chybějících stránek obchodu; ten vytváří nové stránky, stávající nepřevádí.

Proč košík a pokladna nepatří do vyhledávačů

Košík je pro každého návštěvníka jiný a pro vyhledávač vždy prázdný. Prázdný košík ve výsledcích vyhledávání nikomu nepomůže. WooCommerce proto na stránky košík, pokladna a Můj účet samo vkládá noindex: vyhledávač smí stránku navštívit, ale nezařadí ji do výsledků vyhledávání. Ve zdrojovém kódu to vypadá takto:

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

SEO plugin nebo šablona může tento řádek přepsat. Málokdy je to záměr. V úkolu této lekce zkontrolujete, zda tam je.

Tytéž tři stránky také nepatří do mezipaměti stránek. WooCommerce k nim posílá hlavičky, které mezipaměti sdělují, že stránku nesmí ukládat. Jak zkontrolovat, že se Vaše mezipaměť tím řídí, probereme v lekci 6.4.

Co vidí návštěvník bez košíku

Otevřete-li stránku pokladny bez ničeho v košíku, stane se něco jiného, než když v něm zboží je:

• S bloky zobrazí stránka pokladny obvykle upozornění, že je košík prázdný, s tlačítkem zpět do obchodu.
• Se shortcodem Vás WooCommerce často přesměruje do košíku.

Obojí je normální. Kontrola v této lekci s tím počítá: program nikdy nic do košíku nevkládá a sleduje jen to, co uvidí návštěvník bez košíku.

V praxi: takto to vypadá ve WooCommerce

U jiných šablon a poskytovatelů hostingu to funguje podobně; liší se jen vzhled.

1. Přejděte do WooCommerce > Nastavení > Pokročilé (Advanced) a otevřete Nastavení stránky (Page setup). Poznamenejte si, která stránka je uvedena u Košíku, Pokladny, Můj účet a Obchodních podmínek.
2. V části Stránky klikněte na každou z těchto stránek a zkontrolujte, zda na ní je blok (nebo shortcode).
3. Otevřete stránku pokladny v editoru. Klikněte na blok Pokladna a prohlédněte si jeho části v zobrazení seznamu: kontaktní údaje, doručovací adresa, možnosti dopravy, možnosti platby, poznámka, podmínky, tlačítko.
4. Podívejte se v editoru bloku pokladny (a u samotných rozšíření), zda se tam nezobrazuje upozornění na rozšíření, která nejsou kompatibilní s bloky.
5. Otevřete košík v anonymním okně a zobrazte zdrojový kód (Ctrl+U): vyhledejte noindex.

Shrnutí

• WooCommerce přiděluje roli čtyřem stránkám (obchod, košík, pokladna, Můj účet) a navíc stránce s podmínkami; propojení je uloženo v nastavení, nikoli v názvu.
• Po stěhování, importu nebo změně šablony zkontrolujte propojení v Nastavení stránky.
• Nové obchody dostávají od WooCommerce 8.3 bloky; shortcody stále existují. Rozhodujte podle svých rozšíření a šablony.
• Bloky potřebují Store API; REST API neuzavírejte.
• Košík, pokladna a Můj účet dostávají od WooCommerce noindex a nepatří do mezipaměti.

Kvíz

Úkol

Úkol A2.2: Stránky Vašeho obchodu. Zadejte adresu svého (testovacího) obchodu a adresy svého košíku, stránky pokladny a stránky Můj účet (cestu, například /kosik/, nebo úplnou URL na stejném hostiteli). Program každou stránku jednou načte, bez cookies a bez vkládání čehokoli do košíku.

U každé stránky je výsledek v pořádku, pokud:

• stránka odpovídá přes https se stavem 200;
• HTML obsahuje znak WooCommerce: u košíku blok wp-block-woocommerce-cart nebo třídu body woocommerce-cart, u pokladny wp-block-woocommerce-checkout nebo woocommerce-checkout, u stránky Můj účet woocommerce-account nebo přihlašovací formulář WooCommerce;
• je přítomen noindex (meta robots nebo hlavička X-Robots-Tag).

Pokud stránka pokladny s prázdným košíkem přesměruje na košík, který jste zadali, je to také v pořádku.

Oranžová: chybí noindex (zkontrolujte, zda ho neodstraňuje SEO plugin nebo Vaše šablona); stránka používá shortcode místo bloku (nejde o chybu, ale vyvstává otázka, zda je to vědomá volba). Červená: chybový stav, například 404, stránka bez znaku WooCommerce (propojte správnou stránku v Nastavení stránky), přesměrování na jiného hostitele nebo http bez https.

Poté si pro sebe zapište, kterou podobu (bloky, nebo shortcode) používáte a proč.

Další čtení

• Bezplatný kurz WordPress 5.1: Šablony: blokové šablony a klasické šablony
• Bezplatný kurz WordPress 4.2: Stránky, příspěvky, rubriky a štítky
• Bezplatný kurz WordPress 4.1: Blokový editor
• WooCommerce 8.3: bloky jako výchozí pro 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/