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 et Clerk.js setup i DanDomain.

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. Nedenfor finder du den grundlæggende vejledning for opsætning af et Element.

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

Opret Design #

Recommendations vises som standard som en slider. 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 fra listen af designskabeloner den, du vil starte med.
4. Giv det et navn og klik 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 det et navn og klik Create design.
4. Opret et code design fra bunden med Liquid code.

Opret Element #

Dette indeholder alle indstillingerne brugt til at vise Recommendations, og gør det muligt at integrere det på dit website. Følg disse trin for hver Recommendations-banner, du vil oprette.

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

Tilføj til Website #

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

Sider #

Nedenfor 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, opret 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 webshop-sider inklusiv forsiden, skal du lede efter et IF-statement, der identificerer forsiden. Kig efter enten:

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

5. Kopiér embedcodes indenfor dette IF-statement. Det sikrer, at bannere kun vises på forsiden.

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

6. Klik Gem for at gemme.

Produkt Side #

1. I my.clerk.io, opret 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 embedcodes til bunden af denne fil og klik Gem.

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

Kategori Side #

1. I my.clerk.io, opret 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 embedcode til filen et sted under titel og beskrivelse (typisk omkring linje 92). Klik herefter Gem.

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

IF-statementet sikrer, at banneret kun vises på kategorisider og ikke på søgesiden, da begge bruger samme template-fil.

Kurv Side #

1. I my.clerk.io, opret 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 nederst i filen og klik 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 DanDomain 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 Gem.

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

Efter du har tilføjet dette, vil Exit Intent-popuppen blive vist, når en kunde bevæger musen over adresselinjen i deres browser.

Læg i kurv-step #

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

1. Opret en ny CMS-side i DanDomain.
2. Tilføj embedcodes 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.