Strony sklepu i bloki koszyka i zamówienia

Moduł 2: Instalacja i konfiguracja · Czas czytania: 9 min

Cel lekcji: Po tej lekcji będą Państwo potrafili rozpoznać strony sklepu WooCommerce i prawidłowo je przypisać, a także świadomie wybrać między blokami a shortcodami dla koszyka i zamówienia.

Kluczowe pojęcia: strona sklepu, koszyk, zamówienie, Moje konto, strona z warunkami, ustawienia stron, bloki, shortcody, motyw blokowy, motyw klasyczny, zgodność rozszerzeń, noindex

Cztery strony o szczególnej roli

Witryna WordPress składa się ze stron i wpisów (kurs WordPress, lekcja 4.2). WooCommerce dodaje produkty jako osobny typ treści i nadaje kilku zwykłym stronom szczególną rolę. Na liście w sekcji Strony wyglądają one jak każda inna strona, ale WooCommerce wie, która strona pełni jakie zadanie. Informacja ta znajduje się w ustawieniach, a nie w nazwie czy adresie strony.

Ponieważ przypisanie znajduje się w ustawieniach, mogą Państwo nadać stronom inny tytuł i inny adres. Theehuis Example nazywa koszyk "Mandje" pod adresem /mandje/ i to działa, o ile ta strona jest ustawiona jako koszyk w Ustawieniach stron.

Jeśli przypisanie się zepsuje, widać to w nieoczekiwanych miejscach. Kilka częstych przykładów:

• Ktoś usuwa stronę Koszyk, bo "była zdublowana". Potem odwiedzający po kliknięciu Dodaj do koszyka trafia na stronę błędu, a niektóre motywy przestają pokazywać koszyk w nagłówku.
• Po przeprowadzce lub imporcie do Zamówienia przypisana jest inna strona niż ta z blokiem zamówienia. Odwiedzający widzi pustą stronę i nie może złożyć zamówienia.
• Po ponownym uruchomieniu kreatora powstaje druga strona "Zamówienie-2". Jedna strona jest przypisana, druga jest w menu.

Dlatego po każdej dużej zmianie (motyw, przeprowadzka, import) prosimy sprawdzić w Ustawieniach stron, która strona jest przypisana, i przejść do tej strony.

Bloki czy shortcody

Koszyk i zamówienie mogą trafić na stronę na dwa sposoby.

Shortcody to starszy sposób: na stronie znajduje się krótki kod w nawiasach kwadratowych, na przykład [woocommerce_cart] i [woocommerce_checkout]. Przy wyświetlaniu WooCommerce zastępuje go formularzem. Wygląd pochodzi z motywu, a bardzo wiele rozszerzeń przez lata tworzono właśnie z myślą o tej formie.

Bloki to nowszy sposób: strona zawiera blok Koszyk lub Zamówienie, zbudowany z mniejszych bloków (adres, wysyłka, metoda płatności, podsumowanie, przycisk zamówienia). Widzą je Państwo i edytują w edytorze blokowym (kurs WordPress, lekcja 4.1). Bloki komunikują się z serwerem przez Store API (lekcja 2.4): formularz działa bezpośrednio w przeglądarce, bez każdorazowego przeładowania strony.

Od WooCommerce 8.3 (listopad 2023) nowa instalacja otrzymuje bloki. Istniejący sklep, który się aktualizuje, zachowuje to, co miał. Shortcody pozostają dostępne.

Co wybrać? Pomocnych jest kilka pytań:

• Czy Państwa rozszerzenia działają z blokami? To najważniejsze pytanie. Rozszerzenie, które dodaje pole do zamówienia (datę dostawy, numer VAT, wiadomość do prezentu), musi być osobno dostosowane do bloków. Na stronie rozszerzenia zwykle podano, czy jest "zgodne z blokiem zamówienia". W edytorze bloku zamówienia WooCommerce może wyświetlić komunikat o aktywnych rozszerzeniach, które nie są oznaczone jako zgodne.
• Jakiego motywu Państwo używają? Z motywem blokowym (kurs WordPress, lekcja 5.1) bloki pasują najlepiej. Z motywem klasycznym również działają, ale wygląd mniej samoczynnie się zgadza.
• Czy muszą Państwo dostosować przycisk zamówienia? W blokach tekst przycisku ustawia się w edytorze. Jest to wygodne ze względu na obowiązujące w tej kwestii zasady (lekcja 5.4). W Polsce przycisk powinien zawierać sformułowanie „zamówienie z obowiązkiem zapłaty” lub inne jednoznaczne sformułowanie.
• Czy Store API ma być publicznie dostępne? Przy blokach musi być osiągalne; wtyczka bezpieczeństwa, która blokuje REST API, psuje składanie zamówień.

Theehuis Example nie używa rozszerzeń dodających pola i ma motyw blokowy. Zostaje przy blokach. Inny sklep z wtyczką daty dostawy, która działa tylko z shortcodem, tymczasowo wybiera shortcode i przy każdej większej aktualizacji tej wtyczki sprawdza sytuację ponownie.

Jeśli zmieniają Państwo formę, prosimy zrobić to w sklepie testowym, a następnie przetestować całe zamówienie (lekcja 4.5). W WooCommerce > Status > Narzędzia WooCommerce ma narzędzie do ponownego utworzenia brakujących stron sklepu; tworzy ono nowe strony, nie przekształca istniejących.

Dlaczego koszyk i zamówienie nie powinny trafiać do wyszukiwarek

