Parduotuvės puslapiai ir apmokėjimo blokai

2 modulis: Įdiegimas ir sąranka · Skaitymo laikas: 9 min.

Mokymosi tikslas: Po šios pamokos galėsite atpažinti WooCommerce parduotuvės puslapius ir teisingai juos susieti, o krepšeliui ir apmokėjimui sąmoningai pasirinksite blokus arba trumpuosius kodus.

Pagrindinės sąvokos: parduotuvės puslapis, krepšelis, apmokėjimas, Mano paskyra, taisyklių puslapis, puslapių nustatymai, blokai, trumpieji kodai (shortcodes), blokų tema, klasikinė tema, plėtinių suderinamumas, noindex

Keturi puslapiai su ypatingu vaidmeniu

WordPress svetainę sudaro puslapiai ir įrašai (WordPress kursas, pamoka 4.2). WooCommerce prideda prekes kaip atskirą įrašų tipą ir keliems įprastiems puslapiams suteikia ypatingą vaidmenį. Puslapių sąraše skiltyje Puslapiai jie atrodo kaip bet kuris kitas puslapis, tačiau WooCommerce žino, kuris puslapis kokią užduotį atlieka. Tai nurodyta nustatymuose, o ne puslapio pavadinime ar adrese.

Kadangi susiejimas yra nustatymuose, puslapiams galite suteikti kitą pavadinimą ir kitą adresą. Theehuis Example krepšelį vadina „Mandje“ ir jis yra adresu /mandje/. Tai veikia, kol šis puslapis skiltyje Puslapių nustatymai nurodytas kaip krepšelis.

Jei susiejimas sugenda, tai pastebėsite netikėtose vietose. Keli dažni pavyzdžiai:

• Kas nors ištrina puslapį Krepšelis, nes „jis buvo du kartus“. Po to lankytojas, paspaudęs Į krepšelį, patenka į klaidos puslapį, o kai kurios temos nebeberodo krepšelio antraštėje.
• Po perkėlimo ar importo prie Apmokėjimas susietas kitas puslapis, o ne tas, kuriame yra apmokėjimo blokas. Lankytojas mato tuščią puslapį ir negali užsisakyti.
• Antrą kartą paleidus vedlį atsiranda antras puslapis „Apmokėjimas-2“. Vienas puslapis susietas, kitas yra meniu.

Todėl po kiekvieno didesnio pakeitimo (tema, perkėlimas, importas) skiltyje Puslapių nustatymai patikrinkite, kuris puslapis susietas, ir atidarykite tą puslapį.

Blokai ar trumpieji kodai

Krepšelis ir apmokėjimas į puslapį gali patekti dviem būdais.

Trumpieji kodai yra senasis būdas: puslapyje yra trumpas kodas laužtiniuose skliaustuose, pavyzdžiui, [woocommerce_cart] ir [woocommerce_checkout]. Rodydamas puslapį, WooCommerce juos pakeičia forma. Išvaizdą lemia tema, o labai daug plėtinių ilgus metus buvo kuriami būtent šiam būdui.

Blokai yra naujasis būdas: puslapyje yra blokas Krepšelis arba Apmokėjimas, sudarytas iš mažesnių blokų (adresas, pristatymas, mokėjimo būdas, apžvalga, užsakymo mygtukas). Juos matote ir redaguojate blokų redaktoriuje (WordPress kursas, pamoka 4.1). Blokai su serveriu bendrauja per Store API (pamoka 2.4): forma veikia tiesiai naršyklėje, puslapio nereikia kaskart įkelti iš naujo.

Nuo WooCommerce 8.3 (2023 m. lapkritis) naujas įdiegimas gauna blokus. Atnaujinama esama parduotuvė pasilieka tai, ką turėjo. Trumpieji kodai ir toliau prieinami.

Ką pasirinkti? Padeda keli klausimai:

