Lightspeed

Recommendations

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

Crear diseño #

Recommendations se muestran como un slider por defecto. Puedes usar el Editor de diseño para configurarlo visualmente, o usar diseños de código.

Editor de diseño #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Product Slider
Elige una plantilla para comenzar, asígnale un nombre y haz clic en Create design.
Ajusta el diseño según sea necesario.

Diseño de código #

Ve a Recommendations > Designs y haz clic en New Design.
Elige Other designs > Blank > With code.
Asígnale un nombre y haz clic en Create design.
Crea un diseño de código desde cero usando código Liquid.

Si deseas un diseño para empezar, consulta la plantilla Slider más abajo.

Crear elemento #

Esto contiene todas las configuraciones usadas para mostrar el slider de Recommendations y hacerlo embebible.

Ve a Recommendations > Element.
Haz clic en New Element.
Asígnale un nombre descriptivo, por ejemplo, “Inicio / Visitante”.
En Element type, elige la lógica de producto a utilizar.
En Design, selecciona el diseño que creaste y elige la cantidad de productos.
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 insertado.

Para acceder a los archivos de tu tema en Lightspeed, haz clic en “Design” en el menú de la izquierda, luego “Code bewerken” en el menú 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. Usa la configuración de my.clerk.io que aparece a continuación.

Configuración de my.clerk.io #

Ve a Recommendations > Element.
Selecciona el elemento que deseas insertar.
Abre la pestaña Insert into website.
Elige una de las siguientes opciones:
- Usar inyección te permite insertar el código usando un selector CSS.
- Usar código insertado te permite insertar el código en tu sitio web manualmente.
Para código insertado en Lightspeed, las ubicaciones típicas son:
- Página principal: snippets/homepage.rain.
- Página de producto: product.rain y configura data-products a [{{product.id}}].
- Página de categoría: collection.rain y configura data-category a {{ collection.category_id }}.
- Página de marca: En collection.rain, envuelve la lógica de marca en un {% if collection.category_id %} ... {% else %} ... {% endif %} para diferenciar.
- Página de carrito: fixed.rain con un IF alrededor del código insertado: {% if 'cart' in template %} … {% endif %} y configura data-products a:
```
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 Recommendations Design y Element en my.clerk.io que deseas añadir al powerstep.
Busca el archivo de snippet powerstep en la sección de Snippets de los archivos de tu tema, popup-buy.rain en este ejemplo. Pega aquí el código insertado generado desde tu 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>

Algunos códigos insertados requieren variables como IDs de producto o categoría. En estos casos, se poblarán en el código insertado, pero asegúrate de verificar que estas sean las variables correctas a referenciar dentro de tu portal Lightspeed.

Página de carrito #

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

Exit Intent #

En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
Exit Intent se añade en el archivo principal del tema, probablemente custom.rain.
Coloca el código insertado del Element generado en my.clerk.io justo antes de la etiqueta de cierre . Si tienes Live Search implementado, el código de Exit Intent debe colocarse justo después de este.
Añade data-exit-intent="true" al código insertado.

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

Plantillas de inicio #

Si deseas usar diseños de código, estas plantillas pueden ayudarte a comenzar.

Código del 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.