Butikssiderne og kasseblokkene

Modul 2: Installation og opsætning · Læsetid: 9 minutter

Læringsmål: Efter denne lektion kan du genkende WooCommerces butikssider og koble dem korrekt, og du vælger bevidst mellem blokkene og shortcodes til kurv og kasse.

Centrale begreber: butiksside, kurv, kasse, Min konto, side med vilkår, Sideopsætning, blokke, shortcodes, bloktema, klassisk tema, kompatibilitet for udvidelser, noindex

Fire sider med en særlig rolle

Et WordPress-websted består af sider og indlæg (WordPress-kurset, lektion 4.2). WooCommerce tilføjer varer som en selvstændig indlægstype og giver nogle helt almindelige sider en særlig rolle. På listen under Sider ligner de alle andre sider, men WooCommerce ved, hvilken side der har hvilken opgave. Det står i indstillingerne, ikke i sidens navn eller adresse.

Fordi koblingen ligger i indstillingerne, kan du give siderne en anden titel og en anden adresse. Theehuis Example kalder kurven "Mandje" på /mandje/, og det virker, så længe siden står som kurv under Sideopsætning.

Går koblingen galt, mærker du det på uventede steder. Et par eksempler, der ofte forekommer:

• Nogen sletter siden Kurv, fordi "den stod der to gange". Derefter havner en besøgende på en fejlside efter Læg i kurv, og nogle temaer viser ikke længere kurven i toppen.
• Efter en flytning eller import er en anden side koblet til Kasse end den side, der har kasseblokken. Den besøgende ser en tom side og kan ikke bestille.
• En ekstra side "Kasse-2" opstår, når guiden køres en gang til. Den ene side er koblet, den anden står i menuen.

Tjek derfor efter hver større ændring (tema, flytning, import) under Sideopsætning, hvilken side der er koblet, og klik dig videre til den side.

Blokke eller shortcodes

Kurv og kasse kan komme på siden på to måder.

Shortcodes er den gamle måde: på siden står en kort kode i firkantede parenteser, som [woocommerce_cart] og [woocommerce_checkout]. WooCommerce erstatter den med formularen, når siden vises. Udseendet kommer fra temaet, og rigtig mange udvidelser er i årevis lavet til denne form.

Blokke er den nye måde: siden indeholder blokken Kurv eller Kasse, bygget op af mindre blokke (adresse, forsendelse, betalingsmetode, oversigt, bestillingsknappen). Du ser og redigerer dem i blokeditoren (WordPress-kurset, lektion 4.1). Blokkene taler med serveren via Store API (lektion 2.4): formularen virker direkte i browseren, uden at siden skal indlæses igen hver gang.

Siden WooCommerce 8.3 (november 2023) får en ny installation blokkene. En eksisterende butik, der opdaterer, beholder det, den havde. Shortcodes er stadig tilgængelige.

Hvad skal du vælge? Et par spørgsmål hjælper:

• Virker dine udvidelser med blokkene? Det er det vigtigste spørgsmål. En udvidelse, der tilføjer et felt i kassen (en leveringsdato, et momsnummer, en gavehilsen), skal være tilpasset blokkene for sig. På udvidelsens side står der som regel, om den er "kompatibel med kasseblokken". I editoren for kasseblokken kan WooCommerce vise en besked om aktive udvidelser, der ikke er markeret som kompatible.
• Hvilket tema har du? Blokkene passer bedst til et bloktema (WordPress-kurset, lektion 5.1). De virker også med et klassisk tema, men så passer udseendet ikke lige så naturligt sammen.
• Skal du tilpasse bestillingsknappen? I blokkene indstiller du knappens tekst i editoren. Det er praktisk i forhold til reglerne om knappen (lektion 5.4).
• Vil du have, at Store API er offentlig? Med blokke skal den kunne nås; et sikkerhedsplugin, der lukker REST API, ødelægger kassen.

Theehuis Example bruger ingen udvidelser, der tilføjer felter, og har et bloktema. Butikken beholder blokkene. En anden shop med et leveringsdato-plugin, der kun virker med shortcoden, vælger midlertidigt shortcoden og ser på det igen ved hver større opdatering af pluginnet.

Skifter du form, så gør det i din testbutik, og test derefter en hel bestilling (lektion 4.5). Under WooCommerce > Status > Værktøjer har WooCommerce et værktøj til at oprette manglende butikssider igen; det laver nye sider, det konverterer ikke eksisterende sider.

