Poelehed ja kassaplokid

Moodul 2: Paigaldamine ja seadistamine · Lugemisaeg: 9 minutit

Õpieesmärk: Pärast seda õppetundi tunned ära WooCommerce’i poelehed ja oskad neid õigesti siduda. Samuti valid teadlikult ostukorvi ja kassa jaoks plokkide ja lühikoodide vahel.

Põhimõisted: poeleht, ostukorv, kassa, Minu konto, tingimuste leht, lehtede seadistus (Page setup), plokid, lühikoodid (shortcodes), plokiteema, klassikaline teema, laienduste ühilduvus, noindex

Neli erilise rolliga lehte

WordPressi sait koosneb lehtedest ja postitustest (WordPressi kursus, õppetund 4.2). WooCommerce lisab tooted eraldi postitusetüübina ja annab mõnele tavalisele lehele erilise rolli. Lehtede loendis näevad need välja nagu iga teine leht, kuid WooCommerce teab, millisel lehel on milline ülesanne. See on kirjas sätetes, mitte lehe nimes ega aadressis.

Kuna seos on sätetes, võid lehtedele anda teise pealkirja ja teise aadressi. Theehuis Example nimetab oma ostukorvi „Mandje“ (hollandi keeles „korvike“) aadressil /mandje/ ja see töötab, kui see leht on Page setup all ostukorviks määratud.

Kui seos läheb sassi, märkad seda ootamatutes kohtades. Mõned sagedased näited:

• Keegi kustutab lehe Ostukorv, sest see „oli topelt“. Pärast seda jõuab külastaja nupu Lisa ostukorvi järel vealehele ja mõni teema ei näita päises enam ostukorvi.
• Pärast kolimist või importi on Kassa juures seotud teine leht kui see, millel on kassaplokk. Külastaja näeb tühja lehte ega saa tellida.
• Pärast viisardi teistkordset käivitamist tekib teine leht „Kassa-2“. Üks leht on seotud, teine on menüüs.

Seepärast kontrolli pärast iga suuremat muudatust (teema, kolimine, import) Page setup all, milline leht on seotud, ja ava see leht.

Plokid või lühikoodid

Ostukorv ja kassa saavad lehele jõuda kahel viisil.

Lühikoodid on vana viis: lehel on nurksulgudes lühike kood, näiteks [woocommerce_cart] ja [woocommerce_checkout]. Lehe kuvamisel asendab WooCommerce selle vormiga. Kujundus tuleb teemast ja väga paljud laiendused on aastaid tehtud just selle kuju jaoks.

Plokid on uus viis: lehel on plokk Ostukorv või Kassa, mis koosneb väiksematest plokkidest (aadress, tarne, makseviis, ülevaade, tellimisnupp). Näed ja muudad neid plokiredaktoris (WordPressi kursus, õppetund 4.1). Plokid suhtlevad serveriga Store API kaudu (õppetund 2.4): vorm töötab otse brauseris, ilma et leht iga kord uuesti laadiks.

Alates WooCommerce 8.3-st (november 2023) saab uus paigaldus plokid. Olemasolev pood, mida uuendatakse, jääb selle juurde, mis tal oli. Lühikoodid on endiselt saadaval.

Kumba valida? Abiks on mõned küsimused:

• Kas su laiendused töötavad plokkidega? See on kõige olulisem küsimus. Laiendus, mis lisab kassasse välja (tarnekuupäev, KMKR number, kingisõnum), peab olema plokkide jaoks eraldi kohandatud. Laienduse lehel on tavaliselt kirjas, kas see „ühildub kassaplokiga“. Kassaploki redaktoris võib WooCommerce näidata teadet aktiivsete laienduste kohta, mida pole ühilduvaks märgitud.
• Milline teema sul on? Plokiteemaga (WordPressi kursus, õppetund 5.1) sobivad plokid kõige paremini. Klassikalise teemaga töötavad need samuti, kuid kujundus ei sobitu siis nii iseenesest.
• Kas pead tellimisnuppu muutma? Plokkide puhul seadistad nupu teksti redaktoris. Selle kohta kehtivate reeglite (õppetund 5.4) tõttu on see mugav.
• Kas tahad, et Store API oleks avalik? Plokkide puhul peab see olema kättesaadav; turvaplugin, mis REST API sulgeb, rikub kassa.

Theehuis Example ei kasuta laiendusi, mis välju lisavad, ja tal on plokiteema. Ta jääb plokkide juurde. Teine pood, millel on tarnekuupäeva plugin, mis töötab ainult lühikoodiga, valib ajutiselt lühikoodi ja vaatab iga selle plugina suurema uuenduse järel uuesti.

Kui vahetad kuju, tee seda oma testpoes ja testi seejärel terve tellimus läbi (õppetund 4.5). WooCommerce’il on WooCommerce > Olek > Tööriistad all tööriist puuduvate poelehtede uuesti loomiseks; see loob uued lehed, olemasolevaid see ümber ei tee.

Miks ostukorv ja kassa ei kuulu otsingumootoritesse

