Recommendations

Clerk.io offre più di 23 diversi tipi di logiche di prodotto, rendendo possibile la visualizzazione di prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare una Clerk.js setup in VTEX.

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

Configurazione Slider #

Le Recommendations vengono create con gli 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 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 utilizzare i code designs.

Un design può essere riutilizzato per qualsiasi numero di elements Recommendations che crei.

Puoi utilizzare la Setup Guide sotto Recommendations - Create a design for your recommendations elements per creare rapidamente un Design che abbia lo stesso schema di colori e stile del tuo webshop.

Clicca su Publish quando sei soddisfatto dello stile.

Puoi modificare facilmente questo in seguito, sotto Recommendations - Designs, poi su modifica.

Crea 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 desideri creare.

1. Vai su Recommendations > Elements.
2. Clicca su New Element.
3. Dagli un nome descrittivo. Ti consigliamo di chiamarlo in base alla pagina e alla logica che desideri utilizzare. Ad es., “Home Page / Visitor Recommendations”.
4. In Element type, seleziona la logica di prodotto che desideri utilizzare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
5. In Design seleziona il design creato dal menu a tendina e scegli il numero di prodotti che desideri mostrare.
6. Clicca su Save in cima allo schermo.

Con la Setup Guide, puoi vedere su quali pagine installare le recommendations e quali tipi usare, per mettere in pratica le nostre Best Practice. Ogni passaggio nella Setup Guide si concentra su una specifica pagina del webshop e contiene informazioni riguardo:

• Perché le recommendations sono importanti su quella pagina.
• Quali tipi di recommendations utilizzare.
• Dove devono essere posizionate sulla pagina.

Clicca su ciascun tipo di recommendations che vuoi utilizzare e segui i passaggi.

Tieni presente: solo cliccando su ciascun blocco di Recommendations diventeranno verdi come se fossero installati - non lo sono - devi ancora cliccare e seguire i passaggi.

Aggiungi al Sito Web #

Per aggiungere Clerk Recommendations al tuo sito web, devi configurare l’integrazione VTEX.

1. Nel tema del tuo store, aggiungi clerkiopartnerdk.integration-vtex 1.x come peerDependency nel file manifest.json:

"peerDependencies": {
"clerkiopartnerdk.integration-vtex": "1.x"
}

2. Aggiungi il blocco clerkio_recommendations in qualsiasi punto del tuo store. Esempio: in home.json

{
  "store.home": {
    "blocks": [
      "responsive-layout.desktop#homepage",
      "responsive-layout.mobile#homepage"
    ]
  },
  "responsive-layout.desktop#homepage": {
    "children": ["clerkio_recommendations"]
  }
}

3. Vai su VTEX Site Editor e nel menu laterale destro verrà visualizzato un blocco ClerkIO. Clicca su di esso.

4. Compila le informazioni richieste nel blocco:
   • Block Class Name: inserisci un identificatore univoco per il blocco all’interno della pagina in cui viene utilizzato. Ad es. clerk-product-page-alternatives
   • Template Name: inserisci l’ID fornito da Clerk per l’Element creato in precedenza.
   • Product Logic: allinea la recommendation logic a quella specificata nell’Element creato precedentemente su Clerk. Le logiche di prodotto disponibili sono:

Pagine #

Di seguito vengono indicate 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. Aggiungi il blocco clerkio_recommendations al layout della homepage in VTEX Site Editor.
3. Configura ciascun blocco con il Template Name e la Product Logic appropriati.

Pagina Categoria #

1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.
2. Aggiungi il blocco clerkio_recommendations al layout della pagina categoria.
3. Configura il blocco con il Template Name e imposta la Product Logic per corrispondere al tuo Element.

Pagina Prodotto #

1. In my.clerk.io, crea 2 Elements con le seguenti logiche:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Aggiungi il blocco clerkio_recommendations al layout della pagina prodotto.
3. Configura ciascun blocco con il Template Name e la Product Logic appropriati.

Step Aggiunta al Carrello #

1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
2. Assegnagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante per il corretto funzionamento dell’embedcode.
3. Clicca su Save in cima alla pagina.
4. Aggiungi il blocco clerkio_recommendations allo step/pagina di aggiunta al carrello.
5. Configura il blocco con il Template Name e la Product Logic.

Pagina Carrello #

1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
2. Aggiungi il blocco clerkio_recommendations al layout della pagina carrello.
3. Configura il blocco con il Template Name e la Product Logic.

Exit Intent #

1. In my.clerk.io, crea un Element con la logica Visitor Recommendations.
2. Aggiungi il blocco clerkio_recommendations al layout globale.
3. Configura il blocco con il Template Name e la Product Logic, e impostalo per essere attivato su exit intent.

Template di partenza #

Se desideri utilizzare code designs, questi template possono aiutarti a cominciare.

Slider Code #

Questo template renderizzerà uno slider standard con varie informazioni sul prodotto, che potrai personalizzare in base alle tue esigenze.