Kauppasivut ja kassalohkot

Moduuli 2: Asennus ja käyttöönotto · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen tunnistat WooCommercen kauppasivut ja osaat liittää ne oikein. Lisäksi valitset harkiten, käytätkö ostoskorissa ja kassalla lohkoja vai lyhytkoodeja.

Keskeiset käsitteet: kauppasivu, ostoskori, kassa, Oma tili, ehtosivu, sivujen asetukset, lohkot, lyhytkoodit, lohkoteema, perinteinen teema, laajennusten yhteensopivuus, noindex

Neljä sivua, joilla on erityinen tehtävä

WordPress-sivusto koostuu sivuista ja artikkeleista (WordPress-kurssi, oppitunti 4.2). WooCommerce lisää tuotteet omana sisältötyyppinään ja antaa muutamalle tavalliselle sivulle erityisen tehtävän. Sivujen luettelossa nämä sivut näyttävät samalta kuin mikä tahansa muu sivu, mutta WooCommerce tietää, mikä tehtävä kullakin sivulla on. Tieto on asetuksissa, ei sivun nimessä tai osoitteessa.

Koska liitos on asetuksissa, voit antaa sivuille toisen otsikon ja toisen osoitteen. Theehuis Example kutsuu ostoskoria nimellä "Mandje" (kori) osoitteessa /mandje/, ja se toimii, kunhan sivu on Sivujen asetuksissa valittu ostoskoriksi.

Jos liitos menee pieleen, huomaat sen yllättävissä paikoissa. Muutama yleinen esimerkki:

• Joku poistaa Ostoskori-sivun, koska "se oli kahteen kertaan". Sen jälkeen kävijä päätyy Lisää ostoskoriin -painikkeen jälkeen virhesivulle, ja jotkin teemat eivät enää näytä koria yläpalkissa.
• Siirron tai tuonnin jälkeen Kassaksi on liitetty eri sivu kuin se, jolla kassalohko on. Kävijä näkee tyhjän sivun eikä voi tilata.
• Kun ohjattu asennus ajetaan toisen kerran, syntyy toinen sivu "Kassa-2". Toinen sivu on liitetty, toinen on valikossa.

Tarkista siksi jokaisen suuren muutoksen (teema, siirto, tuonti) jälkeen Sivujen asetuksista, mikä sivu on liitetty, ja avaa myös itse sivu.

Lohkot vai lyhytkoodit

Ostoskori ja kassa voivat tulla sivulle kahdella tavalla.

Lyhytkoodit ovat vanha tapa: sivulla on hakasulkeissa lyhyt koodi, kuten [woocommerce_cart] ja [woocommerce_checkout]. WooCommerce korvaa sen sivua näytettäessä lomakkeella. Ulkoasu tulee teemasta, ja hyvin monet laajennukset on vuosien ajan tehty juuri tätä muotoa varten.

Lohkot ovat uusi tapa: sivulla on Ostoskori- tai Kassa-lohko, joka koostuu pienemmistä lohkoista (osoite, toimitus, maksutapa, yhteenveto, tilauspainike). Näet ja muokkaat niitä lohkoeditorissa (WordPress-kurssi, oppitunti 4.1). Lohkot keskustelevat palvelimen kanssa Store API -rajapinnan kautta (oppitunti 2.4): lomake toimii suoraan selaimessa, eikä sivua tarvitse ladata joka kerta uudelleen.

WooCommerce 8.3:sta (marraskuu 2023) alkaen uusi asennus saa lohkot. Olemassa oleva kauppa, joka päivitetään, säilyttää sen, mitä sillä oli. Lyhytkoodit ovat edelleen käytettävissä.

Kumman valitset? Muutama kysymys auttaa:

