Veikala lapas un pasūtījuma bloki

2. modulis: Instalēšana un iestatīšana · Lasīšanas laiks: 9 min.

Mērķis: Pēc šīs nodarbības Jūs varēsiet atpazīt WooCommerce veikala lapas un pareizi tās piesaistīt, kā arī apzināti izvēlēties starp blokiem un īskodiem grozam un pasūtījuma veikšanai.

Pamatjēdzieni: veikala lapa, grozs, pasūtījuma veikšana, Mans konts, noteikumu lapa, lapu iestatījumi, bloki, īskodi, bloku tēma, klasiskā tēma, paplašinājumu saderība, noindex

Četras lapas ar īpašu lomu

WordPress vietne sastāv no lapām un ierakstiem (WordPress kurss, nodarbība 4.2). WooCommerce pievieno produktus kā atsevišķu ierakstu tipu un dažām parastām lapām piešķir īpašu lomu. Sadaļas Lapas sarakstā šīs lapas izskatās tāpat kā jebkura cita lapa, taču WooCommerce zina, kurai lapai kāds uzdevums. Tas ir norādīts iestatījumos, nevis lapas nosaukumā vai adresē.

Tā kā piesaiste ir iestatījumos, Jūs varat lapām dot citu nosaukumu un citu adresi. Theehuis Example grozu sauc par "Mandje" adresē /mandje/, un tas darbojas, kamēr šī lapa sadaļā Lapu iestatīšana ir norādīta kā grozs.

Ja piesaiste ir nepareiza, Jūs to pamanīsiet negaidītās vietās. Daži bieži sastopami piemēri:

• Kāds izdzēš lapu Grozs, jo "tā bija divreiz". Pēc tam apmeklētājs pēc pogas Pievienot grozam nonāk kļūdas lapā, un dažas tēmas galvenē vairs nerāda grozu.
• Pēc pārcelšanas vai importēšanas pie Veikt pasūtījumu ir piesaistīta cita lapa, nevis tā, kurā ir pasūtījuma bloks. Apmeklētājs redz tukšu lapu un nevar pasūtīt.
• Pēc vedņa atkārtotas palaišanas rodas otra lapa "Afrekenen-2". Viena lapa ir piesaistīta, otra ir izvēlnē.

Tāpēc pēc katras lielas izmaiņas (tēma, pārcelšana, importēšana) sadaļā Lapu iestatīšana pārbaudiet, kura lapa ir piesaistīta, un atveriet šo lapu.

Bloki vai īskodi

Grozs un pasūtījuma veikšana lapā var parādīties divos veidos.

Īskodi ir vecais veids: lapā ir īss kods kvadrātiekavās, piemēram, [woocommerce_cart] un [woocommerce_checkout]. Attēlojot lapu, WooCommerce to aizstāj ar veidlapu. Noformējumu nosaka tēma, un ļoti daudzi paplašinājumi gadiem ilgi ir veidoti tieši šim veidam.

Bloki ir jaunais veids: lapā ir bloks Grozs vai Veikt pasūtījumu, kas sastāv no mazākiem blokiem (adrese, piegāde, maksājuma veids, pārskats, pasūtījuma poga). Jūs tos redzat un rediģējat bloku redaktorā (WordPress kurss, nodarbība 4.1). Bloki sazinās ar serveri, izmantojot Store API (nodarbība 2.4): veidlapa darbojas tieši pārlūkā, katru reizi nepārlādējot lapu.

Kopš WooCommerce 8.3 (2023. gada novembris) jauna instalācija saņem blokus. Esošs veikals, kas tiek atjaunināts, saglabā to, kas tam bija. Īskodi joprojām ir pieejami.

Ko izvēlēties? Palīdz daži jautājumi:

