Magento 2

Recommendations

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 quando si utilizza un Clerk.js setup in Magento 2.

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

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.

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

Creare un Design #

Le Recommendations vengono mostrate come uno slider di default. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi usare il Design Editor per configurarlo visivamente, oppure usare 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 con cui iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Esegui 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. Dagli un nome e clicca su Create design.
  4. Crea un design da codice da zero utilizzando il Liquid code.

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

Creare il Contenuto #

Contiene tutte le impostazioni utilizzate per mostrare le Recommendations, rendendole inseribili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri creare.

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

Aggiungere al Sito Web #

  1. Apri la scheda Insert into website.
  2. Hai due opzioni:
    • Utilizzare injection per inserire il codice tramite un selettore CSS.
    • Utilizzare il codice embedded per inserire il codice manualmente nel tuo sito web.
  3. Scegli l’opzione che preferisci.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. Seleziona Magento 2 in questi casi. Questo riempirà automaticamente l’embedcode con gli shortcodes corretti per Magento 2.

Per aggiungere dettagli di sincronizzazione o avviarla, vai su my.clerk.io > Data > Configuration.

Configurazione dell’Estensione #

Utilizza l’estensione Magento 2 per abilitare gli slider sulle pagine chiave:

  1. Vai su Stores > Configuration > Clerk > Configuration e scegli la Store View corretta.
  2. Per ogni sezione pagina, abilita e inserisci i template/contenuti:
    • Product Settings: imposta Enabled su Yes e assicurati che il campo template contenga i tuoi ID Slider (separati da virgola, senza “@”).
    • Category Settings: imposta Enabled su Yes e aggiungi i tuoi ID Slider.
    • Cart Settings: imposta Enabled su Yes e aggiungi il tuo ID Slider.
  3. Clicca su Save Config.

Configurazione my.clerk.io #

  1. Vai su Recommendations > Elements.
  2. Seleziona lo slider che vuoi inserire.
  3. Apri la scheda Insert into website.
  4. Scegli una delle seguenti opzioni:
    • Utilizzare injection inserisce il codice tramite selettore CSS.
    • Utilizzare embedded code inserisce il codice manualmente.
  5. Per il codice embedded su Magento 2, le posizioni tipiche sono:
    • Homepage: Content > Blocks > Home page block sotto Content.
    • Pagina prodotto: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml con data-products impostato sull’ID prodotto corrente.
    • Pagina categoria: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml con data-category impostato sull’ID categoria corrente.
    • Pagina carrello: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml con data-products impostato sugli ID prodotti del carrello.

Pagine #

Qui sotto sono indicate le pagine specifiche in cui inserire 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 gli embedcode nel template/blocco della homepage.

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 Magento 2 e copia l’embedcode.
  3. Vai nei file del tema Magento 2 e trova il file che genera le pagine Categoria. Di solito è vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserisci l’embedcode da qualche parte sotto il titolo e la descrizione. Imposta data-category all’ID della categoria corrente.

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 Magento 2 per ciascuno e copia gli embedcode.
  3. Nei file tema di Magento 2, trova il file che genera le pagine prodotto. Di solito è vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserisci gli embedcode subito sotto la descrizione del prodotto. Imposta data-products sull’ID prodotto corrente.

Add-To-Basket Step #

  1. Se non l’hai ancora fatto, crea il Content che desideri utilizzare nello step Add-To-Basket (Power Step).

  2. Nel backend di Magento 2, vai su Stores -> Configuration -> Clerk -> Configuration e trova Powerstep settings.

  3. Imposta Enabled su Yes.

  4. Scegli l’opzione Popup o Page, e inserisci gli ID dei tuoi Elements separati da virgole.

  5. Clicca su Save Config.

Puoi trovare gli ID di ciascun Element creato nel tuo Clerk backend ( my.clerk.io), sotto Recommendations -> Elements -> Edit (il numero di Elements varia da 1 a 4 per lo step Add-To-Basket):

Qui un esempio di dove trovare l’ID dell’Element:

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 Magento 2 e copia l’embedcode.
  3. Vai nei file del tema Magento 2 e trova il file che genera la pagina Carrello. Di solito è vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Inserisci l’embedcode da qualche parte sotto gli articoli del carrello e il pulsante di checkout. Imposta data-products con gli ID dei prodotti in carrello.

Exit Intent #

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

Configurazione Estensione #

Dalla v2.2.3, l’Exit-Intent può essere attivato direttamente dall’estensione con questi passaggi:

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

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

  3. Nel backend di Magento2, vai su Stores->Configuration->Configuration nel menu laterale e trova Exit-Intent Settings.

  4. Spunta la casella Enabled e assicurati che il campo Content contenga “exit-intent”.

  5. Clicca su Save Config per attivarlo.

Configurazione Manuale #

La configurazione è di 4 passaggi:

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

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

  3. Da Insert Into Website, copia l’embedcode fornito ed incollalo all’inizio di questo file di Magento2, via FTP:

    vendor->clerk->magento2->view->frontend->templates->tracking.phtml

  4. Aggiungi: data-exit-intent=“true” all’embed code che hai appena inserito. In questo modo:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Nota: Tutte le recommendations che contengono data-exit-intent=“true” faranno scattare il popup di exit intent.

Template di partenza #

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

Slider Code #

Questo template renderà uno slider standard con comuni 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}


.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;
}

@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.