Prestashop

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Prestashop.

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

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

Configurazione Slider #

Le Recommendations vengono create tramite gli Slider che fanno riferimento a un Design. Qui sotto trovi la guida di base per configurare uno Slider.

Seguendo i passaggi in my.clerk.io > Settings > Setup Guides verranno creati automaticamente gli Slider delle nostre Best Practices.

Creazione Design #

Le Recommendations vengono mostrate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente o utilizzare i code designs.

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

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design..
  2. Scegli Product Slider.
  3. Dall’elenco dei template di design, scegli quello da cui vuoi partire.
  4. Dai 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. Dai un nome e clicca su Create design..
  4. Crea un design da zero utilizzando Liquid code.

Se vuoi un design di partenza, consulta il template Slider qui sotto.

Creazione Contenuto #

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

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

Aggiunta al Sito #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usando injection puoi inserire il codice utilizzando un selettore CSS.
    • Usando embedded code puoi inserire manualmente il codice nel tuo sito.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona PrestaShop. Così si compilerà automaticamente l’embedcode con gli shortcode corretti per 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 di pagina, abilita e inserisci i template/contenuti:
    • Pagina prodotto: imposta Enabled su Yes e assicurati che il campo 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 su Recommendations > Sliders..
  2. Seleziona il contenuto scelto.
  3. Apri la scheda Insert into website.
  4. Qui hai due opzioni:
    • Usando injection puoi inserire il codice tramite un selettore CSS.
    • Usando embedded code puoi inserire manualmente il codice nel tuo sito.
  5. Scegli l’opzione più semplice.
  6. Per l’embedded code, aggiungi qualsiasi logica frontend necessaria, ad esempio per inserire un ID prodotto o categoria. Questo dipende dalla logica scelta.

Per l’embedded code su PrestaShop, i posizionamenti e i percorsi file tipici sono:

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

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

Pagine #

Qui sotto sono elencate le pagine specifiche in cui inserire le Recommendations e quali tipi utilizzare, per seguire le nostre Best Practices.

Homepage #

  1. In my.clerk.io, crea 3 Slider con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci gli embedcode nel template homepage/blocco CMS (ad es., Ap PageBuilder RawHTML).

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nello stesso box. Se vuoi suddividerli nella Home Page, semplicemente ripeti il procedimento sopra più volte.

Pagina Categoria #

  1. In my.clerk.io, crea uno Slider 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 nei file tema di PrestaShop e trova il file che genera le pagine Categoria, di solito 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}].

Step Aggiunta al Carrello #

  1. In my.clerk.io, crea uno Slider con la logica Best Cross-Sell Products.
  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante per il funzionamento corretto dell’embedcode.
  3. Clicca su Save in alto nella pagina.
  4. Nel backend di PrestaShop, vai su Modules And Services -> Clerk -> Configure.
  5. Sotto Powerstep Settings, inserisci gli ID degli slider creati, separati da virgole, nel campo Templates. L’ID è riportato all’interno dell’embed code come nome del template data, es: data-template=@power-step-others-also-bought.
  6. Imposta Enabled su Yes.
  7. Clicca su Save.

Puoi trovare gli ID di ogni slider creato nel backend Clerk alla voce Recommendations -> Sliders -> Edit (il numero di slider varia da 1 a 4 per lo step Add-To-Basket).

Per permettere la visualizzazione dello step Add-To-Basket, è necessario 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 uno Slider 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 nei file tema di PrestaShop e trova il file che genera le pagine carrello, di solito themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserisci l’embedcode sotto gli articoli del carrello e il pulsante 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 uno Slider con la logica Visitor Recommendations.
  2. Puoi attivarlo tramite modulo o manualmente. Qui sotto i passaggi per entrambe le opzioni.

Configurazione Modulo #

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

  1. Crea un nuovo Content su 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 attivarlo.

Configurazione Manuale #

Se desideri configurare manualmente l’Exit Intent, segui questi passaggi:

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

  2. Style 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 PrestaShop, appena sopra lo script di tracking Clerk.io: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Aggiungi data-exit-intent="true" all’embed code 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 includono data-exit-intent="true" attiveranno il pop-up di exit intent.

Template di Partenza #

Se vuoi utilizzare code designs, questi template possono aiutarti a iniziare.

Codice Slider #

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