Woocommerce

Recommendations

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

Clerk.io offre più di 23 diverse tipologie di logiche di prodotto, rendendo possibile la visualizzazione di prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare Recommendations tramite il plugin WooCommerce.

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

Configurazione dello slider #

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

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

Crea Design #

Le Recommendations vengono mostrate di default come uno slider. Questo permette ai clienti di visualizzare più prodotti con meno clic. Puoi utilizzare il Design Editor per configurarlo visivamente, 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, seleziona quello con cui vuoi iniziare.
  4. Assegna un nome e clicca su Create design.
  5. Apporta 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 codice da zero utilizzando il codice Liquid.

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

Crea Contenuto #

Qui sono raccolte tutte le impostazioni utilizzate per visualizzare le Recommendations e renderle incorporabili sul tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri creare.

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

Aggiungi al sito web #

Per aggiungere Clerk Recommendations al tuo sito web, 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 usando un selettore CSS.
    • Usare embedded code ti consente di inserire manualmente il codice sul sito.
  3. Scegli l’opzione che ti risulta più semplice.
  4. Per alcune Logics vedrai il menu Choose your platform. In questi casi seleziona WooCommerce. Questo precompilerà l’embedcode con i corretti shortcodes di WooCommerce.

Configurazione tramite Plugin #

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

  1. Vai al backend di WooCommerce.
  2. Seleziona Clerk nel menu laterale sinistro.
  3. Trova l’impostazione dell’Elemento che desideri attivare.
  4. Clicca sulla checkbox Enabled.
  5. Assicurati che il campo Content contenga il nome del tuo Recommendation Element (escludendo “@”). È indicato all’interno dell’embed code dell’Elemento come nome del data template, 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 consente di inserire manualmente il codice sul sito.
  5. Scegli l’opzione che ti risulta più semplice.
  6. Per l’embedded code, aggiungi eventuale logica frontend necessaria per inserire, ad esempio, un ID prodotto o categoria. Questo dipende dalla logica che scegli.

Ecco un esempio completo di Recommendations embed code, 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 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 nel template/blocco della homepage.

Se desideri mostrare tutti i banner uno sopra l’altro, inserisci tutti gli embedcode nella stessa posizione. Se invece vuoi suddividerli nella Home Page, ripeti semplicemente il processo 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 WooCommerce e copia l’embedcode.
  3. Inserisci l’embedcode nel template della pagina categoria o utilizza le impostazioni del plugin per abilitarlo.

Pagina Prodotto #

  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 embedcode.
  3. Inserisci gli embedcode nel template della pagina prodotto o usa le impostazioni del plugin per abilitarli.

Passaggio 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”. Questo è importante affinché l’embedcode funzioni correttamente.
  3. Clicca su Save in alto alla pagina.
  4. Nel backend WooCommerce, dal menu laterale, vai su Pages.
  5. In alto, clicca su Add New.
  6. Dai alla pagina Powerstep un nome significativo, come “Prodotto aggiunto al carrello!”, in quanto verrà visualizzato come titolo sul tuo powerstep.
  7. Nel campo di testo grande, inserisci [clerk-powerstep] e clicca su Publish.
  8. Vai su Clerk > Clerk Settings nel menu laterale e trova Powerstep Settings.
  9. Inserisci nel campo Content gli ID degli Elementi creati, separati da virgole. L’ID è riportato nell’embed code dell’Elemento come data template name, es: data-template=@power-step-others-also-bought.
  10. Seleziona la pagina creata sotto Powerstep Page e spunta Enabled.
  11. Clicca su Save Settings.

Se riscontri eventuali problemi relativi al powerstep, consulta questa guida.

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 WooCommerce e copia l’embedcode.
  3. Inserisci l’embedcode 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 passaggi per entrambe le opzioni.

Configurazione tramite Plugin #

Per configurare Exit Intent tramite plugin, segui questi 5 passaggi:

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

  2. Scegli una logica – suggeriamo “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 manualmente l’Exit-Intent, segui questi passaggi:

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

  2. Personalizza il tuo Element 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 WooCommerce, proprio sopra lo script di tracking Clerk.io: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Aggiungi data-exit-intent="true" al codice che hai appena inserito 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 contengono 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.

Slider Code #

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