Paginile magazinului și blocurile de finalizare a comenzii

Modulul 2: Instalare și configurare · Timp de citire: 9 minute

Obiectiv de învățare: După această lecție veți putea recunoaște paginile magazinului din WooCommerce și le veți putea asocia corect. Veți alege în cunoștință de cauză între blocuri și shortcode-uri pentru coș și finalizarea comenzii.

Noțiuni cheie: pagina magazinului, coș, finalizarea comenzii, Contul meu, pagina cu termeni și condiții, configurarea paginilor, blocuri, shortcode-uri, temă bazată pe blocuri, temă clasică, compatibilitatea extensiilor, noindex

Patru pagini cu un rol special

Un site WordPress este alcătuit din pagini și articole (cursul WordPress, lecția 4.2). WooCommerce adaugă produsele ca tip propriu de conținut și oferă câtorva pagini obișnuite un rol special. În lista de la Pagini, aceste pagini arată ca oricare alta, dar WooCommerce știe ce sarcină are fiecare pagină. Acest lucru este stabilit în setări, nu în numele sau adresa paginii.

Deoarece asocierea se află în setări, puteți da paginilor alt titlu și altă adresă. Theehuis Example numește coșul „Coșuleț”, la adresa /cosulet/, și funcționează, atâta timp cât pagina respectivă este setată drept coș la Configurare pagină.

Dacă asocierea nu este corectă, observați asta în locuri neașteptate. Câteva exemple frecvente:

• Cineva șterge pagina Coș pentru că „apărea de două ori”. După aceea, un vizitator ajunge pe o pagină de eroare după ce apasă Adaugă în coș, iar unele teme nu mai afișează coșul în antet.
• După o mutare sau un import, la Finalizare comandă este asociată o altă pagină decât cea care conține blocul de finalizare a comenzii. Vizitatorul vede o pagină goală și nu poate comanda.
• După ce asistentul este rulat a doua oară, apare o a doua pagină „Finalizare comandă 2”. O pagină este asociată, cealaltă apare în meniu.

De aceea, după fiecare modificare importantă (temă, mutare, import), verificați la Configurare pagină ce pagină este asociată și deschideți pagina respectivă.

Blocuri sau shortcode-uri

Coșul și finalizarea comenzii pot ajunge pe pagină în două moduri.

Shortcode-urile sunt metoda veche: pe pagină se află un cod scurt între paranteze drepte, cum ar fi [woocommerce_cart] și [woocommerce_checkout]. La afișare, WooCommerce îl înlocuiește cu formularul. Aspectul vine de la temă, iar foarte multe extensii au fost create ani la rând pentru această formă.

Blocurile sunt metoda nouă: pagina conține blocul Coș sau Finalizare comandă, alcătuit din blocuri mai mici (adresă, livrare, metodă de plată, sumar, butonul de comandă). Le vedeți și le editați în editorul de blocuri (cursul WordPress, lecția 4.1). Blocurile comunică cu serverul prin Store API (lecția 2.4): formularul funcționează direct în browser, fără ca pagina să fie reîncărcată de fiecare dată.

Începând cu WooCommerce 8.3 (noiembrie 2023), o instalare nouă primește blocurile. Un magazin existent care este actualizat păstrează ce avea. Shortcode-urile rămân disponibile.

Ce alegeți? Câteva întrebări vă ajută:

• Funcționează extensiile dumneavoastră cu blocurile? Aceasta este cea mai importantă întrebare. O extensie care adaugă un câmp la finalizarea comenzii (o dată de livrare, un cod de TVA, un mesaj de cadou) trebuie adaptată separat pentru blocuri. Pe pagina extensiei scrie de obicei dacă este „compatibilă cu blocul de finalizare a comenzii”. În editorul blocului de finalizare a comenzii, WooCommerce poate afișa o notificare despre extensiile active care nu sunt marcate ca fiind compatibile.
• Ce temă aveți? Blocurile se potrivesc cel mai bine cu o temă bazată pe blocuri (cursul WordPress, lecția 5.1). Funcționează și cu o temă clasică, dar atunci aspectul se potrivește mai puțin de la sine.
• Trebuie să modificați butonul de comandă? În blocuri, textul butonului se setează în editor. Acest lucru este util pentru regulile care se aplică în această privință (lecția 5.4).
• Doriți ca Store API să fie publică? Pentru blocuri, ea trebuie să fie accesibilă; un plugin de securitate care blochează REST API strică finalizarea comenzii.

Theehuis Example nu folosește extensii care adaugă câmpuri și are o temă bazată pe blocuri. Păstrează blocurile. Un alt magazin, cu un plugin pentru data de livrare care funcționează doar cu shortcode-ul, alege temporar shortcode-ul și verifică din nou la fiecare actualizare importantă a acelui plugin.

Dacă schimbați forma, faceți acest lucru în magazinul de test și apoi testați o comandă completă (lecția 4.5). La WooCommerce > Stare > Unelte, WooCommerce are o unealtă pentru a crea din nou paginile lipsă ale magazinului; aceasta creează pagini noi, nu le transformă pe cele existente.

De ce coșul și finalizarea comenzii nu își au locul în motoarele de căutare

