Cualquier (webshop)

Recommendations

Automatiza y personaliza productos en cualquier página.

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar a usar una configuración de Clerk.js.

Para nuestras mejores prácticas sobre qué recomendaciones utilizar, lee este artículo.

Crear Diseño #

Las recomendaciones se muestran como un control deslizante por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.

Un diseño puede reutilizarse para cualquier número de Contenido de Recomendaciones que crees.

Editor de Diseño #

Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
Elige Control deslizante de productos
De la lista de plantillas de diseño, elige la que deseas usar como base.
Dale un nombre y haz clic en Crear diseño.
Realiza los cambios que desees en el diseño.

Diseño de Código #

Ve a Recomendaciones > Diseños y haz clic en Nuevo Diseño.
Elige Otros diseños > En blanco > Código.
Dale un nombre y haz clic en Crear diseño.
Crea un diseño de código desde cero usando código Liquid.

Si deseas un diseño inicial, consulta la plantilla de Control deslizante más abajo.

Crear Contenido #

Esto contiene todas las configuraciones utilizadas para mostrar el control deslizante de Recomendaciones y hacerlo embebible en tu sitio web. Sigue estos pasos para cada banner de Recomendaciones que desees crear.

Ve a Recomendaciones > Contenido.
Haz clic en Nuevo Contenido.
Dale un nombre descriptivo. Recomendamos nombrarlo basado en la página y la lógica que deseas usar. Ej. “Página de Inicio / Recomendaciones para Visitantes”.
En Tipo de contenido, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de productos aquí.
En Diseño selecciona el diseño que creaste del menú desplegable y elige el número de productos que deseas mostrar.
Haz clic en Guardar en la parte superior de la pantalla.

Agregar al Sitio Web #

Abre la pestaña Insertar en el sitio web.
Aquí tienes dos opciones:
- Usar inyección te permite insertar el código utilizando un selector CSS.
- Usar código embebido te permite insertar el código en tu sitio web manualmente.
Elige la opción que te resulte más fácil de usar.
Para el código embebido, agrega cualquier lógica de frontend necesaria, para insertar por ejemplo un ID de producto o categoría. Esto depende de la lógica que elijas.

Aquí tienes un ejemplo completo de código de embebido de Recomendaciones, con un ID de producto de muestra:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Plantilla Inicial #

Si deseas usar diseños de código, esta plantilla puede ayudarte a comenzar. Renderizará un control deslizante estándar con información de varios 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">En Oferta</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">Agotado</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Agregar al Carrito</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-add-to-cart, .clerk-add-to-cart: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;

    cursor: pointer;
}


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

    cursor: pointer;
}

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