Ostukorv on iga külastaja jaoks erinev ja otsingumootori jaoks alati tühi. Tühi ostukorv otsingutulemustes ei aita kedagi. Seepärast lisab WooCommerce ostukorvi, kassa ja Minu konto lehtedele ise noindex: otsingumootor võib lehte külastada, kuid ei võta seda otsingutulemustesse. Lähtekoodis näed seda nii:

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

SEO-plugin või teema võib selle rea üle kirjutada. Harva on see taotluslik. Selle õppetunni ülesandes kontrollid, kas rida on olemas.

Need samad kolm lehte ei tohi olla ka lehe vahemälus. WooCommerce saadab nendega päiseread, mis ütlevad vahemäludele, et lehte ei tohi salvestada. Kuidas kontrollida, et su vahemälu seda järgib, tuleb õppetunnis 6.4.

Mida näeb külastaja tühja ostukorviga

Kui avad kassalehe nii, et ostukorvis pole midagi, juhtub midagi muud kui siis, kui seal on kaupa:

• Plokkide puhul näitab kassaleht tavaliselt teadet, et ostukorv on tühi, ja nuppu tagasi poodi.
• Lühikoodi puhul suunab WooCommerce sind sageli ostukorvi.

Mõlemad on tavalised. Selle õppetunni kontroll arvestab sellega: programm ei pane kunagi midagi sinu ostukorvi ja vaatab ainult seda, mida näeb tühja ostukorviga külastaja.

Praktikas: nii näeb see WooCommerce’is välja

Teiste teemade ja majutusteenuse pakkujate juures toimib see sarnaselt; erineb ainult kujundus.

1. Mine WooCommerce > Sätted > Täpsemad seaded (Advanced) ja ava Page setup (lehtede seadistus). Pane kirja, milline leht on Ostukorv, Kassa, Minu konto ja Tingimused juures.
2. Klõpsa lehtede loendis igal neist lehtedest ja kontrolli, kas plokk (või lühikood) on seal olemas.
3. Ava kassaleht redaktoris. Klõpsa plokil Kassa ja vaata loendivaates selle osi: kontaktandmed, tarneaadress, tarnevalikud, maksevalikud, märkus, tingimused, nupp.
4. Vaata kassaploki redaktoris (ja laienduste juures endis), kas seal on teade laienduste kohta, mis plokkidega ei ühildu.
5. Ava ostukorv privaatses aknas ja vaata lähtekoodi (Ctrl+U): otsi noindex.

Kokkuvõte

• WooCommerce annab neljale lehele rolli (pood, ostukorv, kassa, Minu konto) ja lisaks tingimuste lehele; seos on sätetes, mitte nimes.
• Pärast kolimist, importi või teemavahetust kontrollid seoseid Page setup all.
• Uued poed saavad alates WooCommerce 8.3-st plokid; lühikoodid on endiselt olemas. Vali oma laienduste ja teema põhjal.
• Plokid vajavad Store API-t; ära sulge REST API-t.
• Ostukorv, kassa ja Minu konto saavad WooCommerce’ilt noindexi ega kuulu vahemällu.

Test (quiz)

Ülesanne

Ülesanne A2.2: Sinu poe lehed. Sisesta oma (test)poe aadress ning oma ostukorvi, kassalehe ja Minu konto aadressid (tee, näiteks /ostukorv/, või täielik URL samal hostil). Programm küsib iga lehte üks kord, ilma küpsisteta ja ilma midagi ostukorvi panemata.

Iga leht on korras, kui:

• leht vastab https kaudu olekuga 200;
• HTML sisaldab WooCommerce’i tunnust: ostukorvi puhul plokk wp-block-woocommerce-cart või body-klass woocommerce-cart, kassa puhul wp-block-woocommerce-checkout või woocommerce-checkout, Minu konto puhul woocommerce-account või WooCommerce’i sisselogimisvorm;
• lehel on noindex (meta robots või päiserida X-Robots-Tag).

Kui kassaleht suunab tühja ostukorviga sinu sisestatud ostukorvi lehele, on ka see korras.

Oranž: noindex puudub (vaata, kas SEO-plugin või su teema eemaldab selle); leht kasutab ploki asemel lühikoodi (see pole viga, kuid tasub küsida, kas see on teadlik valik). Punane: veaolek, näiteks 404, leht ilma WooCommerce’i tunnuseta (seo õige leht Page setup all), ümbersuunamine teisele hostile või http ilma https-ita.

Seejärel pane endale kirja, millist kuju (plokid või lühikood) kasutad ja miks.

Lisalugemist

• Tasuta WordPressi kursus 5.1: Teemad: plokiteemad ja klassikalised teemad
• Tasuta WordPressi kursus 4.2: Lehed, postitused, rubriigid ja sildid
• Tasuta WordPressi kursus 4.1: Plokiredaktor
• WooCommerce 8.3: plokid uute poodide vaikevalikuna (developer.woocommerce.com, inglise keeles): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, inglise keeles): https://developer.woocommerce.com/docs/apis/store-api/