Lightspeed

Recommendations

Automatiza y personaliza productos en cualquier página de Lightspeed.

Crear diseño #

Recommendations se muestran como un slider de forma predeterminada. Puedes utilizar el Editor de diseños para configurarlo visualmente, o usar diseños en código.

Editor de diseño #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Product Slider
  3. Selecciona una plantilla para empezar, dale un nombre y haz clic en Create design.
  4. Ajusta el diseño según sea necesario.

Diseño en código #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > With code.
  3. Asigna un nombre y haz clic en Create design.
  4. Crea un diseño en código desde cero usando código Liquid.

Si quieres un diseño de inicio, revisa la plantilla de Slider más abajo.

Crear elemento #

Esto contiene todas las configuraciones utilizadas para mostrar el slider de Recommendations y hacerlo insertable.

  1. Ve a Recommendations > Element.
  2. Haz clic en New Element.
  3. Ponle un nombre descriptivo, por ejemplo, “Home / Visitor”.
  4. En Element type, elige la lógica del producto a utilizar.
  5. En Design, selecciona el diseño que creaste y elige el número de productos.
  6. Haz clic en Save.

Añadir al sitio web #

Para añadir Clerk Recommendations en tu sitio web, tienes dos opciones: Inyección y Código incrustado.

Para acceder a los archivos de tu tema en Lightspeed, haz clic en “Design” en el menú lateral izquierdo, luego en “Code bewerken” en el desplegable Geavanceerd.

Para añadir detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Configuración del plugin #

No disponible para Lightspeed. Utiliza la configuración de my.clerk.io a continuación.

Configuración de my.clerk.io #

  1. Ve a Recommendations > Element.

  2. Selecciona el elemento que deseas insertar.

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes opciones:

    • Usar inyección permite insertar el código usando un selector CSS.
    • Usar código incrustado permite insertar manualmente el código en tu sitio web.

  5. Para el código incrustado en Lightspeed, las ubicaciones típicas son:

    • Página de inicio: snippets/homepage.rain.
    • Página de producto: product.rain y establece data-products en [{{product.id}}].
    • Página de categoría: collection.rain y establece data-category en {{ collection.category_id }}.
    • Página de marca: En collection.rain, incluye la lógica de marca en un {% if collection.category_id %} ... {% else %} ... {% endif %} para diferenciar.
    • Página del carrito: fixed.rain con un IF alrededor del código incrustado: {% if 'cart' in template %} … {% endif %} y establece data-products en:
    data-products="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"

Powerstep #

  • Primero, crea tu Diseño y Elemento de Recommendations en my.clerk.io que quieras añadir al powerstep.

  • Busca el archivo de snippet powerstep en la sección Snippets de los archivos de tu tema, popup-buy.rain en este ejemplo. Pega aquí el código incrustado generado desde tu Elemento:

<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>

Algunos códigos incrustados requieren variables como IDs de producto o categoría. En estos casos, se rellenarán en el código, pero asegúrate de que son las variables correctas para hacer referencia en tu portal de Lightspeed.

Página del carrito #

  1. En my.clerk.io, crea un Elemento con la lógica Best Cross-Sell Products.
  2. En el desplegable Insert into website > Choose your platform, selecciona Lightspeed y copia el embedcode.
  3. Inserta el embedcode en la plantilla de la página del carrito (por ejemplo, fixed.rain con un IF alrededor del código: {% if 'cart' in template %} … {% endif %}). Establece data-products con los IDs de productos del carrito.

Exit Intent #

  1. En my.clerk.io, crea un Elemento con la lógica Visitor Recommendations.
  2. Exit Intent se añade a tu archivo principal de tema, probablemente custom.rain.
  3. Coloca el código incrustado del Elemento generado en my.clerk.io justo antes de la etiqueta de cierre . Si tienes implementado Live Search, el código de Exit Intent debe colocarse justo después de éste.
  4. Añade data-exit-intent="true" al embedcode.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Plantillas iniciales #

Si deseas utilizar diseños en código, estas plantillas pueden ayudarte a empezar.

Código de slider #

Esta plantilla renderizará un slider estándar con información común de productos que puedes adaptar a tus necesidades.

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%;
    }
}

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.