• Ar Jūsų plėtiniai veikia su blokais? Tai svarbiausias klausimas. Plėtinys, kuris prideda lauką prie apmokėjimo (pristatymo datą, PVM mokėtojo kodą, dovanos žinutę), turi būti atskirai pritaikytas blokams. Plėtinio puslapyje paprastai nurodyta, ar jis „suderinamas su apmokėjimo bloku“. Apmokėjimo bloko redaktoriuje WooCommerce gali rodyti pranešimą apie aktyvius plėtinius, kurie nepažymėti kaip suderinami.
• Kokią temą naudojate? Blokams geriausiai tinka blokų tema (WordPress kursas, pamoka 5.1). Su klasikine tema jie taip pat veikia, tačiau išvaizda savaime mažiau dera.
• Ar reikia keisti užsakymo mygtuką? Naudodami blokus, mygtuko tekstą nustatote redaktoriuje. Tai patogu dėl taisyklių, kurios tam taikomos (pamoka 5.4).
• Ar norite, kad Store API būtų vieša? Naudojant blokus ji turi būti pasiekiama; saugos įskiepis, uždarantis REST API, sugadina apmokėjimą.

Theehuis Example nenaudoja plėtinių, kurie prideda laukų, ir turi blokų temą. Ji palieka blokus. Kita parduotuvė su pristatymo datos įskiepiu, kuris veikia tik su trumpuoju kodu, laikinai renkasi trumpąjį kodą ir po kiekvieno didesnio to įskiepio atnaujinimo vėl patikrina.

Jei keičiate būdą, darykite tai bandomojoje parduotuvėje ir po to išbandykite visą užsakymą (pamoka 4.5). WooCommerce skiltyje WooCommerce > Būsena > Įrankiai turi įrankį trūkstamiems parduotuvės puslapiams iš naujo sukurti; jis sukuria naujus puslapius, bet esamų nekonvertuoja.

Kodėl krepšeliui ir apmokėjimui ne vieta paieškos sistemose

Krepšelis kiekvienam lankytojui skiriasi, o paieškos sistemai jis visada tuščias. Tuščias krepšelis paieškos rezultatuose niekam nepadeda. Todėl WooCommerce puslapiams krepšelis, apmokėjimas ir Mano paskyra pats nustato noindex: paieškos sistema gali puslapį aplankyti, bet neįtraukia jo į paieškos rezultatus. Išeities kode tai matyti taip:

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

SEO įskiepis ar tema gali šią eilutę perrašyti. Retai tai daroma tyčia. Šios pamokos užduotyje patikrinsite, ar ji yra.

Tų pačių trijų puslapių taip pat negalima laikyti puslapių podėlyje. WooCommerce kartu siunčia antraštes, kurios nurodo podėliams, kad puslapio saugoti negalima. Kaip patikrinti, ar Jūsų podėlis to laikosi, sužinosite pamokoje 6.4.

Ką mato lankytojas tuščiu krepšeliu

Jei atidarote apmokėjimo puslapį neturėdami nieko krepšelyje, nutinka kitaip nei su prekėmis jame:

• Naudojant blokus, apmokėjimo puslapis paprastai rodo pranešimą, kad krepšelis tuščias, ir mygtuką grįžti į parduotuvę.
• Naudojant trumpąjį kodą, WooCommerce dažnai nukreipia į krepšelį.

Abu atvejai yra normalūs. Šios pamokos patikra į tai atsižvelgia: programa niekada nieko nededa į krepšelį ir žiūri tik į tai, ką mato lankytojas tuščiu krepšeliu.

Praktikoje: taip tai atrodo WooCommerce

Su kitomis temomis ir pas kitus talpinimo paslaugų teikėjus tai veikia panašiai; skiriasi tik išvaizda.

