Recommendations

Clerk.io offre oltre 23 diversi tipi di logiche prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare quando si utilizza una 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 di base per configurare un Element.

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

Crea Design #

Le Recommendations vengono mostrate come uno slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare 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 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 Liquid code.

Crea Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations e rende possibile incorporarle nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri creare.

1. Vai su Recommendations > Elements.
2. Clicca su New Element.
3. Dagli un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Ad esempio, “Home Page / Visitor Recommendations”.
4. In Element type, seleziona la product logic 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 che vuoi 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 web.
3. Scegli l’opzione che ti è più comoda.

Pagine #

Di seguito trovi le pagine specifiche in cui 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 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 identifica 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. In 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 product page. 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. In 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 Category pages. Nei temi standard, questo è modules > product > product-list.tpl.

4. Copia il codice di incorporamento nel file, sotto il titolo e la descrizione (di solito 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 IF-statement garantisce che il banner sia visualizzato solo nelle pagine categoria e non nella pagina Search, poiché entrambe 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 di SmartWeb, vai su Online Store > Design > Aktive designs > Rediger filer.

3. Trova il file che genera la Cart page. 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 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 sulla barra degli indirizzi del browser.

Add-To-Basket Step #

L’Add-To-Basket Step è una funzionalità complessa in SmartWeb. Si consiglia di affidare l’integrazione a uno sviluppatore SmartWeb, o di saltare questo passaggio se non si dispone di risorse di sviluppo disponibili.

1. Crea una nuova pagina CMS in SmartWeb.
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 reindirizzamento a questa pagina ogni volta che un prodotto viene aggiunto al carrello.