Un coș este diferit pentru fiecare vizitator și mereu gol pentru un motor de căutare. Un coș gol în rezultatele căutării nu ajută pe nimeni. De aceea, WooCommerce pune singur un noindex pe paginile coș, finalizare comandă și Contul meu: motorul de căutare poate vizita pagina, dar nu o include în rezultatele căutării. În codul sursă îl vedeți astfel:

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

Un plugin SEO sau o temă poate suprascrie această linie. Rareori este intenționat. În exercițiul acestei lecții verificați dacă linia este prezentă.

Aceleași trei pagini nu au voie nici să ajungă în cache-ul de pagini. WooCommerce trimite pentru ele antete HTTP care le spun cache-urilor că nu au voie să păstreze pagina. Cum verificați dacă cache-ul dumneavoastră respectă acest lucru aflați în lecția 6.4.

Ce vede un vizitator fără coș

Dacă deschideți pagina de finalizare a comenzii fără nimic în coș, se întâmplă altceva decât atunci când aveți produse în el:

• Cu blocurile, pagina de finalizare a comenzii afișează de obicei un mesaj că coșul este gol, cu un buton de întoarcere la magazin.
• Cu shortcode-ul, WooCommerce vă redirecționează adesea către coș.

Ambele situații sunt normale. Verificarea din această lecție ține cont de acest lucru: programul nu pune niciodată nimic în coș și se uită doar la ce vede un vizitator fără coș.

În practică: așa arată în WooCommerce

La alte teme și alți furnizori de găzduire funcționează asemănător; doar aspectul diferă.

1. Accesați WooCommerce > Setări > Avansate (Advanced) și deschideți Configurare pagină (Page setup). Notați ce pagină este setată la Coș, Finalizare comandă, Contul meu și Termeni și condiții.
2. La Pagini, faceți clic pe fiecare dintre aceste pagini și verificați dacă blocul (sau shortcode-ul) se află pe ea.
3. Deschideți pagina de finalizare a comenzii în editor. Faceți clic pe blocul Finalizare comandă și examinați componentele în vizualizarea listă: datele de contact, adresa de livrare, opțiunile de livrare, opțiunile de plată, nota, termenii și condițiile, butonul.
4. Verificați în editorul blocului de finalizare a comenzii (și la extensiile propriu-zise) dacă apare o notificare despre extensii care nu sunt compatibile cu blocurile.
5. Deschideți coșul într-o fereastră privată și vizualizați codul sursă (Ctrl+U): căutați noindex.

Rezumat

• WooCommerce dă un rol unor patru pagini (magazin, coș, finalizare comandă, Contul meu), plus paginii cu termeni și condiții; asocierea se află în setări, nu în nume.
• După o mutare, un import sau o schimbare de temă, verificați asocierile la Configurare pagină.
• Începând cu WooCommerce 8.3, magazinele noi primesc blocurile; shortcode-urile există în continuare. Alegeți în funcție de extensiile și tema dumneavoastră.
• Blocurile au nevoie de Store API; nu blocați REST API.
• Coșul, finalizarea comenzii și Contul meu primesc de la WooCommerce un noindex și nu își au locul în cache.

Test (quiz)

Exercițiu

Exercițiul A2.2: Paginile magazinului dumneavoastră. Introduceți adresa magazinului dumneavoastră (de test) și adresele coșului, ale paginii de finalizare a comenzii și ale paginii Contul meu (calea, cum ar fi /cos/, sau URL-ul complet pe aceeași gazdă). Programul accesează fiecare pagină o singură dată, fără cookie-uri și fără să pună nimic în coș.

Pentru fiecare pagină, rezultatul este bun dacă:

• pagina răspunde prin https cu starea 200;
• codul HTML conține un element specific WooCommerce: pentru coș, blocul wp-block-woocommerce-cart sau clasa body woocommerce-cart; pentru finalizarea comenzii, wp-block-woocommerce-checkout sau woocommerce-checkout; pentru Contul meu, woocommerce-account sau un formular de autentificare WooCommerce;
• există un noindex (meta robots sau antetul HTTP X-Robots-Tag).

Dacă pagina de finalizare a comenzii, cu un coș gol, redirecționează către coșul pe care l-ați introdus, și acest lucru este bun.

Portocaliu: lipsește noindex (verificați dacă un plugin SEO sau tema îl elimină); pagina folosește shortcode-ul în locul blocului (nu este o eroare, dar întrebarea este dacă e o alegere conștientă). Roșu: o stare de eroare, cum ar fi 404, o pagină fără element specific WooCommerce (asociați pagina corectă la Configurare pagină), o redirecționare către altă gazdă sau http fără https.

Apoi notați pentru dumneavoastră ce formă folosiți (blocuri sau shortcode) și de ce.

Lecturi suplimentare

• Curs gratuit WordPress 5.1: Teme: teme cu blocuri și teme clasice
• Curs gratuit WordPress 4.2: Pagini, articole, categorii și etichete
• Curs gratuit WordPress 4.1: Editorul de blocuri
• WooCommerce 8.3: blocuri implicite pentru magazinele noi (developer.woocommerce.com, în engleză): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, în engleză): https://developer.woocommerce.com/docs/apis/store-api/