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 SmartWeb.

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

Configurazione dello slider #

Le Recommendations vengono create con gli Elements che fanno riferimento a un Design. Qui sotto trovi la guida base per configurare un Element.

Seguire i passaggi in my.clerk.io > Settings > Setup Guides crea automaticamente gli Elements per le nostre Best Practices.

Crea Design #

Le Recommendations vengono mostrate come slider di default. Questo permette ai clienti di vedere più prodotti con meno click. Puoi usare il Design Editor per configurarlo visivamente, oppure usare 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 con cui vuoi iniziare.
4. Dagli un nome e clicca su Create design.
5. Apporta eventuali 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 il Liquid code.

Crea Element #

Qui vengono inserite tutte le impostazioni per mostrare le Recommendations e renderle integrabili nel tuo sito. Segui questi passaggi per ciascun banner Recommendations che vuoi creare.

1. Vai su Recommendations > Elements.
2. Clicca su New Element.
3. Dagli un nome descrittivo. Ti 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 desiderata dal menu a tendina. Puoi vedere una panoramica di tutte le logiche prodotto qui.
5. In Design seleziona il design creato dal menu a tendina e scegli il numero di prodotti da mostrare.
6. Clicca su Save in alto alla schermata.

Aggiungi al sito web #

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

Pagine #

Ecco le pagine specifiche dove dovresti inserire le Recommendations e quali tipi usare per seguire le nostre Best Practices.

Homepage #

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

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. Nell’Admin di SmartWeb, 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 incorporamento all’interno di questa IF-statement. Così i banner appariranno solo sulla homepage.

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

6. Clicca su Gem per salvare.

Product Page #

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

   • Best Alternative Products
   • Best Cross-Sell Products

2. Nell’Admin di SmartWeb, 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 incorporamento in fondo a questo file e clicca su Gem.

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

Category Page #

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

2. Nell’Admin di SmartWeb, 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 incorporamento nel file, poco sotto il titolo e la descrizione (di solito attorno 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 IF-statement assicura che il banner venga mostrato solo nelle pagine di categoria e non nella pagina di Search, poiché entrambe usano lo stesso file template.

Cart Page #

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

2. Nell’Admin di SmartWeb, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file che genera la pagina Cart. 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. Su my.clerk.io, crea un Element con la logica Visitor Recommendations.

2. Nell’Admin di SmartWeb, 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 sposta il mouse sopra la barra degli indirizzi del proprio browser.

Fase Add-To-Basket #

La Fase Add-To-Basket è una funzione complessa in SmartWeb. Consigliamo di affidare l’integrazione a uno sviluppatore SmartWeb, o saltare questo passaggio se non disponi di risorse di sviluppo.

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