• Toimivatko laajennuksesi lohkojen kanssa? Tämä on tärkein kysymys. Laajennus, joka lisää kassalle kentän (toimituspäivä, ALV-tunniste, lahjaviesti), on täytynyt erikseen sovittaa lohkoille. Laajennuksen sivulla kerrotaan yleensä, onko se "yhteensopiva kassalohkon kanssa". Kassalohkon editorissa WooCommerce voi näyttää ilmoituksen aktiivisista laajennuksista, joita ei ole merkitty yhteensopiviksi.
• Mikä teema sinulla on? Lohkoteeman (WordPress-kurssi, oppitunti 5.1) kanssa lohkot sopivat parhaiten. Perinteisen teeman kanssa ne toimivat myös, mutta ulkoasu ei silloin sovi yhteen yhtä luontevasti.
• Pitääkö tilauspainiketta muokata? Lohkoissa painikkeen teksti asetetaan editorissa. Siitä on hyötyä painiketta koskevien sääntöjen kannalta (oppitunti 5.4).
• Haluatko, että Store API on julkinen? Lohkot vaativat, että se on tavoitettavissa. Tietoturvalisäosa, joka sulkee REST-rajapinnan, rikkoo kassan.

Theehuis Example ei käytä laajennuksia, jotka lisäävät kenttiä, ja sillä on lohkoteema. Se pitää lohkot. Toinen kauppa, jolla on vain lyhytkoodin kanssa toimiva toimituspäivälisäosa, valitsee toistaiseksi lyhytkoodin ja tarkistaa tilanteen uudelleen jokaisen lisäosan suuren päivityksen yhteydessä.

Jos vaihdat muotoa, tee se testikaupassasi ja testaa sen jälkeen kokonainen tilaus (oppitunti 4.5). Kohdassa WooCommerce > Tila > Työkalut on työkalu, jolla puuttuvat kauppasivut voi luoda uudelleen. Se luo uusia sivuja, mutta ei muunna olemassa olevia.

Miksi ostoskori ja kassa eivät kuulu hakukoneisiin

Ostoskori on jokaiselle kävijälle erilainen ja hakukoneelle aina tyhjä. Tyhjästä ostoskorista hakutuloksissa ei ole kenellekään hyötyä. Siksi WooCommerce lisää itse ostoskori-, kassa- ja Oma tili -sivuille noindex-merkinnän: hakukone saa käydä sivulla, mutta ei ota sitä mukaan hakutuloksiin. Lähdekoodissa se näkyy näin:

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

SEO-lisäosa tai teema voi ohittaa tämän rivin. Se on harvoin tarkoituksellista. Tämän oppitunnin tehtävässä tarkistat, että rivi on paikallaan.

Samoja kolmea sivua ei myöskään saa tallentaa sivuvälimuistiin. WooCommerce lähettää niiden mukana otsakerivejä, jotka kertovat välimuisteille, ettei sivua saa tallentaa. Sitä, miten tarkistat välimuistisi noudattavan tätä, käsitellään oppitunnilla 6.4.

Mitä kävijä näkee ilman ostoskoria

Kun avaat kassasivun ilman, että ostoskorissa on mitään, tapahtuu jotain muuta kuin silloin, kun korissa on tuotteita:

• Lohkoja käytettäessä kassasivu näyttää yleensä ilmoituksen, että ostoskori on tyhjä, ja painikkeen takaisin kauppaan.
• Lyhytkoodia käytettäessä WooCommerce ohjaa sinut usein ostoskoriin.

Molemmat ovat normaaleja. Tämän oppitunnin tarkistus ottaa sen huomioon: ohjelma ei koskaan lisää mitään ostoskoriisi ja katsoo vain sitä, mitä kävijä näkee ilman ostoskoria.

Käytännössä: tältä se näyttää WooCommercessa

Muissa teemoissa ja webhotelleissa toiminta on samankaltaista, vain ulkoasu vaihtelee.