• Vai Jūsu paplašinājumi darbojas ar blokiem? Tas ir svarīgākais jautājums. Paplašinājums, kas pasūtījuma veikšanai pievieno lauku (piegādes datumu, PVN maksātāja numuru, dāvanas ziņu), blokiem ir jāpielāgo atsevišķi. Paplašinājuma lapā parasti ir norādīts, vai tas ir "saderīgs ar pasūtījuma bloku". Pasūtījuma bloka redaktorā WooCommerce var parādīt paziņojumu par aktīviem paplašinājumiem, kas nav atzīmēti kā saderīgi.
• Kāda Jums ir tēma? Ar bloku tēmu (WordPress kurss, nodarbība 5.1) bloki der vislabāk. Ar klasisko tēmu tie arī darbojas, taču noformējums tad mazāk atbilst pats no sevis.
• Vai Jums jāpielāgo pasūtījuma poga? Blokos pogas tekstu Jūs iestatāt redaktorā. Tas ir ērti, ņemot vērā noteikumus, kas uz to attiecas (nodarbība 5.4). Latvijā der, piemēram, “pasūtījums ar pienākumu maksāt” vai cits nepārprotams formulējums.
• Vai vēlaties, lai Store API būtu publiski pieejams? Blokiem tam jābūt sasniedzamam; drošības spraudnis, kas slēdz REST API, sabojā pasūtījuma veikšanu.

Theehuis Example neizmanto paplašinājumus, kas pievieno laukus, un tam ir bloku tēma. Tas saglabā blokus. Cits veikals ar piegādes datuma spraudni, kas darbojas tikai ar īskodu, uz laiku izvēlas īskodu un pēc katra lielāka šī spraudņa atjauninājuma pārbauda vēlreiz.

Ja maināt veidu, dariet to savā testa veikalā un pēc tam pārbaudiet visu pasūtījumu (nodarbība 4.5). WooCommerce sadaļā WooCommerce > Statuss > Rīki ir rīks trūkstošo veikala lapu atkārtotai izveidei; tas izveido jaunas lapas, bet nepārveido esošās.

Kāpēc grozam un pasūtījuma lapai nav vietas meklētājprogrammās

Grozs katram apmeklētājam ir citāds, un meklētājprogrammai tas vienmēr ir tukšs. Tukšs grozs meklēšanas rezultātos nevienam nepalīdz. Tāpēc WooCommerce pats lapām grozs, pasūtījuma veikšana un Mans konts pievieno noindex: meklētājprogramma drīkst lapu apmeklēt, bet neiekļauj to meklēšanas rezultātos. Pirmkodā tas izskatās šādi:

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

SEO spraudnis vai tēma var šo rindu pārrakstīt. Tas reti ir domāts. Šīs nodarbības uzdevumā Jūs pārbaudāt, vai tā ir.

Šīs pašas trīs lapas arī nedrīkst nonākt lapu kešatmiņā. WooCommerce tām pievieno galvenes, kas kešatmiņām norāda, ka lapu nedrīkst saglabāt. Kā pārbaudīt, vai Jūsu kešatmiņa to ievēro, aplūkosim nodarbībā 6.4.

Ko redz apmeklētājs bez groza satura

Ja atverat pasūtījuma lapu, kad grozā nekā nav, notiek kas cits nekā tad, ja grozā ir preces:

• Ar blokiem pasūtījuma lapa parasti rāda paziņojumu, ka grozs ir tukšs, ar pogu atpakaļ uz veikalu.
• Ar īskodu WooCommerce Jūs bieži pāradresē uz grozu.

Abi gadījumi ir normāli. Šīs nodarbības pārbaude to ņem vērā: programma nekad neko neievieto Jūsu grozā un skatās tikai to, ko redz apmeklētājs ar tukšu grozu.

Praksē: kā tas izskatās WooCommerce

Ar citām tēmām un hostinga pakalpojumu sniedzējiem tas darbojas līdzīgi; atšķiras tikai noformējums.

