Magento 1

Recommendations

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

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 quando utilizzi una 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 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 automaticamente creati gli Elements per le nostre Best Practices.

Crea Design #

Le Recommendations vengono mostrate come slider per impostazione predefinita. Questo permette ai clienti di vedere più prodotti con meno clic. Puoi utilizzare 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 modelli di design, scegli quello da cui vuoi partire.
  4. Dagli un nome e clicca su Create design.
  5. Apporta eventuali modifiche desiderate 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 utilizzando Liquid code.

Se vuoi un design di partenza, controlla il modello Slider più in basso.

Crea Contenuto #

Questo contiene tutte le impostazioni utilizzate per mostrare le Recommendations e renderlo integrabile nel tuo sito. Segui questi passaggi per ogni banner Recommendations che vuoi creare.

  1. Vai su Recommendations > Elements.
  2. Clicca su New Content.
  3. Assegna un nome descrittivo. Consigliamo di nominarlo in base alla pagina e alla logica che vuoi utilizzare. Es., “Home Page / Visitor Recommendations”.
  4. In Content type, seleziona la logica prodotto che desideri usare dal menu a tendina. Puoi vedere una panoramica di tutte le logiche prodotto 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 nello schermo.

Aggiungi al Sito Web #

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

  1. Apri la scheda Insert into website.
  2. Qui hai due opzioni:
    • Utilizzare injection ti permette di inserire il codice tramite un selettore CSS.
    • Utilizzare embedded code ti permette di inserire manualmente il codice nel tuo sito.
  3. Scegli l’opzione che ti è più semplice da usare.
  4. Per alcune Logics vedrai il menu a tendina Choose your platform. In questi casi seleziona Magento 1. Questo precompilerà l’embedcode con i corretti shortcode Magento 1.

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

Configurazione dell’Estensione #

Usa l’estensione Magento per abilitare gli slider sulle 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 templates contenga i tuoi Slider ID (separati da virgola, senza “@”).
    • Category Page Settings: imposta Enable su Yes e aggiungi i tuoi Slider ID.
    • Cart Settings: imposta Enable 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:

    • Usando injection il codice viene inserito tramite un selettore CSS.
    • Usando embedded code il codice viene inserito manualmente.

  5. Per l’embedded code su Magento 1, i posizionamenti tipici sono:

    • Homepage: CMS > Pages > Home page sotto Content.
    • Pagina prodotto: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml con data-products impostato su <?php echo Mage::registry('current_product')->getId(); ?>.
    • Pagina categoria: app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml con data-category impostato su <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Pagina carrello: nel template del carrello, imposta data-products sugli ID dei prodotti attualmente nel 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 trovi le pagine specifiche in cui inserire le Recommendations, e quali tipologie 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 1 e copia l’embedcode.
  3. Vai nei file tema di Magento 1 e trova il file che genera le pagine categoria. Solitamente si tratta di 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 entrambi e copia gli embedcode.
  3. Nei file del tema di Magento 1, trova il file che genera le pagine prodotto. Solitamente è app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Inserisci gli embedcode sotto la descrizione del prodotto. Imposta data-products a <?php echo Mage::registry('current_product')->getId(); ?>.

Step Aggiunta al Carrello #

  1. In my.clerk.io, crea un Element con la logica Best Cross-Sell Products.
  2. Assegnagli il nome “Add-To-Basket / Others Also Bought”. Questo è importante affinché l’embedcode funzioni correttamente.
  3. Clicca su Save in alto nella pagina.
  4. Per attivare il Powerstep di add-to-basket tramite l’estensione Magento:
    1. Vai su System > Configuration > Clerk.
    2. Sotto Power step settings, aggiungi i tuoi Element ID (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 pagine Carrello.
  4. Inserisci l’embedcode sotto gli articoli presenti nel carrello e il pulsante di checkout. Imposta data-products sugli ID dei prodotti attualmente 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 tramite Estensione #

Utilizzando 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 Content/Templates contenga il/i tuo/i Element ID (es., exit-intent).
  3. Clicca su Save Config.

Configurazione Manuale #

Embed manuale (versioni più vecchie 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 desideri utilizzare dei code designs, questi template possono aiutarti a iniziare.

Slider Code #

Questo template renderizzerà uno slider standard con le principali informazioni del prodotto che puoi adattare 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.