Prestashop

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Prestashop.

Clerk.io offre più di 20 diverse tipologie di logiche di prodotto, che rendono possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare Recommendations tramite il modulo PrestaShop.

Per le nostre best practice complete su quali Recommendations utilizzare, leggi questo articolo.

Configurazione Slider #

Le Recommendations vengono create con gli Elements che fanno riferimento a un Design. Di seguito 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 di default come slider. Questo permette agli utenti 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 un qualsiasi numero di elementi Recommendations che crei.

Design Editor #

  1. Vai a Recommendations > Designs e clicca su New Design..
  2. Scegli Product Slider.
  3. Dall’elenco dei modelli di design, scegli quello con cui vuoi iniziare.
  4. Assegnagli un nome e clicca su Create design..
  5. Apporta tutte le modifiche che desideri al design.

Code Design #

  1. Vai a 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 utilizzando Liquid code.

Se desideri un design di partenza, controlla il modello Slider più in basso.

Crea Contenuto #

Qui sono contenute tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai a Recommendations > Elements..
  2. Clicca su New Content..
  3. Assegna un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Es: “Home Page / Visitor Recommendations”.
  4. In Content type, seleziona dal menu a tendina la logica di prodotto che vuoi utilizzare. Puoi consultare 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. Clicca su Save in alto nella schermata.

Aggiunta al Sito Web #

Per aggiungere Clerk Recommendations al tuo sito web, hai tre opzioni differenti: Injection, Codice incorporato, e tramite il Modulo.

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usando injection puoi inserire il codice usando un selettore CSS.
    • Usando codice incorporato puoi inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione che ti è più comoda.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona PrestaShop. Questo precompilerà l’embedcode con i corretti shortcodes PrestaShop.

Configurazione Modulo #

Questa opzione è disponibile per le pagine Categoria, Carrello e Prodotto, Exit Intent e Powerstep.

  1. In PrestaShop, vai su Modules and Services > Clerk > Configure.
  2. Per ogni sezione della pagina, abilita e popola i template/contenuti:
    • Pagina prodotto: imposta Enabled su Yes e assicurati che il campo dei template contenga i tuoi Slider ID (separati da virgola, senza “@”).
    • Pagina categoria: imposta Enabled su Yes e aggiungi i tuoi Slider ID.
    • Pagina carrello: imposta Enabled su Yes e aggiungi il tuo Slider ID.
  3. Clicca su Save.

Configurazione my.clerk.io #

  1. Vai a Recommendations > Elements..
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Qui hai due opzioni:
    • Usando injection puoi inserire il codice usando un selettore CSS.
    • Usando codice incorporato puoi inserire manualmente il codice nel tuo sito web.
  5. Scegli l’opzione che ti è più comoda.
  6. Per il codice incorporato, aggiungi la logica frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Questo dipende dalla logica scelta.

