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 le nostre Best Practices complete, leggi questo articolo su quali Recommendations utilizzare.

Configurazione Slider #

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

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

Creare Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi utilizzare 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. Dall’elenco dei template, scegli quello con cui vuoi iniziare.
4. Assegna un nome e clicca su Create design.
5. Effettua tutte le modifiche desiderate al design.

Code Design #

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

Creare Element #

Qui sono incluse tutte le impostazioni utilizzate per mostrare le Recommendations e renderle incorporabili 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. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Ad esempio, “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 product logics 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 cima alla schermata.

Aggiungere 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 il codice incorporato ti consente di inserire manualmente il codice nel tuo sito web.
3. Scegli l’opzione che ti è più comoda.

Pagine #

Di seguito sono riportate le pagine specifiche dove 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. Nell’Admin SmartWeb, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Individua il file index.tpl.

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

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

5. Copia i codici embed all’interno di questa IF-statement. Così facendo i banner compariranno solo sulla homepage.

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

6. Clicca su Gem per salvare.

Product Page #

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

   • Best Alternative Products
   • Best Cross-Sell Products

2. Nell’Admin SmartWeb, vai su Kontrolpanel > Design Manager > Rediger filer.

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

4. Copia i codici embed 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. In my.clerk.io, crea un Element con la logica Bestsellers In Category.

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

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

4. Copia il codice embed nel file, sotto il titolo e la descrizione (solitamente 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 sulle pagine categoria e non sulla pagina Search, poiché utilizzano lo stesso file template.

Cart Page #

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

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

3. Individua 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. In my.clerk.io, crea un Element con la logica Visitor Recommendations.

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

3. Individua partials > body.tpl.

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

Add-To-Basket Step #

La Add-To-Basket Step è una funzionalità complessa in SmartWeb. Consigliamo di farla integrare da uno sviluppatore SmartWeb, o di saltare questo passaggio se non hai risorse di sviluppo disponibili.

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