Recommendations

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare un Clerk.js setup in DanDomain.

Per le nostre Best Practices complete, leggi questo articolo su quali Recommendations utilizzare.

Configurazione dello Slider #

Le Recommendations vengono create con Elements che fanno riferimento a un Design. Di seguito trovi la guida di base per configurare un Element.

Seguendo i passaggi in my.clerk.io > Settings > Setup Guides verranno creati automaticamente gli Elements secondo le nostre Best Practices.

Creare un Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente tramite il Design Editor, oppure utilizzare i code designs.

Un design può essere riutilizzato per un numero qualsiasi di elementi Recommendations che crei.

Design Editor #

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Product Slider
3. Dalla lista di template, scegli quello da cui vuoi partire.
4. Dagli un nome e clicca su Create design.
5. Apporta le modifiche desiderate al design.

Code Design #

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Other designs > Blank > Code.
3. Dagli un nome e clicca su Create design.
4. Crea un code design da zero utilizzando Liquid code.

Creare un Element #

Questo contiene tutte le impostazioni per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner di Recommendations che desideri creare.

1. Vai su Recommendations > Elements.
2. Clicca su New Element.
3. Dagli un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che desideri utilizzare. Ad esempio, “Home Page / Visitor Recommendations”.
4. In Element type, seleziona la logica di prodotto che vuoi utilizzare dal menu a tendina. Puoi vedere la panoramica di tutte le product logics qui.
5. In Design seleziona dal menu a tendina il design creato e scegli il numero di prodotti da mostrare.
6. Clicca su Save in alto.

Aggiunta al Sito #

1. Apri la scheda Insert into website.
2. Qui hai due opzioni:
   • Utilizzare injection ti consente di inserire il codice usando un selettore CSS.
   • Utilizzare embedded code ti consente di inserire il codice manualmente nel tuo sito.
3. Scegli l’opzione più semplice per te.

Pagine #

Di seguito sono elencate le pagine specifiche in cui dovresti inserire Recommendations e quali tipi utilizzare, per seguire le nostre Best Practices.

Homepage #

1. In my.clerk.io, crea 3 Elements con le seguenti logiche:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Nel pannello di amministrazione DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file index.tpl.

4. Poiché questo file genera tutte le pagine del webshop inclusa la homepage, cerca una IF-statement che identifichi la front page. Cerca uno dei seguenti:

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

5. Copia i codici di embedding all’interno di questa IF-statement. In questo modo i banner appariranno solo nella homepage.

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

6. Clicca su Gem per salvare.

Pagina Prodotto #

1. In my.clerk.io, crea 2 Elements con le seguenti logiche:

   • Best Alternative Products
   • Best Cross-Sell Products

2. Nel pannello di amministrazione DanDomain, vai su Kontrolpanel > Design Manager > Rediger filer.

3. Trova il file che genera la pagina di prodotto. Nei temi standard, questo è modules > product > product-entity.tpl.

4. Copia i codici di embedding sul fondo di questo file e clicca su Gem.

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

Pagina Categoria #

1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.

2. Nel pannello di amministrazione DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file che genera le tue pagine Categoria. Nei temi standard, questo è modules > product > product-list.tpl.

4. Copia il codice di embedding nel file, subito sotto il titolo e la descrizione (di solito verso la riga 92). Poi clicca su Gem.

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

La IF-statement assicura che il banner venga mostrato solo sulle pagine categoria e non sulla pagina Search, poiché entrambe usano lo stesso file template.

Pagina Carrello #

1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.

2. Nel pannello di amministrazione DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file che genera la pagina Carrello. Nei temi standard, questo è modules > cart > cart.tpl.

4. Inserisci il codice alla fine del file e clicca su 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. In my.clerk.io, crea un Element con la logica Visitor Recommendations.

2. Nel pannello di amministrazione DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova partials > body.tpl.

4. Copia il codice di embedding alla fine del file e clicca su Gem.

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

Dopo aver aggiunto questo, il popup Exit Intent apparirà quando un cliente sposta il mouse sulla barra degli indirizzi del browser.

Passaggio Add-To-Basket #

Il Passaggio Add-To-Basket è una funzionalità complessa in DanDomain. Consigliamo di rivolgersi a uno sviluppatore DanDomain per integrarlo, o di saltare questo passaggio se non hai risorse di sviluppo disponibili.

1. Crea una nuova pagina CMS in DanDomain.
2. Aggiungi i codici di embedding alla pagina CMS.

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

3. Aggiungi una regola di reindirizzamento a questa pagina ogni volta che un prodotto viene aggiunto al carrello.