Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt at vise fuldstændigt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang, når du bruger en Clerk.js-opsætning i ScanNet.

For vores fulde 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 er den grundlæggende guide til opsætning af et Element.

Hvis du følger trinene i my.clerk.io > Settings > Setup Guides, oprettes Elementerne 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-elementer, du opretter.

Design Editor #

1. Gå til Recommendations > Designs og klik på New Design.
2. Vælg Product Slider
3. Vælg den designskabelon, du vil starte med, fra listen.
4. Giv det et navn, og klik på Create design.
5. Foretag eventuelle ønskede ændringer 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 codedesign fra bunden ved hjælp af Liquid code.

Opret Element #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations og gøre det indlejeligt på dit website. Følg disse trin for hver Recommendations-banner, du vil oprette.

1. Gå til Recommendations > Elements.
2. Klik på New Element.
3. Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
4. I Element type, vælg den produktlogik, du vil bruge fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
5. I Design vælg det design, du har oprettet, fra dropdown-menuen og vælg det antal produkter, du vil vise.
6. Klik på Save øverst på skærmen.

Tilføj til website #

1. Åbn fanen Insert into website.
2. Her har du to muligheder:
   • Brug af injection gør det muligt at indsætte koden ved hjælp af en CSS selector.
   • Brug af embedded code gør det muligt manuelt at indsætte koden på dit website.
3. Vælg den mulighed, der er nemmest 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 skal du oprette 3 Elements med følgende logikker:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

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

3. Find filen index.tpl.

4. Da denne fil genererer alle webshop-sider inklusive forsiden, skal du kigge efter en IF-sætning, der identificerer forsiden. Kig efter enten:

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

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

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

6. Klik på Gem for at gemme.

Produkt-side #

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

   • Best Alternative Products
   • Best Cross-Sell Products

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

3. Find den fil, der genererer produkt-siden. I standardtemaer er det 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>

Kategori-side #

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

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

3. Find den fil, der genererer dine Kategori-sider. I standardtemaer er det modules > product > product-list.tpl.

4. Kopiér embedkoden til filen et sted under titel og beskrivelse (typisk 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å Search-siden, da begge bruger samme skabelonfil.

Kurv-side #

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

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

3. Find den fil, der genererer Kurv-siden. I standardtemaer er det modules > cart > cart.tpl.

4. Indsæt koden nederst i 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 skal du oprette et Element med logikken Visitor Recommendations.

2. I ScanNet 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 hen over adressefeltet i deres browser.

Add-To-Basket Step #

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

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

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

3. Tilføj en redirect-regel til denne side, hver gang et produkt lægges i kurven.