Koszyk wygląda inaczej dla każdego odwiedzającego, a dla wyszukiwarki jest zawsze pusty. Pusty koszyk w wynikach wyszukiwania nikomu nie pomaga. Dlatego WooCommerce sam ustawia na stronach koszyka, zamówienia i Moje konto noindex: wyszukiwarka może odwiedzić stronę, ale nie umieszcza jej w wynikach wyszukiwania. W kodzie źródłowym wygląda to tak:

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

Wtyczka SEO lub motyw może nadpisać tę linię. Rzadko jest to zamierzone. W zadaniu do tej lekcji sprawdzą Państwo, czy ta linia jest obecna.

Te same trzy strony nie powinny też trafiać do pamięci podręcznej stron. WooCommerce wysyła z nimi nagłówki, które informują pamięci podręczne, że nie mogą przechowywać strony. Jak sprawdzić, czy Państwa cache się do tego stosuje, omawiamy w lekcji 6.4.

Co widzi odwiedzający z pustym koszykiem

Jeśli otworzą Państwo stronę zamówienia bez niczego w koszyku, dzieje się coś innego niż wtedy, gdy koszyk zawiera produkty:

• Przy blokach strona zamówienia zwykle pokazuje komunikat, że koszyk jest pusty, z przyciskiem powrotu do sklepu.
• Przy shortcodzie WooCommerce często przekierowuje do koszyka.

Oba zachowania są normalne. Sprawdzenie w tej lekcji bierze to pod uwagę: program nigdy niczego nie dodaje do koszyka i patrzy wyłącznie na to, co widzi odwiedzający z pustym koszykiem.

W praktyce: tak to wygląda w WooCommerce

Przy innych motywach i u innych dostawców hostingu działa to podobnie; różni się tylko wygląd.

1. Prosimy przejść do WooCommerce > Ustawienia > Zaawansowane (Advanced) i otworzyć Ustawienia stron (Page setup). Prosimy zanotować, która strona jest ustawiona przy Koszyk, Zamówienie, Moje konto oraz Warunki i zasady.
2. W sekcji Strony prosimy kliknąć każdą z tych stron i sprawdzić, czy jest na niej blok (lub shortcode).
3. Prosimy otworzyć stronę zamówienia w edytorze. Prosimy kliknąć blok Zamówienie i obejrzeć jego elementy w widoku listy: dane kontaktowe, adres wysyłki, opcje wysyłki, opcje płatności, uwagi, warunki, przycisk.
4. Prosimy sprawdzić w edytorze bloku zamówienia (oraz przy samych rozszerzeniach), czy widnieje komunikat o rozszerzeniach niezgodnych z blokami.
5. Prosimy otworzyć koszyk w oknie prywatnym i wyświetlić kod źródłowy (Ctrl+U): proszę wyszukać noindex.

Podsumowanie

• WooCommerce nadaje rolę czterem stronom (sklep, koszyk, zamówienie, Moje konto) oraz stronie z warunkami; przypisanie znajduje się w ustawieniach, a nie w nazwie.
• Po przeprowadzce, imporcie lub zmianie motywu należy sprawdzić przypisania w Ustawieniach stron.
• Od WooCommerce 8.3 nowe sklepy otrzymują bloki; shortcody nadal istnieją. Wyboru dokonują Państwo na podstawie rozszerzeń i motywu.
• Bloki potrzebują Store API; prosimy nie blokować REST API.
• Koszyk, zamówienie i Moje konto otrzymują od WooCommerce noindex i nie powinny trafiać do pamięci podręcznej.

Quiz

Zadanie

Zadanie A2.2: Strony Państwa sklepu. Prosimy wpisać adres swojego sklepu (testowego) oraz adresy koszyka, strony zamówienia i Moje konto (ścieżkę, na przykład /koszyk/, lub pełny URL na tym samym hoście). Program pobiera każdą stronę jeden raz, bez plików cookie i bez dodawania czegokolwiek do koszyka.

Dla każdej strony wynik jest dobry, jeśli:

• strona odpowiada przez https ze statusem 200;
• HTML zawiera znacznik WooCommerce: dla koszyka blok wp-block-woocommerce-cart lub klasę body woocommerce-cart, dla zamówienia wp-block-woocommerce-checkout lub woocommerce-checkout, dla Moje konto woocommerce-account lub formularz logowania WooCommerce;
• występuje noindex (meta robots lub nagłówek X-Robots-Tag).

Jeśli strona zamówienia przy pustym koszyku przekierowuje do wpisanego przez Państwa koszyka, to również jest dobrze.

Pomarańczowy: brak noindex (prosimy sprawdzić, czy usuwa go wtyczka SEO lub motyw); strona używa shortcodu zamiast bloku (nie jest to błąd, ale warto się zastanowić, czy to świadomy wybór). Czerwony: status błędu, na przykład 404, strona bez znacznika WooCommerce (prosimy przypisać właściwą stronę w Ustawieniach stron), przekierowanie na inny host albo http bez https.

Następnie prosimy zapisać dla siebie, której formy (bloki czy shortcode) Państwo używają i dlaczego.

Dalsza lektura

• Darmowy kurs WordPress 5.1: Motywy: motywy blokowe i motywy klasyczne
• Darmowy kurs WordPress 4.2: Strony, wpisy, kategorie i tagi
• Darmowy kurs WordPress 4.1: Edytor blokowy
• WooCommerce 8.3: bloki domyślnie dla nowych sklepów (developer.woocommerce.com, po angielsku): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, po angielsku): https://developer.woocommerce.com/docs/apis/store-api/