Butikssidor och kassablocken

Modul 2: Installera och konfigurera · Lästid: 9 minuter

Lärandemål: Efter den här lektionen kan du känna igen WooCommerce butikssidor och koppla dem rätt, och du väljer medvetet mellan blocken och kortkoderna för varukorg och kassa.

Nyckelbegrepp: butikssida, varukorg, kassa, Mitt konto, villkorssida, sidinställningar, block, kortkoder, blocktema, klassiskt tema, tilläggens kompatibilitet, noindex

Fyra sidor med en särskild roll

En WordPress-webbplats består av sidor och inlägg (WordPress-kursen, lektion 4.2). WooCommerce lägger till produkter som en egen inläggstyp och ger några vanliga sidor en särskild roll. De sidorna ser ut som alla andra i listan under Sidor, men WooCommerce vet vilken sida som har vilken uppgift. Det står i inställningarna, inte i sidans namn eller adress.

Eftersom kopplingen finns i inställningarna kan du ge sidorna en annan titel och en annan adress. Theehuis Example kallar varukorgen "Mandje" (korgen) på /mandje/, och det fungerar så länge den sidan står som varukorg under Sidinställningar.

Går kopplingen fel märker du det på konstiga ställen. Några vanliga exempel:

• Någon tar bort sidan Varukorg eftersom "den fanns två gånger". Sedan hamnar en besökare på en felsida efter Lägg i varukorg, och vissa teman visar inte längre korgen i sidhuvudet.
• Efter en flytt eller import är en annan sida kopplad som Kassa än sidan med kassablocket. Besökaren ser en tom sida och kan inte beställa.
• En andra sida "Kassa-2" skapas när guiden körs en gång till. Den ena sidan är kopplad, den andra finns i menyn.

Kontrollera därför efter varje stor ändring (tema, flytt, import) under Sidinställningar vilken sida som är kopplad, och klicka dig vidare till den sidan.

Block eller kortkoder

Varukorg och kassa kan hamna på sidan på två sätt.

Kortkoder är det gamla sättet: på sidan står en kort kod inom hakparenteser, till exempel [woocommerce_cart] och [woocommerce_checkout]. WooCommerce byter ut den mot formuläret när sidan visas. Utseendet kommer från temat, och väldigt många tillägg har i åratal byggts för den här formen.

Block är det nya sättet: sidan innehåller blocket Varukorg eller Kassa, uppbyggt av mindre block (adress, frakt, betalningssätt, översikt, beställningsknappen). Du ser och redigerar dem i blockredigeraren (WordPress-kursen, lektion 4.1). Blocken pratar med servern via Store API (lektion 2.4): formuläret fungerar direkt i webbläsaren, utan att sidan laddas om varje gång.

Sedan WooCommerce 8.3 (november 2023) får en ny installation blocken. En befintlig butik som uppdateras behåller det den hade. Kortkoderna finns kvar.

Vilket väljer du? Några frågor hjälper:

• Fungerar dina tillägg med blocken? Det här är den viktigaste frågan. Ett tillägg som lägger till ett fält i kassan (ett leveransdatum, ett momsregistreringsnummer, ett presentmeddelande) måste ha anpassats särskilt för blocken. På tilläggets sida står oftast om det är "kompatibelt med kassablocket". I redigeraren för kassablocket kan WooCommerce visa ett meddelande om aktiva tillägg som inte är markerade som kompatibla.
• Vilket tema har du? Med ett blocktema (WordPress-kursen, lektion 5.1) passar blocken bäst. Med ett klassiskt tema fungerar de också, men utseendet stämmer då inte lika självklart överens.
• Behöver du ändra beställningsknappen? I blocken ställer du in knappens text i redigeraren. Det är praktiskt med tanke på reglerna som gäller för den (lektion 5.4).
• Vill du att Store API ska vara öppet? Med block måste det gå att nå; ett säkerhetstillägg som stänger REST API förstör kassan.

Theehuis Example använder inga tillägg som lägger till fält och har ett blocktema. Butiken behåller blocken. En annan butik med ett tillägg för leveransdatum som bara fungerar med kortkoden väljer tillfälligt kortkoden och kollar igen vid varje stor uppdatering av tillägget.

Byter du form, gör det i din testbutik och testa sedan en hel beställning (lektion 4.5). Under WooCommerce > Status > Verktyg har WooCommerce ett verktyg för att skapa saknade butikssidor på nytt; det skapar nya sidor, det gör inte om befintliga.

Varför varukorg och kassa inte hör hemma i sökmotorer

