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

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 base per impostare un Element.

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

Creare un Design #

Le Recommendations vengono mostrate come uno slider per impostazione predefinita. Questo consente ai clienti di visualizzare più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo in modo visuale, 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. Dall’elenco dei template di design, scegli quello con cui vuoi iniziare.
4. Assegnagli un nome e clicca su Create design.
5. Apporta 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. Assegnagli un nome e clicca su Create design.
4. Crea un code design da zero usando Liquid code.

Creare un Element #

Questo contiene tutte le impostazioni utilizzate per visualizzare 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. Assegnagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Ad esempio, “Home Page / Visitor Recommendations”.
4. In Element type, seleziona dal menu a tendina la product logic che vuoi utilizzare. Puoi vedere una panoramica di tutte le product logics qui.
5. In Design seleziona dal menu a tendina il design che hai creato e scegli il numero di prodotti da mostrare.
6. Clicca su Save in alto nello schermo.

Aggiungi al Sito Web #

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

Pagine #

Di seguito sono riportate le pagine specifiche su cui inserire le 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 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 del webshop compresa la homepage, cerca un’istruzione IF che identifichi la front page. Cerca una delle seguenti:

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

5. Copia i codici embed all’interno di questa istruzione IF. 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. 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 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 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 embed nel file, sotto il titolo e la descrizione (di solito circa 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}

L’istruzione IF garantisce 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. 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 embed in fondo al file e clicca su Gem.

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

Dopo averlo aggiunto, il popup Exit Intent verrà mostrato quando un cliente passa il mouse sopra la barra degli indirizzi del browser.

Passo Aggiungi-al-Carrello #

L’Add-To-Basket Step è una funzionalità complessa in ScanNet. Consigliamo di farla integrare da uno sviluppatore ScanNet, o saltare questo step se non disponi di risorse di sviluppo disponibili.

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