Woocommerce

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in WooCommerce.
Recommendations WooCommerce

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 con Recommendations utilizzando il plugin WooCommerce.

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

Configurazione dello Slider #

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

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

Crea Design #

Le Recommendations sono mostrate come slider di default. Questo consente ai clienti 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 su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Dalla lista dei template di design, scegli quello con cui vuoi iniziare.
  4. Assegna un nome e clicca su Create design.
  5. Apporta tutte le modifiche che desideri 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 design da zero utilizzando Liquid code.

Se vuoi un template iniziale, dai un’occhiata al Slider template qui sotto.

Crea Element #

Questo contiene tutte le impostazioni utilizzate per visualizzare le Recommendations e renderle integrabili nel tuo sito. 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. Ti consigliamo di nominarlo in base alla pagina e alla logica che vuoi usare. Es. “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi utilizzare dal menu a discesa. Puoi vedere una panoramica di tutte le logiche di prodotto qui.
  5. In Design seleziona il design che hai creato dal menu a discesa e scegli quanti prodotti mostrare.
  6. Clicca su Save in alto allo schermo.

Aggiungi al Sito Web #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti consente di inserire il codice tramite un selettore CSS.
    • Usare embedded code ti permette di inserire il codice manualmente nel sito.
  3. Scegli l’opzione che ti risulta più semplice.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. Seleziona WooCommerce in questi casi. Questo precompilerà l’embedcode con le shortcodes WooCommerce corrette.

Configurazione Plugin #

Questa opzione è disponibile per Category, Cart, Product pages, Exit Intent e Powerstep.

  1. Accedi al backend di WooCommerce.
  2. Seleziona Clerk nel menu laterale a sinistra.
  3. Trova l’impostazione dell’Element che vuoi attivare.
  4. Clicca sulla casella con etichetta Enabled.
  5. Assicurati che il campo Element contenga il nome del tuo Recommendation Element (escludendo “@”). È indicato nel codice embed dell’Element come data template name, es. data-template=@product-page-alternatives.

Configurazione 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:
    • Usare injection ti consente di inserire il codice tramite un selettore CSS.
    • Usare embedded code ti permette di inserire il codice manualmente nel sito.
  5. Scegli l’opzione che ti risulta più semplice.
  6. Per il codice embedded, aggiungi eventuale logica di frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Questo dipende dalla logica scelta.

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

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

Pagine #

Di seguito sono indicate le pagine specifiche dove inserire le Recommendations, e quali tipi usare, per seguire le nostri Best Practices.

Homepage #

  1. In my.clerk.io, crea 3 Elements con le seguenti logiche:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserisci gli embed code nel template/blocco della homepage.

Se vuoi mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embed code nello stesso punto. Se vuoi dividerli in varie sezioni della Home Page, ripeti il processo sopra più volte.

Category Page #

  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 WooCommerce e copia l’embed code.
  3. Inserisci l’embed code nel template della pagina categoria o usa le impostazioni del plugin per abilitarlo.

Product Page #

  1. In my.clerk.io, crea 2 Elements con le seguenti logiche:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Nel menu a tendina Insert into website > Choose your platform seleziona WooCommerce per ciascuno di essi e copia gli embed code.
  3. Inserisci gli embed code nel template della pagina prodotto o usa le impostazioni del plugin per abilitarli.

Add-To-Basket Step #

  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’embed code funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Nel backend di WooCommerce, nel menu laterale a sinistra, vai su Pages.
  5. In alto nella pagina, clicca su Add New.
  6. Dai alla pagina powerstep un nome significativo, tipo “Prodotto aggiunto al carrello!”, che sarà visualizzato come titolo sul tuo powerstep.
  7. Nel campo di testo grande, digita [clerk-powerstep] e clicca su Publish.
  8. Vai su Clerk > Clerk Settings nel menu laterale e trova Powerstep Settings.
  9. Inserisci nel campo Element gli ID degli Elements che hai creato, separati da virgola. L’ID è indicato nel codice embed dell’Element come data template name, es. data-template=@power-step-others-also-bought.
  10. Seleziona il nome della pagina creata sotto Powerstep Page e spunta Enabled.
  11. Clicca su Save Settings.

Se hai problemi relativi al powerstep consulta questa guida.

Cart Page #

  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 WooCommerce e copia l’embed code.
  3. Inserisci l’embed code nel template della pagina carrello o usa le impostazioni del plugin per abilitarlo.

Exit Intent #

  1. In my.clerk.io, crea un Element con la logica Visitor Recommendations.
  2. Puoi attivarlo tramite plugin o manualmente. Di seguito i passi per entrambe le opzioni.

Configurazione Plugin #

Per impostare Exit Intent tramite il plugin, segui questi 5 passaggi:

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

  2. Scegli una logica per esso – Ti consigliamo “Visitor Recommendations”.

  3. Nel backend WooCommerce, vai su Clerk nel menu laterale e trova Exit-Intent Settings.

  4. Spunta Enabled e assicurati che il campo Template contenga “exit-intent”.

  5. Clicca su Save Settings per attivarlo.

Configurazione Manuale #

Se vuoi configurare Exit-Intent manualmente, segui questi passi:

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

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

  3. Scegli una logica per esso – Ti consigliamo “Visitor Recommendations”.

  4. Da Insert Into Website, copia il codice embed fornito in questo file WooCommerce subito sopra lo script di tracciamento Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Aggiungi data-exit-intent="true" al codice embed che hai appena posizionato in class-clerk-visitor-tracking.php. 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 Iniziali #

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

Codice Slider #

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