Lightspeed

Recommendations

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

Crear diseño #

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

Editor de Diseño #

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

Diseño de código #

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

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

Crear elemento #

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

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

Agregar al sitio web #

Para agregar Clerk Recommendations en tu sitio web, tienes dos opciones: Injection y Embedded code.

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 menú desplegable de Geavanceerd.

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

Instalación de plugin #

No disponible para Lightspeed. Usa la configuración de my.clerk.io abajo.

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 injection te permite insertar el código usando un selector CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio web.

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

    • Página principal: snippets/homepage.rain.
    • Página de producto: product.rain y establece data-products a [{{product.id}}].
    • Página de categoría: collection.rain y establece 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 embebido: {% if 'cart' in template %} … {% endif %} y establece 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 te gustaría agregar al powerstep.

  • Encuentra el archivo de fragmento powerstep en la sección Snippets de tus archivos de tema, popup-buy.rain en este ejemplo. Pega aquí el código embebido 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 embebidos requieren variables como ID de producto o categoría. En estos casos, se completarán en el código embebido, pero asegúrate de revisar que sean las variables correctas a referenciar dentro de tu portal Lightspeed.

Página de carrito #

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

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Exit Intent se agrega a tu archivo principal de tema, probablemente custom.rain.
  3. Coloca el código embed 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.
  4. Agrega data-exit-intent="true" al embedcode.
<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 iniciar.

Código de slider #

Esta plantilla mostrará un slider estándar con información común de producto 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.