Recommendations

Clerk.io offre più di 23 diversi tipi di logiche prodotto, rendendo possibile visualizzare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a usare una 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 automaticamente creati gli Elements per le nostre Best Practices.

Crea Design #

Le Recommendations vengono mostrate come uno slider di default. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi usare il Design Editor per configurarlo visivamente oppure utilizzare i code designs.

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

Design Editor #

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Product Slider
3. Dalla lista dei template di design, 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 usando Liquid code.

Crea Element #

Questo contiene tutte le impostazioni usate per visualizzare le Recommendations, rendendolo integrabile nel tuo sito web. Segui questi passaggi per ciascun banner Recommendations che vuoi creare.

1. Vai su Recommendations > Elements.
2. Clicca su New Element.
3. Assegna un nome descrittivo. Ti consigliamo di chiamarlo secondo la pagina e la logica che vuoi usare. Ad esempio, “Home Page / Visitor Recommendations”.
4. In Element type, seleziona la logica prodotto che vuoi utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche prodotto qui.
5. In Design seleziona il design che hai creato dal menu a discesa e scegli il numero di prodotti che vuoi mostrare.
6. Clicca su Save in alto nella schermata.

Aggiunta al Sito Web #

1. Apri la scheda Insert into website.
2. Qui hai due opzioni:
   • Usando injection puoi inserire il codice utilizzando un selettore CSS.
   • Usando embedded code puoi inserire il codice manualmente nel tuo sito web.
3. Scegli l’opzione più semplice da utilizzare per te.

Pagine #

Di seguito sono riportate le pagine specifiche dove dovresti inserire le Recommendations e quali tipi dovresti usare, 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. Nell’Admin di DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file index.tpl.

4. Poiché questo file genera tutte le pagine dello shop incluso l’homepage, cerca un’istruzione IF che identifica la front page. Cerca o:

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

5. Copia i codici di embed all’interno di questa istruzione IF. Questo garantisce che i banner appaiano solo sulla 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. Nell’Admin di DanDomain, vai su Kontrolpanel > Design Manager > Rediger filer.

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

4. Copia i codici di embed in fondo a 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. Nell’Admin di 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 embed nel file, dopo il titolo e la descrizione (di solito intorno alla linea 92). Poi clicca su Gem.

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

L’istruzione IF garantisce che il banner venga mostrato solo nelle pagine categoria e non nella 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. Nell’Admin di 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 in fondo al 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. Nell’Admin di DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova partials > body.tpl.

4. Copia il codice di embed in fondo al 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 verrà mostrato quando un cliente muove il mouse sulla barra degli indirizzi del browser.

Step Add-To-Basket #

Lo Step Add-To-Basket è una funzionalità complessa in DanDomain. Raccomandiamo di rivolgersi a uno sviluppatore DanDomain per integrarlo, o saltare questo passaggio se non si hanno risorse di sviluppo disponibili.

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

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

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