Magento 2

Recommendations

Clerk.io offre più di 23 tipologie diverse di logiche di prodotto, permettendoti di mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a usare una Clerk.js setup in Magento 2.

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

Configurazione dello Slider #

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

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

Crea Design #

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

Un design può essere riutilizzato per un numero qualsiasi 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. 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 code design da zero utilizzando Liquid code.

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

Crea Element #

Qui troverai tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che desideri 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 usare. Es: “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona dal menu a tendina la logica di prodotto che desideri usare. 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 da mostrare.
  6. Clicca su Save nella parte superiore dello schermo.

Aggiungi al sito web #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti permette di inserire il codice tramite un selettore CSS.
    • Usare il codice embedded ti permette di inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione più facile per te.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Magento 2. In questo modo il codice embedded verrà precompilato con i corretti shortcodes di Magento 2.

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

Configurazione dell’estensione #

Usa l’estensione Magento 2 per abilitare le slider sulle pagine chiave:

  1. Vai su Stores > Configuration > Clerk > Configuration e scegli lo Store View corretto.
  2. Per ogni sezione della pagina, abilita e compila i template/contenuti:
    • Product Settings: imposta Enabled su Yes e assicurati che il campo templates contenga i tuoi Slider ID (separati da virgola, senza “@”).
    • Category Settings: imposta Enabled su Yes e inserisci i tuoi Slider ID.
    • Cart Settings: imposta Enabled su Yes e aggiungi il tuo Slider ID.
  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:
  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 della categoria corrente.
    • Pagina carrello: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml con data-products impostato sugli ID dei prodotti nel carrello.

Pagine #

Di seguito sono riportate le pagine specifiche in cui inserire le Recommendations e quali tipologie utilizzare, così da 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 embedded nel template o nel blocco della tua 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 il codice embedded.
  3. Vai nei file del tema di Magento 2 e trova il file che genera le pagine categoria. Il file tipicamente è vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserisci il codice embedded sotto al titolo e alla descrizione. Imposta data-category sull’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 i codici embedded.
  3. Nei file del tema di Magento 2, trova il file che genera le pagine prodotto. Tipicamente è vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserisci i codici embedded sotto la descrizione del prodotto. Imposta data-products sull’ID prodotto corrente.

Fase Aggiunta al Carrello #

  1. Se non l’hai già fatto, crea l’Element che vuoi utilizzare nella fase Add-To-Basket (Power Step).

  2. Nel backend di Magento 2, vai su Stores -> Configuration -> Clerk -> Configuration e trova le 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 che hai creato nel tuo Clerk backend ( my.clerk.io), sotto Recommendations -> Elements -> Edit (il numero di Elements varia da 1 a 4 per il passaggio Add-To-Basket):

Qui c’è un esempio di come trovare l’ID di un 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 il codice embedded.
  3. Vai nei file del tema di Magento 2 e trova il file che genera la pagina carrello. Tipicamente è vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Inserisci il codice embedded sotto agli articoli del carrello e al pulsante di checkout. Imposta data-products sugli ID prodotti presenti nel 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 trovi i passaggi per entrambe le opzioni.

Configurazione tramite estensione #

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

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

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

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

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

  5. Clicca su Save Config per attivarlo.

Configurazione manuale #

La configurazione si compone di 4 passaggi:

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

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

  3. Da Insert Into Website, copia il codice embedded fornito e inseriscilo nella parte superiore di questo file Magento2 tramite FTP:

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

  4. Aggiungi: data-exit-intent=“true” al codice appena inserito. Come segue:

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

Nota: tutte le recommendations che contengono data-exit-intent=“true” attiveranno il pop up di Exit Intent.

Template di partenza #

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

Slider Code #

Questo template renderizza uno slider standard con le più comuni informazioni prodotto, che puoi personalizzare in base 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-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.