Lightspeed

Recommendations

Automatizza e personalizza i prodotti su qualsiasi pagina in Lightspeed.

Crea Design #

Le Recommendations vengono mostrate come uno slider per impostazione predefinita. Puoi utilizzare il Design Editor per configurarlo visivamente, oppure usare i code designs.

Design Editor #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Product Slider
  3. Seleziona un template da cui iniziare, dagli un nome e clicca su Create design.
  4. Modifica il design secondo le tue necessità.

Code Design #

  1. Vai su Recommendations > Designs e clicca su New Design.
  2. Scegli Other designs > Blank > With code.
  3. Assegna 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 Slider template più in basso.

Crea Element #

Qui trovi tutte le impostazioni utilizzate per mostrare lo slider delle Recommendations e renderlo incorporabile.

  1. Vai su Recommendations > Element.
  2. Clicca su New Element.
  3. Assegnagli un nome descrittivo, ad esempio “Home / Visitor”.
  4. In Element type, scegli la logica di prodotto da utilizzare.
  5. In Design, seleziona il design che hai creato e scegli il numero di prodotti da mostrare.
  6. Clicca su Save.

Aggiungi al Sito Web #

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

Per accedere ai file del tema in Lightspeed, clicca su “Design” nel menu a sinistra, poi su “Code bewerken” nel menu a tendina Geavanceerd.

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

Plugin Setup #

Non disponibile per Lightspeed. Usa la configurazione my.clerk.io descritta di seguito.

my.clerk.io Setup #

  1. Vai su Recommendations > Element.

  2. Seleziona l’elemento che vuoi inserire.

  3. Apri la scheda Insert into website.

  4. Scegli una delle seguenti opzioni:

    • Usando injection puoi inserire il codice utilizzando un selettore CSS.
    • Usando embedded code puoi inserire il codice manualmente nel tuo sito web.

  5. Per il codice embedded su Lightspeed, le posizioni tipiche sono:

    • Homepage: snippets/homepage.rain.
    • Pagina prodotto: product.rain e imposta data-products su [{{product.id}}].
    • Pagina categoria: collection.rain e imposta data-category su {{ collection.category_id }}.
    • Pagina brand: In collection.rain, racchiudi la logica del brand in un {% if collection.category_id %} ... {% else %} ... {% endif %} per distinguerla.
    • Pagina carrello: fixed.rain con un IF attorno al codice embed: {% if 'cart' in template %} … {% endif %} e imposta data-products su:
    data-products="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"

Powerstep #

  • Innanzitutto, crea il tuo Recommendations Design e Element in my.clerk.io che desideri aggiungere al powerstep.

  • Trova il file snippet del powerstep nella sezione Snippets dei file del tuo tema, popup-buy.rain in questo esempio. Incolla qui il codice embed generato dal tuo Element:

<div style="display: none;" id="clerk_powerstep">
  <div class="clerk_powerstep_wrap">
    <span class="clerk-powerstep-recommendations"
      data-template="@power-step-others-also-bought"
      data-products="[{{product.id}}]">
    </span>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    var buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.productCartButton';
    document.querySelector(buyBtn).addEventListener('click', function(){
      Clerk('content', '.clerk-powerstep-recommendations');
      document.getElementById('clerk_powerstep').style.display = 'block';
    });
  });
</script>

Alcuni codici embed richiedono variabili come ID di prodotto o di categoria. In questi casi, queste verranno inserite nel codice embed, ma assicurati di verificare che siano le variabili corrette da utilizzare all’interno del tuo portale Lightspeed.

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 Lightspeed e copia l’embedcode.
  3. Inserisci il codice embed nella pagina carrello (ad esempio, fixed.rain con un IF attorno al codice embed: {% if 'cart' in template %} … {% endif %}). 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. Exit Intent viene aggiunto al file principale del tema, probabilmente custom.rain.
  3. Inserisci il codice embed generato da my.clerk.io appena prima del tag di chiusura . Se hai implementato Live Search, il codice Exit Intent dovrebbe essere inserito subito dopo questo.
  4. Aggiungi data-exit-intent="true" al codice embed.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Template Iniziali #

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

Slider Code #

Questo template renderizza uno slider standard con informazioni prodotto comuni che puoi personalizzare 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.