Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt at vise fuldt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang, når du bruger et Clerk.js-setup i DanDomain.

For vores komplette Best Practices, læs denne artikel om, hvilke Recommendations du skal bruge.

Slider-opsætning #

Recommendations oprettes med Elements, der refererer til et Design. Herunder finder du den grundlæggende vejledning til opsætning af et Element.

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides oprettes Elements til vores Best Practices automatisk.

Opret Design #

Recommendations vises som en slider som standard. Dette gør det muligt for kunder at se flere produkter med færre klik. Du kan enten bruge Design Editor til at konfigurere det visuelt eller bruge code designs.

Et design kan genbruges til et vilkårligt antal Recommendations-elements, du opretter.

Design Editor #

1. Gå til Recommendations > Designs og klik på New Design.
2. Vælg Product Slider
3. Vælg den skabelon, du vil starte med, fra listen over designskabeloner.
4. Giv det et navn, og klik på Create design.
5. Foretag de ændringer, du ønsker i designet.

Code Design #

1. Gå til Recommendations > Designs og klik på New Design.
2. Vælg Other designs > Blank > Code.
3. Giv det et navn, og klik på Create design.
4. Opret et code design fra bunden ved hjælp af Liquid code.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations, og gør det muligt at integrere det på din hjemmeside. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

1. Gå til Recommendations > Elements.
2. Klik på New Element.
3. Giv det et beskrivende navn. Vi anbefaler, at du navngiver det baseret på siden og den logik, du ønsker at bruge. F.eks. “Forside / Visitor Recommendations”.
4. I Element type, vælger du den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se et overblik over alle product logics her.
5. I Design vælger du det design, du har oprettet, fra dropdown-menuen og vælger det antal produkter, du vil vise.
6. Klik på Save øverst på skærmen.

Tilføj til hjemmeside #

1. Åbn fanen Insert into website.
2. Her har du to muligheder:
   • Brug af injection gør det muligt at indsætte koden ved brug af en CSS-selector.
   • Brug af embedded code gør det muligt manuelt at indsætte koden på din hjemmeside.
3. Vælg den mulighed, der er lettest for dig at bruge.

Sider #

Herunder er de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du skal bruge, for at følge vores Best Practices.

Forside #

1. I my.clerk.io opretter du 3 Elements med følgende logikker:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. I DanDomain Admin, gå til Online Store > Design > Aktive designs > Rediger filer.

3. Find filen index.tpl.

4. Da denne fil genererer alle sider på webshoppen inkl. forsiden, skal du lede efter en IF-sætning, der identificerer forsiden. Se efter enten:

   • {$general.isShop and $page.isFrontPage}
   • {if $page.isFrontPage}

5. Kopiér embedkoderne inden i denne IF-sætning. Dette sikrer, at bannerne kun vises på forsiden.

<span class="clerk"
    data-template="@home-page-visitor-recommendations">
</span>

6. Klik på Gem for at gemme.

Produktside #

1. I my.clerk.io opretter du 2 Elements med følgende logikker:

   • Best Alternative Products
   • Best Cross-Sell Products

2. I DanDomain Admin, gå til Kontrolpanel > Design Manager > Rediger filer.

3. Find filen, der genererer produktsiden. I standardtemaer er dette modules > product > product-entity.tpl.

4. Kopiér embedkoderne til bunden af denne fil, og klik på Gem.

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

Kategoriside #

1. I my.clerk.io opretter du et Element med logikken Bestsellers In Category.

2. I DanDomain Admin, gå til Online Store > Design > Aktive designs > Rediger filer.

3. Find filen, der genererer dine Kategorisider. I standardtemaer er dette modules > product > product-list.tpl.

4. Kopiér embedkoden til filen, et sted under titel og beskrivelse (normalt omkring linje 92). Klik derefter på Gem.

{if $field == 'search'}
{else}
<span class="clerk"
    data-template="@category-page-bestsellers"
    data-category="{$item->Id}">
</span>
{/if}

IF-sætningen sikrer, at banneret kun vises på kategorisider og ikke på søgesiden, da begge bruger den samme skabelonfil.

Kurvside #

1. I my.clerk.io opretter du et Element med logikken Best Cross-Sell Products.

2. I DanDomain Admin, gå til Online Store > Design > Aktive designs > Rediger filer.

3. Find filen, der genererer Kurvsiden. I standardtemaer er dette modules > cart > cart.tpl.

4. Indsæt koden i bunden af filen, og klik på Gem.

{$cartProductidsString = ''} 
{$counter = 1} 
{foreach $cartList.CartProductLine as $cartProduct} 
{if $counter==1} 
{assign var="cartProductidsString" value="{$cartProduct->ProductId}"} 
{else} 
{assign var="cartProductidsString" value="{$cartProductidsString},{$cartProduct->ProductId}"} 
{/if}
{$counter = $counter + 1}
{/foreach}
<span class="clerk" 
    data-template="@cart-page-cross-sell" 
    data-products="[{$cartProductidsString}]">
</span>

Exit Intent #

1. I my.clerk.io opretter du et Element med logikken Visitor Recommendations.

2. I DanDomain Admin, gå til Online Store > Design > Aktive designs > Rediger filer.

3. Find partials > body.tpl.

4. Kopiér embedkoden til bunden af filen og klik på Gem.

<span class="clerk"
    data-template="@exit-intent-visitor-recommendations"
    data-exit-intent="true">
</span>

Efter at have tilføjet dette, vises Exit Intent-popup’en, når en kunde fører musen over adressefeltet i deres browser.

Add-To-Basket Step #

Add-To-Basket Step er en kompleks funktion i DanDomain. Vi anbefaler, at du får en DanDomain-udvikler til at integrere den, eller springer dette trin over, hvis du ikke har udviklerressourcer tilgængelige.

1. Opret en ny CMS-side i DanDomain.
2. Tilføj embedkoderne til CMS-siden.

<span class="clerk"
    data-template="@powerstep-alternatives"
    data-products="[PRODUCT_ID]">
</span>

3. Tilføj en omdirigeringsregel til denne side, hver gang et produkt tilføjes til kurven.