Magento 1

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Magento 1.

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 a utilizzare un Clerk.js setup in Magento 1.

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

Configurazione dello Slider #

Le Recommendations vengono create con Elements che fanno riferimento a un Design. Di seguito 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 visualizzate come uno slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi configurarlo visivamente tramite il Design Editor, oppure utilizzare i code designs.

Un design può essere riutilizzato per qualsiasi numero di elementi di 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. Dagli un nome e clicca su Create design.
  5. Apporta qualsiasi modifica desideri 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 usando Liquid code.

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

Creare un Element #

Questo contiene tutte le impostazioni usate per visualizzare le Recommendations e renderle inseribili nel tuo sito web. Segui questi passaggi per ogni banner di Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Element.
  3. Dagli un nome descrittivo. Si consiglia di nominarlo in base alla pagina e alla logica che si vuole utilizzare, es. “Home Page / Visitor Recommendations”.
  4. In Element type, seleziona la logica di prodotto che vuoi usare 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 nella parte superiore dello schermo.

Aggiunta al sito #

Per aggiungere Clerk Recommendations al tuo sito, hai due opzioni: Injection e Embedded code.

  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 embedded code ti permette di inserire il codice manualmente nel tuo sito.
  3. Scegli l’opzione che ti è più comoda.
  4. Per alcune Logics, vedrai il menu a tendina Choose your platform. In questi casi seleziona Magento 1. Questo compilerà automaticamente l’embedcode con i corretti shortcode Magento 1.

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

Configurazione dell’estensione #

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

  1. In Magento, vai su System > Configuration > Clerk settings e scegli la Store View corretta.
  2. Per ogni sezione della pagina, abilita e popola i template/contenuti:
    • Product Page Settings: imposta Enable su Yes e assicurati che il campo dei template contenga gli ID dei tuoi Slider (separati da virgola, senza “@”).
    • Category Page Settings: imposta Enable su Yes e aggiungi gli ID dei tuoi Slider.
    • Cart Settings: imposta Enable su Yes e aggiungi l’ID del tuo 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:

    • Usando injection inserisce il codice tramite selettore CSS.
    • Usando embedded code inserisce il codice manualmente.

  5. Per l’embedded code su Magento 1, le posizioni tipiche sono:

    • Homepage: CMS > Pages > Home page sotto Contenuto.
    • Pagina prodotto: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml con data-products impostato a <?php echo Mage::registry('current_product')->getId(); ?>.
    • Pagina categoria: app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml con data-category impostato a <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Pagina carrello: nel tuo template del carrello, imposta data-products sugli ID dei prodotti del carrello, ad esempio:
    data-products="[<?php $i = 0; foreach(Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems() as $_item) { if ($i > 0) { echo ','; } echo $_item->getProductId(); $i++; } ?>]"

Pagine #

Di seguito le pagine specifiche dove dovresti 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 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 1 e copia l’embedcode.
  3. Vai nei file tema di Magento 1 e trova il file che genera le tue pagine categoria. Di solito è app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Inserisci l’embedcode sotto il titolo e la descrizione. Imposta data-category a <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.

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 1 per ciascuno e copia gli embedcode.
  3. Nei file tema di Magento 1, trova il file che genera le pagine prodotto. Di solito è app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Inserisci gli embedcode sotto la descrizione prodotto. Imposta data-products a <?php echo Mage::registry('current_product')->getId(); ?>.

Passaggio Aggiungi al Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Dagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante per il corretto funzionamento dell’embedcode.
  3. Clicca su Save in cima alla pagina.
  4. Per attivare la funzione add-to-basket Powerstep usando l’estensione Magento:
    1. Vai su System > Configuration > Clerk.
    2. Sotto Power step settings, inserisci i tuoi ID Element (separati da virgola) in Templates.
    3. Imposta Enable su Yes e clicca su Save Config.

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 1 e copia l’embedcode.
  3. Vai nei file tema di Magento 1 e trova il file che genera le tue pagine carrello.
  4. Inserisci l’embedcode sotto gli articoli del carrello e il pulsante checkout. Imposta data-products sugli ID dei prodotti 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 i passaggi per entrambe le opzioni.

Configurazione estensione #

Utilizzare l’estensione:

  1. Vai su System > Configuration > Clerk Settings e seleziona la Store View corretta.
  2. Sotto Exit-Intent Settings, imposta Enable su Yes e assicurati che il campo Element/Templates contenga i tuoi ID Element (es., exit-intent).
  3. Clicca su Save Config.

Configurazione manuale #

Embed manuale (vecchie versioni dell’estensione): aggiungi il seguente codice a app/design/frontend/base/default/template/clerk/tracking.phtml:

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

Template di partenza #

Se vuoi utilizzare i code design, questi template possono aiutarti a iniziare.

Slider Code #

Questo template renderizzerà 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.