1. Siirry kohtaan WooCommerce > Asetukset > Edistyneet (Advanced) ja avaa Sivujen asetukset (Page setup). Kirjaa ylös, mikä sivu on valittu kohtiin Ostoskori, Kassa, Oma tili ja Tilaus- ja sopimusehdot.
2. Avaa Sivut-luettelosta jokainen näistä sivuista ja tarkista, että lohko (tai lyhytkoodi) on sivulla.
3. Avaa kassasivu editorissa. Napsauta Kassa-lohkoa ja katso sen osat luettelonäkymässä: yhteystiedot, toimitusosoite, toimitusvaihtoehdot, maksuvaihtoehdot, huomautus, ehdot, painike.
4. Katso kassalohkon editorista (ja laajennuksista itsestään), onko näkyvissä ilmoitus laajennuksista, jotka eivät ole yhteensopivia lohkojen kanssa.
5. Avaa ostoskori yksityisessä ikkunassa ja katso lähdekoodi (Ctrl+U): etsi merkintää noindex.

Yhteenveto

• WooCommerce antaa neljälle sivulle tehtävän (kauppa, ostoskori, kassa, Oma tili) sekä lisäksi ehtosivulle. Liitos on asetuksissa, ei nimessä.
• Siirron, tuonnin tai teeman vaihdon jälkeen tarkistat liitokset Sivujen asetuksista.
• Uudet kaupat saavat WooCommerce 8.3:sta alkaen lohkot, mutta lyhytkoodit ovat yhä olemassa. Valitse laajennustesi ja teemasi perusteella.
• Lohkot tarvitsevat Store API -rajapinnan, joten älä sulje REST-rajapintaa.
• WooCommerce antaa ostoskorille, kassalle ja Oma tili -sivulle noindex-merkinnän, eivätkä ne kuulu välimuistiin.

Tietovisa (quiz)

Tehtävä

Tehtävä A2.2: Verkkokauppasi sivut. Syötä (testi)kauppasi osoite sekä ostoskorin, kassasivun ja Oma tili -sivun osoitteet (polku, kuten /winkelwagen/, tai koko URL samassa palvelimessa). Ohjelma hakee jokaisen sivun kerran, ilman evästeitä ja lisäämättä mitään ostoskoriin.

Sivu on kunnossa, kun:

• sivu vastaa https-yhteydellä tilakoodilla 200;
• HTML sisältää WooCommercen tunnusmerkin: ostoskorissa lohko wp-block-woocommerce-cart tai body-luokka woocommerce-cart, kassassa wp-block-woocommerce-checkout tai woocommerce-checkout, Oma tili -sivulla woocommerce-account tai WooCommercen kirjautumislomake;
• sivulla on noindex (meta robots tai otsakerivi X-Robots-Tag).

Jos kassasivu ohjaa tyhjällä ostoskorilla syöttämääsi ostoskoriin, sekin on kunnossa.

Oranssi: noindex puuttuu (tarkista, poistaako SEO-lisäosa tai teemasi sen); sivu käyttää lyhytkoodia lohkon sijaan (ei virhe, mutta kannattaa miettiä, onko valinta tietoinen). Punainen: virhetila, kuten 404, sivu ilman WooCommercen tunnusmerkkiä (liitä oikea sivu Sivujen asetuksissa), uudelleenohjaus toiseen palvelimeen tai http ilman https-yhteyttä.

Kirjoita sen jälkeen itsellesi muistiin, kumpaa muotoa (lohkot vai lyhytkoodi) käytät ja miksi.

Lue lisää

• Ilmainen WordPress-kurssi 5.1: Teemat: lohkoteemat ja perinteiset teemat
• Ilmainen WordPress-kurssi 4.2: Sivut, artikkelit, kategoriat ja tagit
• Ilmainen WordPress-kurssi 4.1: Lohkoeditori
• WooCommerce 8.3: lohkot oletuksena uusissa kaupoissa (developer.woocommerce.com, englanniksi): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, englanniksi): https://developer.woocommerce.com/docs/apis/store-api/