Magento 2

Recommendations

Backend in the Clerk.io backend

Clerk.io offre più di 23 diversi tipi di logiche prodotto, permettendoti di mostrare prodotti completamente automatizzati su qualsiasi pagina. Questo articolo spiega come iniziare a utilizzare un Clerk.js setup in Magento 2.

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

Configurazione Slider #

Le Recommendations vengono create con Elements che fanno riferimento a un Design. Qui sotto trovi la guida di base per la configurazione di un Element.

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

Creare un Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente tramite il Design Editor 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 di template design, scegli quello con cui vuoi iniziare.
  4. Dagli un nome e clicca su Create design.
  5. Apporta 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 code design da zero utilizzando Liquid code.

Se vuoi un design di partenza, guarda il Slider template più sotto.

Creare un Element #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations, e lo rende inseribile sul tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

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

Aggiungere al Sito Web #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection ti permette di inserire il codice usando un selettore CSS.
    • Usare il codice da incorporare ti permette di inserire manualmente il codice nel tuo sito web.
  3. Scegli l’opzione più semplice per te.
  4. Per alcune Logics vedrai la tendina Choose your platform. In questi casi seleziona Magento 2. Questo precompilerà il codice incorporato con i corretti shortcode 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 slider nelle pagine chiave:

  1. Vai su Stores > Configuration > Clerk > Configuration e scegli il corretto Store View.
  2. Per ogni sezione di 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 aggiungi i tuoi Slider ID.
    • Cart Settings: imposta Enabled su Yes e aggiungi il tuo Slider ID.
  3. Clicca su Save Config.

Configurazione su 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:
    • Usando injection inserisce il codice tramite un selettore CSS.
    • Usando embedded code inserisce manualmente il codice.
  5. Per il codice incorporato su Magento 2, i posizionamenti tipici sono:
    • Homepage: Content > Blocks > Home page block sotto Contenuto.
    • 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 agli ID dei prodotti presenti nel carrello.

Pagine #

Qui sotto trovi le pagine specifiche su cui dovresti inserire le Recommendations, e quali tipologie 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 i codici incorporati nel tuo template/blocco 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 incorporato.
  3. Vai ai file tema di Magento 2 e trova il file che genera le tue pagine Categoria. Di solito è vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserisci il codice incorporato sotto titolo e descrizione. Imposta data-category su ID 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 incorporati.
  3. Nei file tema Magento 2, trova il file che genera le pagine prodotto. Di solito è vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserisci i codici incorporati sotto la descrizione del prodotto. Imposta data-products sull’ID prodotto corrente.

Step Aggiunta al Carrello #

  1. Se non l’hai già fatto, crea l’Element che vuoi usare nello Step di Aggiunta al carrello (Power Step).

  2. Nel backend 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 Save Config.

Per trovare l’ID di un Element, vai su Recommendations > Elements su my.clerk.io e apri l’Element. Usa l’ID visualizzato tra le sue impostazioni. Puoi aggiungere da uno a quattro Elements allo step di Aggiunta al carrello.

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 incorporato.
  3. Vai ai file 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 il codice incorporato sotto gli articoli in carrello e il pulsante di checkout. Imposta data-products sugli ID dei prodotti del 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, Exit-Intent può essere attivato direttamente dall’estensione seguendo questi passaggi:

  1. Crea un nuovo Website Element su 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 dal menu laterale e trova Exit-Intent Settings.

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

  5. Clicca Save Config per attivarlo.

Configurazione Manuale #

La configurazione richiede 4 passaggi:

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

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

  3. Da Insert Into Website, copia il codice fornito in cima a questo file Magento2, tramite FTP:

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

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

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

Nota: tutte le recommendations che includono data-exit-intent=“true” attiveranno il popup dell’exit intent.

Template di Partenza #

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

Slider Code #

Questo template mostrerà uno slider standard con informazioni prodotto comuni che puoi personalizzare secondo le tue necessità.

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.