Butikksidene og kasseblokkene

Modul 2: Installere og sette opp · Lesetid: 9 minutter

Læringsmål: Etter denne leksjonen kan du kjenne igjen butikksidene i WooCommerce og koble dem riktig, og du velger bevisst mellom blokkene og kortkodene for handlekurv og kasse.

Nøkkelbegreper: butikkside, handlekurv, kasse, Min konto, side for salgsbetingelser, sideoppsett, blokker, kortkoder, blokktema, klassisk tema, kompatibilitet for utvidelser, noindex

Fire sider med en spesiell rolle

Et WordPress-nettsted består av sider og innlegg (WordPress-kurset, leksjon 4.2). WooCommerce legger til produkter som en egen innleggstype, og gir noen vanlige sider en spesiell rolle. I listen under Sider ser disse sidene ut som alle andre sider, men WooCommerce vet hvilken side som har hvilken oppgave. Det står i innstillingene, ikke i navnet eller adressen til siden.

Fordi koblingen ligger i innstillingene, kan du gi sidene en annen tittel og en annen adresse. Theehuis Example kaller handlekurven "Mandje" på /mandje/, og det fungerer, så lenge den siden står som handlekurv under Sideoppsett.

Går koblingen galt, merker du det på uventede steder. Noen vanlige eksempler:

• Noen sletter siden Handlekurv fordi "den lå der to ganger". Etterpå havner en besøkende på en feilside etter Legg i handlekurv, og enkelte temaer viser ikke lenger handlekurven i toppfeltet.
• Etter en flytting eller import er en annen side koblet til Kasse enn siden med kasseblokken. Den besøkende ser en tom side og kan ikke bestille.
• En ekstra side "Kasse-2" dukker opp etter at veiviseren er kjørt en gang til. Den ene siden er koblet, den andre ligger i menyen.

Sjekk derfor etter hver større endring (tema, flytting, import) under Sideoppsett hvilken side som er koblet, og klikk deg videre til den siden.

Blokker eller kortkoder

Handlekurv og kasse kan komme på siden på to måter.

Kortkoder er den gamle måten: på siden står en kort kode mellom hakeparenteser, som [woocommerce_cart] og [woocommerce_checkout]. WooCommerce bytter den ut med skjemaet når siden vises. Utseendet kommer fra temaet, og svært mange utvidelser er i årevis laget for denne formen.

Blokker er den nye måten: siden inneholder blokken Handlekurv eller Kasse, bygget opp av mindre blokker (adresse, frakt, betalingsmetode, oversikt, bestillingsknappen). Du ser og redigerer dem i blokkredigeringen (WordPress-kurset, leksjon 4.1). Blokkene snakker med serveren via Store API (leksjon 2.4): skjemaet virker direkte i nettleseren, uten at siden lastes inn på nytt hver gang.

Siden WooCommerce 8.3 (november 2023) får en ny installasjon blokkene. En eksisterende butikk som oppdateres, beholder det den hadde. Kortkodene er fortsatt tilgjengelige.

Hva skal du velge? Noen spørsmål hjelper:

• Fungerer utvidelsene dine med blokkene? Dette er det viktigste spørsmålet. En utvidelse som legger til et felt i kassen (en leveringsdato, et MVA-nummer, en gavehilsen), må være tilpasset blokkene for seg. På siden til utvidelsen står det som regel om den er "kompatibel med kasseblokken". I redigeringen av kasseblokken kan WooCommerce vise et varsel om aktive utvidelser som ikke er merket som kompatible.
• Hvilket tema har du? Med et blokktema (WordPress-kurset, leksjon 5.1) passer blokkene best. Med et klassisk tema virker de også, men utseendet stemmer da mindre av seg selv overens.
• Må du tilpasse bestillingsknappen? I blokkene stiller du inn teksten på knappen i redigeringen. Det er praktisk med tanke på reglene som gjelder for den (leksjon 5.4).
• Vil du at Store API skal være offentlig? Med blokker må den være tilgjengelig; en sikkerhetsutvidelse som stenger REST API, ødelegger kassen.

Theehuis Example bruker ingen utvidelser som legger til felt, og har et blokktema. Butikken beholder blokkene. En annen butikk med en utvidelse for leveringsdato som bare fungerer med kortkoden, velger kortkoden midlertidig, og sjekker på nytt ved hver større oppdatering av den utvidelsen.

Bytter du form, gjør det i testbutikken din og test deretter en hel bestilling (leksjon 4.5). Under WooCommerce > Status > Verktøy har WooCommerce et verktøy for å opprette manglende butikksider på nytt; det lager nye sider, det gjør ikke om eksisterende.

Hvorfor handlekurv og kasse ikke hører hjemme i søkemotorer