1. Eikite į WooCommerce > Nustatymai > Papildoma (Advanced) ir atidarykite Puslapių nustatymai (Page setup). Užsirašykite, kuris puslapis nurodytas prie Krepšelis, Apmokėjimas, Mano paskyra ir Taisyklės ir sąlygos.
2. Skiltyje Puslapiai spustelėkite kiekvieną iš šių puslapių ir patikrinkite, ar jame yra blokas (arba trumpasis kodas).
3. Atidarykite apmokėjimo puslapį redaktoriuje. Spustelėkite bloką Apmokėjimas ir sąrašo rodinyje peržiūrėkite jo dalis: kontaktiniai duomenys, pristatymo adresas, pristatymo parinktys, mokėjimo parinktys, pastaba, taisyklės, mygtukas.
4. Apmokėjimo bloko redaktoriuje (ir prie pačių plėtinių) patikrinkite, ar yra pranešimas apie plėtinius, nesuderinamus su blokais.
5. Atidarykite krepšelį privačiame lange ir peržiūrėkite išeities kodą (Ctrl+U): ieškokite noindex.

Santrauka

• WooCommerce keturiems puslapiams suteikia vaidmenį (parduotuvė, krepšelis, apmokėjimas, Mano paskyra) ir dar taisyklių puslapiui; susiejimas nurodytas nustatymuose, ne pavadinime.
• Po perkėlimo, importo ar temos pakeitimo patikrinkite susiejimus skiltyje Puslapių nustatymai.
• Nuo WooCommerce 8.3 naujos parduotuvės gauna blokus; trumpieji kodai vis dar yra. Rinkitės pagal savo plėtinius ir temą.
• Blokams reikia Store API; neuždarykite REST API.
• Krepšeliui, apmokėjimui ir Mano paskyra WooCommerce nustato noindex, ir šie puslapiai neturi patekti į podėlį.

Testas (quiz)

Užduotis

Užduotis A2.2: Jūsų parduotuvės puslapiai. Įveskite savo (bandomosios) parduotuvės adresą ir krepšelio, apmokėjimo puslapio bei Mano paskyra adresus (kelią, pavyzdžiui, /winkelwagen/, arba visą URL tame pačiame serveryje). Programa kiekvieną puslapį užklausia vieną kartą, be slapukų ir nieko nedėdama į krepšelį.

Kiekvienas puslapis yra tvarkingas, jei:

• puslapis atsako per https su būsenos kodu 200;
• HTML yra WooCommerce požymis: krepšeliui blokas wp-block-woocommerce-cart arba body klasė woocommerce-cart, apmokėjimui wp-block-woocommerce-checkout arba woocommerce-checkout, Mano paskyra woocommerce-account arba WooCommerce prisijungimo forma;
• yra noindex (meta robots arba antraštė X-Robots-Tag).

Jei apmokėjimo puslapis esant tuščiam krepšeliui nukreipia į Jūsų įvestą krepšelio adresą, tai taip pat tvarkinga.

Oranžinė: nėra noindex (patikrinkite, ar jo nepašalina SEO įskiepis ar Jūsų tema); puslapis naudoja trumpąjį kodą vietoj bloko (tai ne klaida, bet verta paklausti, ar tai sąmoningas pasirinkimas). Raudona: klaidos būsena, pavyzdžiui, 404, puslapis be WooCommerce požymio (susiekite teisingą puslapį skiltyje Puslapių nustatymai), nukreipimas į kitą serverį arba http be https.

Po to užsirašykite sau, kurį būdą (blokus ar trumpąjį kodą) naudojate ir kodėl.

Platesniam skaitymui

• Nemokamas WordPress kursas 5.1: Temos: blokų temos ir klasikinės temos
• Nemokamas WordPress kursas 4.2: Puslapiai, įrašai, kategorijos ir žymos
• Nemokamas WordPress kursas 4.1: Blokų redaktorius
• WooCommerce 8.3: blokai pagal numatytuosius nustatymus naujoms parduotuvėms (developer.woocommerce.com, anglų k.): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, anglų k.): https://developer.woocommerce.com/docs/apis/store-api/