Prestashop

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Prestashop.

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

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

Configurazione Slider #

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

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

Crea Design #

Le Recommendations sono mostrate come uno slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno click. Puoi configurarlo visualmente tramite il Design Editor, oppure usare i code designs.

Un design può essere riutilizzato per un numero qualsiasi 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 design template, scegli quello da cui partire.
  4. Dagli un nome e clicca su Create design..
  5. Apporta le modifiche desiderate al design.

Code Design #

  1. Vai su Recommendations > Designs e clicca su New Design..
  2. Scegli Other designs > Blank > Code..
  3. Assegna un nome e clicca su Create design..
  4. Crea un code design da zero usando il Liquid code.

Se vuoi un design di partenza, consulta il template Slider più in basso.

Crea Element #

Qui si trovano 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 su Recommendations > Elements..
  2. Clicca su New Element..
  3. Assegna un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che desideri utilizzare. Es.: “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi usare dal menu a discesa. Puoi vedere una panoramica di tutte le product logics qui.
  5. In Design seleziona il design creato dal menu e imposta il numero di prodotti da mostrare.
  6. Clicca su Save in alto.

Aggiungi al Sito #

Per aggiungere le Clerk Recommendations al tuo sito hai tre opzioni: Injection, Codice integrato e tramite il Modulo.

  1. Apri la scheda Insert into website.
  2. Hai due opzioni:
    • Con injection inserisci il codice tramite un selettore CSS.
    • Con codice integrato inserisci manualmente il codice sul tuo sito.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune logiche vedrai il menu a discesa Choose your platform. In questi casi seleziona PrestaShop. L’embedcode verrà così precompilato con i corretti shortcodes di PrestaShop.

Configurazione Modulo #

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

  1. In PrestaShop, vai su Modules and Services > Clerk > Configure.
  2. Per ciascuna sezione pagina, abilita e popola i template/contenuti:
    • Pagina prodotto: imposta Enabled su Yes e inserisci nel campo template gli Slider ID (separati da virgola, senza “@”).
    • Pagina categoria: imposta Enabled su Yes e inserisci gli Slider ID.
    • Pagina carrello: imposta Enabled su Yes e inserisci lo Slider ID.
  3. Clicca su Save.

Configurazione my.clerk.io #

  1. Vai su Recommendations > Elements..
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Hai due opzioni:
    • Usando injection puoi inserire il codice con un selettore CSS.
    • Usando codice integrato inserisci il codice manualmente sul tuo sito.
  5. Scegli l’opzione più semplice per te.
  6. Per codice integrato, aggiungi qualsiasi logica frontend necessaria, ad esempio l’inserimento dell’ID prodotto o categoria. Dipende dalla logica scelta.

Per il codice integrato su PrestaShop, le posizioni e i percorsi file tipici sono:

  • Homepage: inserisci l’embed code nella template/homepage o blocco CMS (es. 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 embed code per Recommendations, con un esempio di ID prodotto:

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

Pagine #

Di seguito sono riportate le pagine specifiche dove inserire le Recommendations e quali tipi usare, 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 nella template/homepage o nel blocco CMS (es. Ap PageBuilder RawHTML).

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nello stesso box. Per distribuirli su diverse aree della Home Page, segui più volte la procedura sopra.

Pagina Categoria #

  1. In my.clerk.io, crea un Element con la logica Bestsellers In Category.
  2. Nel menu a discesa Insert into website > Choose your platform, seleziona PrestaShop e copia l’embedcode.
  3. Vai nei 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 Sliders con queste logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu a discesa Insert into website > Choose your platform, seleziona PrestaShop per ognuno e copia gli embedcode.
  3. Nei file del tema PrestaShop, trova il file che genera le pagine prodotto, solitamente themes/TEMPLATE_NAME/product.tpl.
  4. Inserisci gli embedcode sotto la descrizione prodotto. Imposta data-products su [{$smarty.get.id_product}].

Fase Aggiungi 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é l’embedcode funzioni correttamente.
  3. Clicca su Save in alto alla pagina.
  4. Nel backend PrestaShop, vai su Modules And Services -> Clerk -> Configure.
  5. Nelle Powerstep Settings, inserisci gli ID degli elementi creati, separati da virgole, nel campo Templates. L’ID è all’interno dell’embed code come nome del template, es. 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 in Recommendations -> Elements -> Edit (il numero di elementi varia da 1 a 4 per la fase Add-To-Basket).

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

  1. Dal backend 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 discesa Insert into website > Choose your platform, seleziona PrestaShop e copia l’embedcode.
  3. Vai nei file del tema di PrestaShop e trova il file che genera la pagina Carrello, solitamente themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserisci l’embedcode sotto gli articoli del carrello e il bottone di 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 attivarlo via modulo o manualmente. Di seguito i passaggi per entrambe le opzioni.

Configurazione Modulo #

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

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

  2. Scegli una logica – consigliamo “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 attivarlo.

Configurazione Manuale #

Per configurare manualmente Exit Intent, segui questi passaggi:

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

  2. Personalizza lo slider in Designs su my.clerk.io.

  3. Scegli una logica – consigliamo “Visitor Recommendations”.

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

  5. Aggiungi data-exit-intent="true" al codice embed 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 vuoi utilizzare i code design, questi template ti possono aiutare a iniziare.

Codice Slider #

Questo template renderizza uno slider standard con varie informazioni sui prodotti, 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.