Per il codice incorporato su PrestaShop, i posizionamenti e percorsi file tipici sono:

  • Homepage: inserisci il codice di embed nel template della homepage/blocco CMS (ad esempio, Ap PageBuilder RawHTML).
  • Pagina prodotto: themes/TEMPLATE_NAME/product.tpl — imposta data-products su [{$smarty.get.id_product}].
  • Pagina categoria: themes/TEMPLATE_NAME/category.tpl — imposta data-category su {$smarty.get.id_category}.
  • Pagina carrello: themes/TEMPLATE_NAME/shopping-cart.tpl — imposta data-products su [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Ecco un esempio completo di codice Recommendations embedded, con un ID prodotto di esempio:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[123]">
</span>

Pagine #

Di seguito trovi le pagine specifiche in cui dovresti inserire le Recommendations e quali tipi dovresti 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. Inserisci gli embedcode nel template della homepage/blocco CMS (ad esempio, Ap PageBuilder RawHTML).

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nello stesso box. Se invece vuoi suddividerli nella Home Page, segui semplicemente la procedura sopra più volte.

Pagina Categoria #

  1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona PrestaShop, e copia l’embedcode.
  3. Vai ai file del tema di PrestaShop e trova il file che genera le pagine Categoria. Solitamente è themes/TEMPLATE_NAME/category.tpl.
  4. Inserisci l’embedcode sotto il titolo e la descrizione. Imposta data-category su {$smarty.get.id_category}.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Slider con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu a tendina Insert into website > Choose your platform seleziona PrestaShop per ciascuno e copia gli embedcode.
  3. Nei file tema di PrestaShop, trova il file che genera le pagine prodotto. Solitamente è themes/TEMPLATE_NAME/product.tpl.
  4. Inserisci gli embedcode sotto la descrizione del prodotto. Imposta data-products su [{$smarty.get.id_product}].

Passaggio Aggiungi al Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Chiamalo “Add-To-Basket / Others Also Bought”. Questo è importante affinché l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Nel backend di PrestaShop, vai su Modules And Services -> Clerk -> Configure.
  5. In Powerstep Settings, inserisci gli ID degli elementi creati, separati da virgola, nel campo Templates. L’ID è riportato all’interno dell’embed code dell’element, ad esempio, data-template=@power-step-others-also-bought.
  6. Imposta Enabled su Yes.
  7. Clicca su Save.

Puoi trovare gli ID di ciascun elemento creato nel backend Clerk alla voce Recommendations -> Elements -> Edit (il numero di elementi varia tra 1 e 4 per il passaggio Add-To-Basket).

Per consentire la visualizzazione del passaggio Add-To-Basket, devi disattivare il carrello Ajax predefinito di PrestaShop:

  1. Nel backend di PrestaShop, vai su Modules And Services.
  2. Trova Cart Block e clicca su Configure.
  3. Imposta Ajax cart su No.
  4. Clicca su Save.

Pagina Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Nel menu a tendina Insert into website > Choose your platform seleziona PrestaShop, e copia l’embedcode.
  3. Vai ai file del tema di PrestaShop e trova il file che genera le pagine Carrello. Solitamente è themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserisci l’embedcode sotto gli articoli del carrello e il pulsante checkout. Imposta data-products su [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Exit Intent #

  1. In my.clerk.io, crea un Element con la logica Visitor Recommendations.
  2. Puoi attivarla tramite modulo o manualmente. Qui sotto i passaggi per entrambe le opzioni.

Configurazione Modulo #

Per configurare Exit Intent tramite modulo, segui questi cinque passaggi:

  1. Crea un nuovo Content in my.clerk.io e chiamalo Exit Intent.

  2. Scegli una logica — suggeriamo “Visitor Recommendations”.

  3. Nel backend PrestaShop, vai su Modules and Services nel menu laterale e trova Clerk module.

  4. Trova Exit Intent Settings. Imposta Enabled su YES e assicurati che il campo Template contenga “exit-intent”.

  5. Clicca su Save per attivarla.

Configurazione Manuale #

Se vuoi configurare manualmente Exit Intent, segui questi passaggi:

  1. Crea un nuovo Content in my.clerk.io e chiamalo Exit Intent.

  2. Stilizza il tuo slider in Designs su my.clerk.io.

  3. Scegli una logica — suggeriamo “Visitor Recommendations”.

  4. Da Insert Into Website, copia il codice embed fornito in questo file di PrestaShop appena sopra lo script di tracciamento Clerk.io: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Aggiungi data-exit-intent="true" al codice embed che hai appena inserito in visitor_tracking.tpl. Così:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Nota: Tutte le recommendations che contengono data-exit-intent="true" attiveranno il pop-up di exit intent.

Template di partenza #

Se desideri usare i code designs, questi template possono aiutarti a iniziare.

Codice Slider #

Questo template visualizzerà uno slider standard con varie informazioni sul prodotto, che puoi personalizzare secondo le tue esigenze.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.