1. Atveriet WooCommerce > Iestatījumi > Uzlabots (Advanced) un atveriet Lapu iestatīšana (Page setup). Pierakstiet, kura lapa ir norādīta pie Grozs, Veikt pasūtījumu, Mans konts un Noteikumi un nosacījumi.
2. Sadaļā Lapas noklikšķiniet uz katras no šīm lapām un pārbaudiet, vai tajā ir bloks (vai īskods).
3. Atveriet pasūtījuma lapu redaktorā. Noklikšķiniet uz bloka Veikt pasūtījumu un aplūkojiet tā daļas saraksta skatā: kontaktinformācija, piegādes adrese, piegādes iespējas, maksājuma iespējas, piezīme, noteikumi, poga.
4. Pasūtījuma bloka redaktorā (un pie pašiem paplašinājumiem) pārbaudiet, vai nav paziņojuma par paplašinājumiem, kas nav saderīgi ar blokiem.
5. Atveriet grozu privātā logā un apskatiet pirmkodu (Ctrl+U): meklējiet noindex.

Kopsavilkums

• WooCommerce četrām lapām piešķir lomu (veikals, grozs, pasūtījuma veikšana, Mans konts), kā arī noteikumu lapai; piesaiste ir iestatījumos, nevis nosaukumā.
• Pēc pārcelšanas, importēšanas vai tēmas maiņas pārbaudiet piesaistes sadaļā Lapu iestatīšana.
• Jauni veikali kopš WooCommerce 8.3 saņem blokus; īskodi joprojām pastāv. Izvēlieties, ņemot vērā savus paplašinājumus un tēmu.
• Blokiem ir vajadzīgs Store API; neslēdziet REST API.
• Grozam, pasūtījuma veikšanai un lapai Mans konts WooCommerce piešķir noindex, un tās nedrīkst nonākt kešatmiņā.

Tests (quiz)

Uzdevums

Uzdevums A2.2: Jūsu veikala lapas. Ievadiet sava (testa) veikala adresi un sava groza, pasūtījuma lapas un lapas Mans konts adreses (ceļu, piemēram, /grozs/, vai pilnu URL tajā pašā resursdatorā). Programma katru lapu pieprasa vienu reizi, bez sīkdatnēm un neko neievietojot grozā.

Katra lapa ir pareiza, ja:

• lapa atbild caur https ar statusu 200;
• HTML satur WooCommerce pazīmi: grozam bloks wp-block-woocommerce-cart vai body klase woocommerce-cart, pasūtījuma veikšanai wp-block-woocommerce-checkout vai woocommerce-checkout, lapai Mans konts woocommerce-account vai WooCommerce pieteikšanās veidlapa;
• ir noindex (meta robots vai galvene X-Robots-Tag).

Ja pasūtījuma lapa ar tukšu grozu pāradresē uz Jūsu ievadīto grozu, arī tas ir pareizi.

Oranža: nav noindex (pārbaudiet, vai to neizņem SEO spraudnis vai Jūsu tēma); lapa izmanto īskodu bloka vietā (tā nav kļūda, taču jautājums ir, vai tā ir apzināta izvēle). Sarkana: kļūdas statuss, piemēram, 404, lapa bez WooCommerce pazīmes (piesaistiet pareizo lapu sadaļā Lapu iestatīšana), pāradresācija uz citu resursdatoru vai http bez https.

Pēc tam pierakstiet sev, kuru veidu (blokus vai īskodu) izmantojat un kāpēc.

Papildu lasāmviela

• Bezmaksas WordPress kurss 5.1: Tēmas: bloku tēmas un klasiskās tēmas
• Bezmaksas WordPress kurss 4.2: Lapas, ziņas, kategorijas un tagi
• Bezmaksas WordPress kurss 4.1: Bloku redaktors
• WooCommerce 8.3: bloki pēc noklusējuma jauniem veikaliem (developer.woocommerce.com, angļu valodā): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, angļu valodā): https://developer.woocommerce.com/docs/apis/store-api/