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 usare una Clerk.js setup in ScanNet.

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

Configurazione dello Slider #

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

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

Crea Design #

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

Un design può essere riutilizzato per un 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 tutte le modifiche che desideri 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 il Liquid code.

Crea Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che vuoi 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 vuoi usare. Es., “Home Page / Visitor Recommendations”.
4. In Element type, seleziona la logica di prodotto che vuoi usare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
5. In Design seleziona il design che hai creato dal menu a tendina e scegli il numero di prodotti da mostrare.
6. Clicca su Save in alto nella schermata.

Aggiungi al sito web #

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

Pagine #

Di seguito sono riportate le pagine specifiche in cui dovresti inserire le Recommendations, e quali tipi 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 ScanNet, 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, inclusa la homepage, cerca una dichiarazione IF che identifica la front page. Cerca:

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

5. Copia i codici di incorporamento all’interno di questa dichiarazione IF. Questo assicura che i banner appaiano 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. Nell’Admin di ScanNet, vai su Kontrolpanel > Design Manager > Rediger filer.

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

4. Copia i codici di incorporamento 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 ScanNet, vai su Online Store > Design > Aktive designs > Rediger filer.

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

4. Copia il codice di incorporamento nel file, sotto il titolo e la descrizione (solitamente intorno alla 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 dichiarazione IF assicura che il banner venga mostrato solo sulle pagine categoria e non su quella di ricerca, dato che 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 ScanNet, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file che genera la pagina carrello. Nei temi standard, è 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 ScanNet, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova partials > body.tpl.

4. Copia il codice di incorporamento 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 sopra la barra degli indirizzi del browser.

Passaggio Add-To-Basket #

L’Add-To-Basket Step è una funzionalità complessa in ScanNet. Consigliamo di contattare un developer ScanNet per integrarlo, oppure di saltare questo passaggio se non hai risorse di sviluppo disponibili.

1. Crea una nuova pagina CMS in ScanNet.
2. Aggiungi i codici di incorporamento 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.