Hvorfor kurv og kasse ikke hører hjemme i søgemaskiner

En kurv er forskellig for hver besøgende og altid tom for en søgemaskine. En tom kurv i søgeresultaterne hjælper ingen. Derfor sætter WooCommerce selv et noindex på siderne kurv, kasse og Min konto: søgemaskinen må besøge siden, men tager den ikke med i søgeresultaterne. Du ser det i kildekoden som:

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

Et SEO-plugin eller et tema kan overskrive den linje. Det er sjældent meningen. I opgaven til denne lektion tjekker du, om den er der.

De samme tre sider må heller ikke ligge i sidecachen. WooCommerce sender headere med, der fortæller caches, at de ikke må gemme siden. Hvordan du tjekker, at din cache overholder det, kommer i lektion 6.4.

Hvad en besøgende uden kurv ser

Åbner du kassesiden uden noget i kurven, sker der noget andet, end når der ligger varer i den:

• Med blokkene viser kassesiden som regel en besked om, at kurven er tom, med en knap tilbage til webshoppen.
• Med shortcoden sender WooCommerce dig ofte videre til kurven.

Begge dele er normalt. Tjekket i denne lektion tager højde for det: programmet lægger aldrig noget i din kurv og ser kun på det, en besøgende uden kurv får at se.

I praksis: sådan ser det ud i WooCommerce

Med andre temaer og hostingudbydere fungerer det på samme måde; kun udseendet er anderledes.

1. Gå til WooCommerce > Indstillinger > Avanceret (Advanced), og åbn Sideopsætning (Page setup). Skriv ned, hvilken side der står ved Kurv, Kasse, Min konto og Vilkår og betingelser.
2. Klik på hver af de sider under Sider, og tjek, at blokken (eller shortcoden) står på siden.
3. Åbn kassesiden i editoren. Klik på blokken Kasse, og se delene i listevisningen: kontaktoplysninger, leveringsadresse, forsendelsesmuligheder, betalingsmuligheder, note, vilkår, knappen.
4. Se i editoren for kasseblokken (og ved selve udvidelserne), om der er en besked om udvidelser, der ikke er kompatible med blokkene.
5. Åbn kurven i et privat vindue, og se kildekoden (Ctrl+U): søg efter noindex.

Opsummering

• WooCommerce giver fire sider en rolle (webshop, kurv, kasse, Min konto) plus siden med vilkår; koblingen står i indstillingerne, ikke i navnet.
• Efter en flytning, import eller et temaskift tjekker du koblingerne under Sideopsætning.
• Nye butikker får blokkene siden WooCommerce 8.3; shortcodes findes stadig. Vælg ud fra dine udvidelser og dit tema.
• Blokkene har brug for Store API; luk ikke REST API.
• Kurv, kasse og Min konto får et noindex fra WooCommerce og hører ikke hjemme i cachen.

Quiz

Opgave

Opgave A2.2: Dine butikssider. Indtast adressen på din (test)butik og adresserne på din kurv, din kasseside og Min konto (sti, som /kurv/, eller den fulde URL på samme host). Programmet henter hver side én gang, uden cookies og uden at lægge noget i kurven.

For hver side er det i orden, når:

• siden svarer via https med status 200;
• HTML'en indeholder et kendetegn for WooCommerce: for kurven 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 en loginformular fra WooCommerce;
• der står et noindex (meta robots eller headeren X-Robots-Tag).

Sender kassesiden med en tom kurv videre til den kurv, du har indtastet, er det også i orden.

Orange: intet noindex (se, om et SEO-plugin eller dit tema fjerner det); siden bruger shortcoden i stedet for blokken (ikke en fejl, men et spørgsmål om, det er et bevidst valg). Rød: en fejlstatus som 404, en side uden kendetegn for WooCommerce (kobl den rigtige side under Sideopsætning), en videresendelse til en anden host, eller http uden https.

Skriv derefter ned for dig selv, hvilken form (blokke eller shortcode) du bruger, og hvorfor.

Læs videre

• Gratis WordPress-kursus 5.1: Temaer: bloktemaer og klassiske temaer
• Gratis WordPress-kursus 4.2: Sider, indlæg, kategorier og tags
• Gratis WordPress-kursus 4.1: Blokeditoren
• WooCommerce 8.3: blokke 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/