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 med at bruge et Clerk.js setup i SmartWeb.

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

Slider Setup #

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

Ved at følge trinnene i my.clerk.io > Settings > Setup Guides oprettes Elements til vores Best Practices automatisk.

Opret Design #

Recommendations vises som standard som en slider. Dette gør det muligt for kunderne 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 fra listen over designtemplates den, du vil starte med.
4. Giv det et navn og klik på Create design.
5. Lav 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 at bruge Liquid code.

Opret Element #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations og gøre det indlejringsbart 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 navngive det baseret på siden og logikken, 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 product logics her.
5. Under Design vælger du det design, du har oprettet, fra dropdown-menuen og vælger, hvor mange 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 valgmuligheder:
   • Brug af injection giver mulighed for at indsætte koden ved at bruge en CSS selector.
   • Brug af embedded code gør, at du kan indsætte koden manuelt på din hjemmeside.
3. Vælg den mulighed, der er nemmest for dig at bruge.

Sider #

Nedenfor er de specifikke sider, hvor du skal indsætte Recommendations, og hvilken type du skal bruge, for at følge vores Best Practices.

Forside #

1. I my.clerk.io, opret 3 Elements med følgende logikker:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. I SmartWeb Admin, 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, led efter en IF-sætning, der identificerer forsiden. Led efter enten:

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

5. Kopiér embedcodes 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, opret 2 Elements med følgende logikker:

   • Best Alternative Products
   • Best Cross-Sell Products

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

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

4. Kopiér embedcodes 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, opret et Element med logikken Bestsellers In Category.

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

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

4. Kopiér embedcode 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å search siden, da begge bruger den samme template-fil.

Kurvside #

1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.

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

3. Find filen, der genererer kurvsiden. I standardtemaer er det 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, opret et Element med logikken Visitor Recommendations.

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

3. Find partials > body.tpl.

4. Kopiér embedcode 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, vil Exit Intent-popup’en vises, 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 tilgængelige.

1. Opret en ny CMS-side i SmartWeb.
2. Tilføj embedcodes 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 lægges i kurven.