En handlekurv er forskjellig for hver besøkende, og alltid tom for en søkemotor. En tom handlekurv i søkeresultatene hjelper ingen. WooCommerce setter derfor selv en noindex på sidene handlekurv, kasse og Min konto: søkemotoren kan besøke siden, men tar den ikke med i søkeresultatene. I kildekoden ser du det slik:

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

En SEO-utvidelse eller et tema kan overskrive den linjen. Det er sjelden meningen. I oppgaven i denne leksjonen sjekker du om den står der.

De samme tre sidene skal heller ikke i sidehurtigbufferen. WooCommerce sender med hodelinjer som forteller hurtigbuffere at de ikke skal lagre siden. Hvordan du sjekker at hurtigbufferen din følger dette, kommer i leksjon 6.4.

Det en besøkende uten handlekurv ser

Åpner du kassesiden uten noe i handlekurven, skjer det noe annet enn når det ligger varer i den:

• Med blokkene viser kassesiden som regel et varsel om at handlekurven er tom, med en knapp tilbake til butikken.
• Med kortkoden sender WooCommerce deg ofte videre til handlekurven.

Begge deler er normalt. Kontrollen i denne leksjonen tar høyde for dette: programmet legger aldri noe i handlekurven din og ser bare på det en besøkende uten handlekurv får se.

I praksis: slik ser det ut i WooCommerce

Med andre temaer og leverandører fungerer det på samme måte; bare utseendet er forskjellig.

1. Gå til WooCommerce > Innstillinger > Avansert (Advanced) og åpne Sideoppsett (Page setup). Noter hvilken side som står ved Handlekurv, Kasse, Min konto og Salgsbetingelser.
2. Klikk på hver av disse sidene under Sider, og sjekk at blokken (eller kortkoden) står på den.
3. Åpne kassesiden i redigeringen. Klikk på blokken Kasse og se på delene i listevisningen: kontaktinformasjon, leveringsadresse, fraktalternativer, betalingsalternativer, merknad, vilkår, knappen.
4. Se i redigeringen av kasseblokken (og hos utvidelsene selv) om det står et varsel om utvidelser som ikke er kompatible med blokkene.
5. Åpne handlekurven i et privat vindu og se på kildekoden (Ctrl+U): søk etter noindex.

Sammendrag

• WooCommerce gir fire sider en rolle (butikk, handlekurv, kasse, Min konto) pluss siden for salgsbetingelser; koblingen ligger i innstillingene, ikke i navnet.
• Etter en flytting, import eller et temabytte sjekker du koblingene under Sideoppsett.
• Nye butikker får blokkene siden WooCommerce 8.3; kortkodene finnes fortsatt. Velg ut fra utvidelsene og temaet ditt.
• Blokkene trenger Store API; ikke steng REST API.
• Handlekurv, kasse og Min konto får en noindex fra WooCommerce og hører ikke hjemme i hurtigbufferen.

Quiz

Oppgave

Oppgave A2.2: Butikksidene dine. Fyll inn adressen til (test)butikken din og adressene til handlekurven, kassesiden og Min konto (sti, som /handlekurv/, eller hele URL-en på samme vert). Programmet henter hver side én gang, uten informasjonskapsler og uten å legge noe i handlekurven.

For hver side er det bra når:

• siden svarer via https med status 200;
• HTML-en inneholder et kjennetegn fra WooCommerce: for handlekurven blokken wp-block-woocommerce-cart eller body-klassen woocommerce-cart, for kassen wp-block-woocommerce-checkout eller woocommerce-checkout, for Min konto woocommerce-account eller et innloggingsskjema fra WooCommerce;
• det står en noindex (meta robots eller hodelinjen X-Robots-Tag).

Sender kassesiden deg videre til handlekurven du har fylt inn når handlekurven er tom, er det også bra.

Oransje: ingen noindex (sjekk om en SEO-utvidelse eller temaet ditt fjerner den); siden bruker kortkoden i stedet for blokken (ikke en feil, men spørsmålet er om det er et bevisst valg). Rød: en feilstatus som 404, en side uten kjennetegn fra WooCommerce (koble riktig side under Sideoppsett), en videresending til en annen vert, eller http uten https.

Skriv deretter ned for deg selv hvilken form (blokker eller kortkode) du bruker, og hvorfor.

Les mer

• Gratis WordPress-kurs 5.1: Temaer: blokktemaer og klassiske temaer
• Gratis WordPress-kurs 4.2: Sider, innlegg, kategorier og stikkord
• Gratis WordPress-kurs 4.1: Blokkredigereren
• WooCommerce 8.3: blokker som standard for nye butikker (developer.woocommerce.com, engelsk): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, engelsk): https://developer.woocommerce.com/docs/apis/store-api/