Recommendations

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

For vores fulde Best Practices, læs denne artikel om hvilke Recommendations du bør bruge.

Slider-opsætning #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor er den grundlæggende vejledning til at opsætte et Element.

Ved at følge trinene i my.clerk.io > Settings > Setup Guides opretter du automatisk Elements for vores Best Practices.

Opret Design #

Recommendations vises som standard som en slider. Dette giver kunderne mulighed for 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 fra listen over designtemplates den, du vil starte med.
4. Giv den et navn, og klik på Create design.
5. Foretag de ø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 den et navn, og klik på Create design.
4. Opret et kode-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 indlejre på din hjemmeside. 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 den logik, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
4. Under Element type, vælger du den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
5. Under Design vælger du det design, du har oprettet, i dropdown-menuen og vælger antallet af produkter, du ønsker at 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:
   • Med injection kan du indsætte koden ved hjælp af en CSS-selector.
   • Med embedded code kan du indsætte koden manuelt på din hjemmeside.
3. Vælg den løsning, der er nemmest for dig at bruge.

Sider #

Nedenfor er de specifikke sider, hvor du skal 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 SmartWeb Admin skal du gå til Online Store > Design > Aktive designs > Rediger filer.

3. Find filen index.tpl.

4. Da denne fil genererer alle sider i webshoppen inklusiv 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 inde 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 skal du oprette 2 Elements med følgende logikker:

   • Best Alternative Products
   • Best Cross-Sell Products

2. I SmartWeb Admin skal du 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 skal du oprette et Element med logikken Bestsellers In Category.

2. I SmartWeb Admin skal du 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 templatefil.

Kurvside #

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

2. I SmartWeb Admin skal du 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 skal du oprette et Element med logikken Visitor Recommendations.

2. I SmartWeb Admin skal du 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>

Når du har tilføjet dette, vil Exit Intent-popup’en blive vist, når en kunde holder musen over adressefeltet i deres browser.

Add-To-Basket Step #

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

1. Opret en ny CMS-side i SmartWeb.
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.