Blokk: Clerk

Clerk-blokken lar deg plassere et Clerk-element — for eksempel produktanbefalinger, en innholdsbanner eller en kampanjeliste — hvor du vil i designet. Du limer inn den innebygde koden fra Clerk-kontoen din, og blokken viser elementet på sidene der den ligger.

Før du starter

Blokken vises bare hvis Clerk.io-utvidelsen er aktiv i butikken. Er den ikke det, dukker ikke Clerk-blokken opp i listen over blokker i Designbyggeren.

Du aktiverer Clerk under Utvidelser > Dine utvidelser ved å slå på Aktiver Clerk.io. Du trenger også en Clerk-konto med offentlig og privat nøkkel lagt inn, og produktfeeden må være koblet opp mot Clerk.

Kort sagt: uten aktiv Clerk-utvidelse er denne blokken usynlig, og selv om du legger den inn, vil den ikke vise noe før Clerk-elementet er satt opp i Clerk-kontoen.

Hva blokken gjør

Blokken er en beholder for Clerks egen kode. Den har ingen ferdig visning i seg selv — det er Clerk som bestemmer hva som faktisk vises (anbefalinger, søk, bannere osv.) ut fra elementet du kobler til.

Slik legger du til blokken

Clerk-blokken legges til som alle andre blokker i Designbyggeren: åpne seksjonen du vil ha den i, legg til en ny blokk, og velg Clerk fra blokklisten. Deretter limer du inn koden fra Clerk i innholdsfeltet (se neste avsnitt).

Du kan ha flere Clerk-blokker på samme side — for eksempel én med anbefalinger øverst og en annen lenger ned.

Blokken er tilgjengelig i disse seksjonene:

• Produktlister
• Handlekurv
• Bloggsider

Legge inn den innebygde koden fra Clerk

Selve elementet — utseende, hvilke produkter som vises og logikken bak — settes opp inne i Clerk. Det du henter derfra, er en kort kodesnutt som du limer inn i blokken.

Slik henter du koden i Clerk (se også Clerks egen veiledning på help.clerk.io):

• Logg inn i Clerk og gå til Recommendations i menyen.
• Velg Element, og åpne elementet du vil bruke — eller lag et nytt.
• Klikk Edit Element.
• Under Insert into website, velg Using embedded code.
• Kopier kodesnutten.

Koden ser typisk slik ut etter at du har lagt inn et tegn (her et punktum):

<span class="clerk"
  data-template="@home-page-popular">.</span>

Lim denne inn i Clerk-blokkens innholdsfelt i Designbyggeren, og lagre.

For mer info om oppsett hos Clerk, se egen artikkel: https://help.clerk.io/platform/elements/settings/

Plassholdere for produkt-, kategori- og handlekurv-ID

Noen Clerk-elementer trenger å vite hvilken side kunden er på — for eksempel «vis lignende produkter til dette produktet» eller «andre kjøpte også» i handlekurven. Da må Clerk-koden inneholde riktig ID.

Du skal ikke skrive inn et tall selv. Lim inn plassholderen akkurat som den står, så bytter integrasjonen den automatisk ut med riktig ID i butikken når siden vises. Bruk plassholderne under inne i koden:

Eksempel på en kode som anbefaler lignende produkter på en produktside:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[{{ product.id }}]">.</span>

Du lar {{ product.id }} stå i koden. Når kunden er på et produkt med ID 1234, sender butikken automatisk data-products="[1234]" videre til Clerk.

Tips

• Sjekk at riktig plassholder passer til siden. {{ product.id }} fylles bare inn på produktsider — legger du den i en blokk på forsiden, blir den stående tom.
• Navnet etter data-template (for eksempel @product-page-alternatives) må stemme nøyaktig med navnet på elementet i Clerk. Skrivefeil her gir et tomt felt uten feilmelding.
• Vil du teste at blokken virker, åpne siden i nettleseren og se etter Clerk-innholdet. Vises ingenting, ligger feilen oftest i Clerk-oppsettet, ikke i blokken.

Vanlige fallgruver

• Blokken mangler i listen. Da er Clerk-utvidelsen ikke aktiv. Aktiver den under Utvidelser først.
• Hele koden forsvant da du lagret. <span>-taggen var tom. Legg et tegn (et punktum eller mellomrom) mellom <span ...> og </span>, så blir koden stående.
• Blokken er tom på nettsiden. Vanligste årsaker: elementet er ikke ferdig satt opp i Clerk, kodesnutten er limt inn feil, eller data-template-navnet stemmer ikke med Clerk.
• Anbefalinger som krever ID virker ikke. Kontroller at du har brukt riktig plassholder ({{ product.id }}, {{ category.id }} osv.) og at blokken ligger på den sidetypen plassholderen gjelder for.
• Resultatene ser feil ut. Kvaliteten på det Clerk viser, avhenger av produktfeeden og oppsettet i Clerk-kontoen. Ser produktene eller rekkefølgen feil ut, sjekk feeden og elementet i Clerk — ikke blokken.