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

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

Configurazione slider #

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

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

Crea Design #

Le Recommendations vengono mostrate come slider in modo predefinito. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure utilizzare i code designs.

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

Puoi utilizzare la Setup Guide sotto Recommendations - Crea un design per i tuoi elementi recommendations per creare rapidamente un Design che abbia la stessa palette colori e stile del tuo webshop.

Fai clic su Publish quando sei soddisfatto dello stile.

Puoi facilmente modificarlo successivamente, sotto Recommendations - Designs, quindi fai clic sul pulsante di modifica.

Crea Content #

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. Fai clic su New Content.
3. Assegnagli un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che desideri utilizzare. Es: “Pagina Home / Visitor Recommendations”.
4. In Content 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 che hai creato dal menu a tendina e scegli il numero di prodotti da mostrare.
6. Fai clic su Save in cima alla pagina.

Con la Setup Guide, puoi vedere in quali pagine installare Recommendations e quali tipi utilizzare per attivare la nostra Best Practice. Ogni passaggio della Setup Guide si concentra su una specifica pagina del webshop e contiene informazioni su:

• Perché le recommendations sono importanti su questa pagina.
• Quali tipi di recommendations utilizzare.
• Dove posizionarle sulla pagina.

Fai clic per ogni tipo di recommendations che desideri utilizzare e segui i passaggi.

Attenzione: cliccando solo su ciascun blocco di Recommendations diventeranno verdi come se fossero installati - ma non lo sono - devi ancora fare clic e seguire i passaggi.

Aggiungi al sito web #

Per aggiungere le Clerk Recommendations sul tuo sito web, è necessario configurare l’integrazione VTEX.

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

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

2. Aggiungi il blocco clerkio_recommendations ovunque sul 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. Cliccaci sopra.

4. Compila le informazioni richieste nel blocco:
   • Block Class Name: inserisci un identificatore univoco per il blocco all’interno della pagina in cui viene usato, ad esempio clerk-product-page-alternatives
   • Template Name: inserisci l’ID fornito da Clerk nel Content creato in precedenza.
   • Product Logic: abbina la logica delle recommendations a quella specificata nel Content creato in precedenza su Clerk. Le product logics disponibili sono:

Pagine #

Di seguito sono riportate le pagine specifiche in cui 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. 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 in base al tuo Content.

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. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché il codice embed funzioni correttamente.
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 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 Product Logic, e impostalo per attivarsi su exit intent.

Template di partenza #

Se desideri utilizzare i code designs, questi template ti permettono di iniziare.

Codice slider #

Questo template renderà uno slider standard con diverse informazioni prodotto, che puoi personalizzare in base alle tue esigenze.