Prestashop

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Prestashop.

Clerk.io offre più di 20 diversi tipi di logiche di prodotto, rendendo possibile mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare con le Recommendations utilizzando il modulo PrestaShop.

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

Configurazione dello 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.

Creare un Design #

Le Recommendations vengono mostrate di default come uno slider. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visualmente, oppure utilizzare i 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 da cui vuoi partire.
  4. Assegnagli un nome e clicca su Create design..
  5. Apporta tutte le modifiche desiderate al design.

Code Design #

  1. Vai su 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 design da zero usando il codice Liquid.

Se desideri un design di partenza, consulta il template Slider più sotto.

Creare un Element #

Questo contiene tutte le impostazioni usate per visualizzare le Recommendations e renderle integrabili sul tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements..
  2. Clicca su New Element..
  3. Assegnagli un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Es: “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona dal menu a tendina la logica di prodotto da utilizzare. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
  5. In Design seleziona dal menu a tendina il design che hai creato e scegli il numero di prodotti che vuoi mostrare.
  6. Clicca su Save in alto nella schermata.

Aggiungi al Sito #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Utilizzando Injection puoi inserire il codice grazie a un selettore CSS.
    • Utilizzando il Codice incorporato puoi inserire manualmente il codice nel tuo sito.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logiche vedrai il menu a tendina Choose your platform. In questi casi seleziona PrestaShop. Questo precompilerà il codice di incorporamento con i corretti shortcode di PrestaShop.

Configurazione tramite 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 di pagina, abilita e compila i template/contenuti:
    • Pagina Prodotto: imposta Enabled su Yes e assicurati che il campo dei template contenga gli ID degli Slider (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 su my.clerk.io #

  1. Vai su Recommendations > Elements..
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Qui hai due opzioni:
    • Utilizzando Injection puoi inserire il codice tramite un selettore CSS.
    • Utilizzando il Codice incorporato puoi inserire manualmente il codice nel tuo sito.
  5. Scegli l’opzione più semplice per te.
  6. Per il codice incorporato, aggiungi eventuale logica lato frontend per inserire, ad esempio, un ID prodotto o categoria. Questa dipende dalla logica scelta.

Per il codice incorporato su PrestaShop, i posizionamenti e i percorsi file più comuni sono:

  • Homepage: inserisci il codice di incorporamento nel template della homepage/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 codice di incorporamento 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 dovresti 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. Inserisci i codici di incorporamento nel template della homepage/blocco CMS (es: Ap PageBuilder RawHTML).

Se desideri mostrare tutti i banner uno sopra l’altro, inserisci tutti i codici di incorporamento nello stesso box. Nel caso tu voglia dividerli lungo la Home Page, ripeti semplicemente il processo per ogni sezione.

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 il codice di incorporamento.
  3. Vai nei file del tema PrestaShop e trova il file che genera le pagine Categoria, di solito themes/TEMPLATE_NAME/category.tpl.
  4. Inserisci il codice di incorporamento subito 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 i codici di incorporamento.
  3. Nei file del tema PrestaShop, trova il file che genera le pagine prodotto, di solito themes/TEMPLATE_NAME/product.tpl.
  4. Inserisci i codici di incorporamento subito sotto la descrizione del prodotto. Imposta data-products su [{$smarty.get.id_product}].

Step Aggiungi 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”. È importante per il corretto funzionamento del codice di incorporamento.
  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 si trova all’interno del codice incorporamento come nome del template dati, 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 di Clerk sotto Recommendations -> Elements -> Edit (il numero di elementi varia da 1 a 4 per lo step Aggiungi al Carrello).

Per permettere la visualizzazione dello step Aggiungi al Carrello, 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 il codice di incorporamento.
  3. Vai nei file del tema PrestaShop e trova il file che genera le pagine Carrello, di solito themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserisci il codice di incorporamento subito sotto i prodotti 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 attivarlo tramite il modulo oppure manualmente. Di seguito trovi i passaggi per entrambe le opzioni.

Configurazione tramite Modulo #

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

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

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

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

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

  5. Clicca su Save per attivare la funzione.

Configurazione Manuale #

Se desideri configurare manualmente Exit Intent, segui questi passaggi:

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

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

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

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

  5. Aggiungi data-exit-intent="true" al codice di incorporamento che hai appena inserito in visitor_tracking.tpl. Ad esempio:

<!-- 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 Exit Intent.

Template di Partenza #

Se desideri utilizzare code designs, questi template ti aiuteranno a iniziare.

Codice Slider #

Questo template visualizzerà uno slider standard con varie informazioni sul prodotto, che puoi adattare alle 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.