Magento 2

Recommendations

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

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

Configurazione Slider #

Le Recommendations vengono create tramite Sliders che fanno riferimento a un Design. Di seguito trovi la guida base per configurare uno Slider.

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

Crea Design #

Le Recommendations sono mostrate come slider per impostazione predefinita. Questo consente ai clienti di vedere più prodotti con meno clic. Puoi configurarle visivamente usando il Design Editor oppure utilizzare i code designs.

Un design può essere riutilizzato per qualsiasi numero di sliders 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 da cui vuoi partire.
  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 code design da zero usando il Liquid code.

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

Crea Contenuto #

Qui sono presenti tutte le impostazioni utilizzate per mostrare le Recommendations e renderle integrabili nel tuo sito web. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Sliders.
  2. Clicca su New Content.
  3. Dai un nome descrittivo. Ti consigliamo di nominarlo in base alla pagina e alla logica che desideri utilizzare. Es. “Home Page / Visitor Recommendations”.
  4. In Content type, seleziona la product logic dal menu a discesa. Puoi vedere una panoramica di tutte le product logics qui.
  5. In Design seleziona il design creato dal menu a discesa e scegli il numero di prodotti da mostrare.
  6. Clicca su Save in alto alla schermata.

Aggiungi al Sito #

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Usare injection permette di inserire il codice tramite un selettore CSS.
    • Usare embedded code permette di inserire manualmente il codice nel sito.
  3. Scegli l’opzione più semplice 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 di embed sarà precompilato con i giusti shortcodes per Magento 2.

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

Configurazione Estensione #

Utilizza l’estensione Magento 2 per abilitare gli sliders nelle pagine chiave:

  1. Vai su Stores > Configuration > Clerk > Configuration e scegli la Store View corretta.
  2. Per ogni sezione della pagina, abilita e popola i campi delle template/contenuti:
    • Product Settings: imposta Enabled su Yes e assicurati che il campo templates abbia 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 my.clerk.io #

  1. Vai su Recommendations > Sliders.
  2. Seleziona lo slider che desideri inserire.
  3. Apri la scheda Insert into website.
  4. Scegli una delle seguenti opzioni:
    • Usando injection il codice viene inserito tramite un selettore CSS.
    • Usando embedded code il codice viene inserito manualmente.
  5. Per embedded code su Magento 2, le posizioni tipiche sono:
    • Homepage: Content > Blocks > Home page block sotto Content.
    • Product page: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml con data-products impostato all’ID prodotto corrente.
    • Category page: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml con data-category impostato all’ID categoria corrente.
    • Cart page: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml con data-products impostato agli ID prodotti nel carrello.

Pagine #

Qui sotto sono elencate le pagine specifiche dove inserire Recommendations e quali tipologie usare, per seguire le nostre Best Practices.

Homepage #

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

Pagina Categoria #

  1. In my.clerk.io, crea uno Slider con la logica Bestsellers In Category.
  2. Nel menu a tendina Insert into website > Choose your platform, seleziona Magento 2 e copia il codice di embed.
  3. Vai nei file del tema di Magento 2 e trova il file che genera le pagine Categoria. Molto spesso è vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserisci il codice di embed sotto il titolo e la descrizione. Imposta data-category sull’ID categoria corrente.

Pagina Prodotto #

  1. In my.clerk.io, crea 2 Sliders 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 entrambi e copia i codici di embed.
  3. Nei file tema di Magento 2, trova il file che genera le pagine prodotto. Molto spesso è vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserisci i codici di embed sotto la descrizione del prodotto. Imposta data-products sull’ID prodotto corrente.

Step Aggiungi al Carrello #

  1. Se non l’hai già fatto, crea il Contenuto che vuoi usare nello Step Aggiungi al Carrello (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 Sliders separati da virgola.

  5. Clicca su Save Config.

Puoi trovare gli ID di ogni Slider che hai creato nel tuo Clerk backend ( my.clerk.io), in Recommendations -> Sliders -> Edit (il numero di Sliders varia da 1 a 4 per lo step Add-To-Basket):

Ecco un esempio di come trovare l’ID dello Slider:

Pagina Carrello #

  1. In my.clerk.io, crea uno Slider 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 di embed.
  3. Vai nei file del tema di Magento 2 e trova il file che genera le pagine Carrello. Solitamente è vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Inserisci il codice di embed sotto gli articoli del carrello e il tasto checkout. Imposta data-products sugli ID prodotti presenti nel carrello.

Exit Intent #

  1. In my.clerk.io, crea uno Slider 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 Content in my.clerk.io e chiamalo “Exit Intent”

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

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

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

  5. Clicca su Save Config per attivarlo.

Configurazione Manuale #

La configurazione si svolge in 4 passaggi:

  1. Crea un nuovo Website Content 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 di embed fornito all’inizio di questo file Magento2 via FTP:

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

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

<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 usare code designs, questi template possono aiutarti a partire.

Codice Slider #

Questo template renderizza uno slider standard con le principali informazioni sui prodotti che puoi adattare 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.