En varukorg ser olika ut för varje besökare och är alltid tom för en sökmotor. En tom varukorg i sökresultaten hjälper ingen. WooCommerce sätter därför självt en noindex på sidorna varukorg, kassa och Mitt konto: sökmotorn får besöka sidan men tar inte med den i sökresultaten. Du ser det i källkoden som:

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

Ett SEO-tillägg eller ett tema kan skriva över den raden. Det är sällan meningen. I uppgiften i den här lektionen kontrollerar du att den finns där.

Samma tre sidor får inte heller hamna i sidcachen. WooCommerce skickar med rubrikrader som talar om för cacher att de inte får spara sidan. Hur du kontrollerar att din cache följer det kommer i lektion 6.4.

Vad en besökare utan varukorg ser

Öppnar du kassasidan utan något i varukorgen händer något annat än när det finns varor i den:

• Med blocken visar kassasidan oftast ett meddelande om att varukorgen är tom, med en knapp tillbaka till butiken.
• Med kortkoden skickar WooCommerce dig ofta vidare till varukorgen.

Båda är normala. Kontrollen i den här lektionen tar hänsyn till det: programmet lägger aldrig något i din varukorg och tittar bara på vad en besökare utan varukorg får se.

I praktiken: så ser det ut i WooCommerce

Med andra teman och webbhotell fungerar det på liknande sätt; bara utseendet skiljer sig.

1. Gå till WooCommerce > Inställningar > Avancerat (Advanced) och öppna Sidinställningar (Page setup). Anteckna vilken sida som står vid Varukorg, Kassa, Mitt konto och Villkor.
2. Klicka under Sidor på var och en av de sidorna och kontrollera att blocket (eller kortkoden) finns på den.
3. Öppna kassasidan i redigeraren. Klicka på blocket Kassa och titta på delarna i listvyn: kontaktuppgifter, leveransadress, fraktalternativ, betalningsalternativ, anteckning, villkor, knappen.
4. Titta i redigeraren för kassablocket (och hos tilläggen själva) om det finns ett meddelande om tillägg som inte är kompatibla med blocken.
5. Öppna varukorgen i ett privat fönster och visa källkoden (Ctrl+U): sök efter noindex.

Sammanfattning

• WooCommerce ger fyra sidor en roll (butik, varukorg, kassa, Mitt konto) plus villkorssidan; kopplingen står i inställningarna, inte i namnet.
• Efter en flytt, import eller ett temabyte kontrollerar du kopplingarna under Sidinställningar.
• Nya butiker får sedan WooCommerce 8.3 blocken; kortkoderna finns kvar. Välj utifrån dina tillägg och ditt tema.
• Blocken behöver Store API; stäng inte REST API.
• Varukorg, kassa och Mitt konto får en noindex av WooCommerce och hör inte hemma i cachen.

Quiz

Uppgift

Uppgift A2.2: Dina butikssidor. Fyll i adressen till din (test)butik och adresserna till din varukorg, kassasida och Mitt konto (sökväg, till exempel /varukorg/, eller den fullständiga URL:en på samma värd). Programmet hämtar varje sida en gång, utan cookies och utan att lägga något i varukorgen.

För varje sida är det bra om:

• sidan svarar via https med status 200;
• HTML-koden innehåller ett kännetecken för WooCommerce: för varukorgen blocket wp-block-woocommerce-cart eller body-klassen woocommerce-cart, för kassan wp-block-woocommerce-checkout eller woocommerce-checkout, för Mitt konto woocommerce-account eller ett inloggningsformulär från WooCommerce;
• det finns en noindex (meta robots eller rubrikraden X-Robots-Tag).

Skickar kassasidan med en tom varukorg vidare till den varukorg du har fyllt i är det också bra.

Orange: ingen noindex (kolla om ett SEO-tillägg eller ditt tema tar bort den); sidan använder kortkoden i stället för blocket (inget fel, men frågan är om det är ett medvetet val). Röd: en felstatus som 404, en sida utan kännetecken för WooCommerce (koppla rätt sida under Sidinställningar), en omdirigering till en annan värd, eller http utan https.

Skriv sedan ner för dig själv vilken form (block eller kortkod) du använder och varför.

Läs mer

• Gratis WordPress-kurs 5.1: Teman: blockteman och klassiska teman
• Gratis WordPress-kurs 4.2: Sidor, inlägg, kategorier och taggar
• Gratis WordPress-kurs 4.1: Blockredigeraren
• WooCommerce 8.3: block som standard för nya butiker (developer.woocommerce.com, engelska): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, engelska): https://developer.woocommerce.com/docs/apis/store-api/