Recommendations
General #
Las recomendaciones de Clerk.io se pueden instalar en cualquier página de la tienda en línea, para ayudar a los clientes a encontrar los productos adecuados.
Con esta guía, verás cómo instalar recomendaciones y qué tipos usar para poner en marcha nuestras Mejores Prácticas.
Desde el menú principal, comienza haciendo clic en Comenzar:
1. Crear un Diseño y Contenido Estándar #
Lo primero que necesitas hacer es crear un Diseño Estándar para tus deslizadores.
Puedes usar la Guía de Configuración en Recomendaciones - Crear un diseño para tus deslizadores de recomendaciones - para crear rápidamente un diseño que tenga el mismo esquema de color y estilo que tu tienda en línea.
Haz clic en Publicar cuando estés satisfecho con el estilo.
Puedes cambiar esto fácilmente más tarde, en Recomendaciones - Diseños en el menú de la izquierda. También puedes consultar esta guía Diseño de Plantilla para usar en Clerk para plantillas de diseño a utilizar.
2. Agregar el Deslizador del Carrito de Compras #
Se pueden crear y agregar nuevos deslizadores a través del backend de Clerk.
El diseño se crea en el backend de Clerk.io bajo Recomendaciones → Diseños.
El diseño básico se puede ajustar aquí a través de HTML y CSS.
Importante: El estado de entrega actualmente solo es compatible con el Deslizador EasyTemplate.
Agregar contenido
El contenido para el nuevo deslizador del carrito de compras se puede crear en Clerk.io → Recomendaciones → Contenido (botón Nuevo Contenido)
La siguiente página contiene 4 secciones importantes:
Nombra tu contenido → El nombre se especifica aquí
Elige la lógica del producto → La lógica del producto se puede seleccionar aquí, incluyendo “Más Vendidos” / “Productos Calientes” y mucho más
Selecciona diseño → Qué diseño se debe usar / cuál debe ser el encabezado y cuántos productos deben mostrarse (Importante: se determina por el plugin, incluso si se puede almacenar un “número” aquí)
Insertar en el sitio web → El nombre que tenemos que ingresar en nuestro backend de tienda JTL5 bajo Clerk TemplateName carrito de compras se muestra aquí
Después de que todo haya sido configurado y llenado, ahora debes cambiar al backend de la tienda JTL5 y el nombre del contenido del powerstep donde lo insertarás en el Plugin de Clerk.
Configuraciones del plugin en el backend de JTL
Agregar Deslizador de Página de Producto #
Agregar el deslizador de artículos es lo mismo que agregar el deslizador del carrito de compras.
En el caso estándar, se utilizan los mismos archivos de diseño (Deslizador NOVA / Deslizador ET), solo se cambia el nombre/lógica del producto en el backend de Clerk.io y se selecciona un selector diferente en el backend del plugin.
Paso de Agregar al Carrito #
Las recomendaciones de Clerk.io se pueden instalar en cualquier página de la tienda en línea, para ayudar a los clientes a encontrar los productos adecuados.
Con esta guía, verás cómo instalar recomendaciones y qué tipos usar para poner en marcha nuestras Mejores Prácticas.
Desde el menú principal, comienza haciendo clic en Comenzar:
1. Crear un Diseño y Contenido Estándar #
Lo primero que necesitas hacer es crear un Diseño Estándar para tus deslizadores.
Puedes usar la Guía de Configuración en Recomendaciones - Crear un diseño para tus deslizadores de recomendaciones - para crear rápidamente un diseño que tenga el mismo esquema de color y estilo que tu tienda en línea.
Haz clic en Publicar cuando estés satisfecho con el estilo.
Puedes cambiar esto fácilmente más tarde, en Recomendaciones - Diseños en el menú de la izquierda. También puedes consultar esta guía Diseño de Plantilla para usar en Clerk para plantillas de diseño a utilizar.
2. Agregar el Powerstep #
Ve a tus guías de configuración en ajustes → Haz clic en Mostrar Recomendaciones de Agregar al Carrito, y haz clic en crear contenido. Este paso creará automáticamente los contenidos con todas las lógicas necesarias, sin embargo, hace un diseño autogenerado que puede que necesites cambiar dependiendo de tu preferencia.
Selecciona diseño → Qué diseño se debe usar / cuál debe ser el encabezado y cuántos productos deben mostrarse (Importante: se determina por el plugin, incluso si se puede almacenar un “número” aquí)
Después de que todo haya sido configurado y llenado, ahora debes cambiar al backend de la tienda JTL5 y el nombre del contenido del powerstep donde lo insertarás en el Plugin de Clerk.
Configuraciones del plugin en el backend de JTL
Intención de Salida #
El popup de Intención de Salida reacciona cuando un visitante intenta abandonar tu tienda en línea. Aparece y muestra productos interesantes, convirtiendo posiblemente a un visitante que se va en un cliente comprador.
1. Crear un Diseño y Contenido Estándar #
Lo primero que necesitas hacer es crear un Diseño Estándar para tus deslizadores.
Puedes usar la Guía de Configuración en Recomendaciones - Crear un diseño para tus deslizadores de recomendaciones - para crear rápidamente un diseño que tenga el mismo esquema de color y estilo que tu tienda en línea.
Haz clic en Publicar cuando estés satisfecho con el estilo.
Puedes cambiar esto fácilmente más tarde, en Recomendaciones - Diseños en el menú de la izquierda. También puedes consultar esta guía Diseño de Plantilla para usar en Clerk para plantillas de diseño a utilizar.
2. Agregar las Recomendaciones de Intención de Salida #
Ve a tus guías de configuración en ajustes → Haz clic en Mostrar Recomendaciones de Agregar al Carrito, y haz clic en crear contenido. Este paso creará automáticamente los contenidos con todas las lógicas necesarias, sin embargo, hace un diseño autogenerado que puede que necesites cambiar dependiendo de tu preferencia. Para esta lógica, generalmente recomendamos la recomendación para visitantes.
Selecciona diseño → Qué diseño se debe usar / cuál debe ser el encabezado y cuántos productos deben mostrarse (Importante: se determina por el plugin, incluso si se puede almacenar un “número” aquí).
Después de que todo haya sido configurado y llenado, ahora debes cambiar al backend de la tienda JTL5 y el nombre del contenido del powerstep donde lo insertarás en el Plugin de Clerk.
Configuraciones del plugin en el backend de JTL
Agregar deslizadores manualmente #
Actualmente hay dos métodos conocidos para agregar tus propios deslizadores adicionales en JTL a través del plugin de Clerk:
- EasyTemplate
- OnPage Composer
EasyTemplate #
Puedes integrar fácilmente tus propios deslizadores en el EasyTemplate utilizando los siguientes pasos:
- Creación del diseño en el backend de Clerk.io (también se pueden usar diseños existentes)
- Creación del contenido con el enfoque respectivo en Clerk.io, copiando el elemento span necesario
- Agregar un widget HTML en el EasyTemplate
- Insertar el elemento en un widget HTML en el EasyTemplate.
Es importante agregar la línea data-snippets=’{json_encode($s360_clerk_snippets->get())}’ al fragmento HTML de Clerk del paso 2 para que las variables de idioma se pasen correctamente a Clerk. Además, se debe marcar la casilla para “Evaluar Smarty”
OnPage Composer #
Tus propios deslizadores se pueden integrar en el OnPage Composer utilizando los siguientes pasos:
- Creación del diseño en el backend de Clerk.io (también se pueden usar diseños existentes)
- Creación del contenido con el enfoque respectivo en Clerk.io, copiando el elemento span necesario
- Abrir el OnPage Composer
- Nuevo borrador en OnPage Composer
- Arrastra y suelta el elemento de texto enriquecido en el OnPage Composer al deseado → selecciona el código fuente en el menú y agrega los elementos span copiados aquí
- Guardar → Publicar con periodo seleccionado
Nota: Dependiendo de la posición del “propio deslizador”, también se deben agregar propiedades/clases CSS adicionales si no se utiliza la plantilla estándar.
Diseños estándar #
Deslizador del Carrito de Compras (easyTempate) #
{% if products.length != 0 %}
<div class="et-widget-clerkslider-headline">
<div class="et-product-slider-headline">
<div class="et-textfield text-align-default et-widget-headline h2">{{ headline }}</div>
</div>
</div>
<div class="et-product-slider-wrapper row">
<div class="col p-0">
<div class="slick-slider-other is-not-opc">
<div id="et-clerk-slider-{{ snippets.settings.slider.id }}" class="et-product-slider-slider et-slider carousel slick-smooth-loading slider-no-preview slick-type-product">
{% for product in products %}
<div class="product-wrapper col">
<div id="result-wrapper_buy_form_{{ product.id }}" data-wrapper="true" class="productbox productbox-show-variations et-item-box productbox-column">
<div class="productbox-inner">
<div class="row">
<div class="col col-12">
<div class="productbox-image">
{% if product.top_article and product.top_article != false %}
<div class="ribbon ribbon-4 productbox-ribbon">
{{ snippets.ribbons.4 }}
</div>
{% endif %}
{% if product.on_sale and product.on_sale != false %}
<div class="ribbon ribbon-2 productbox-ribbon">
{{ snippets.ribbons.2 }}
</div>
{% endif %}
{% if product.in_stock and product.in_stock != false %}
<div class="ribbon ribbon-8 productbox-ribbon">
{{ snippets.ribbons.8 }}
</div>
{% endif %}
{% if product.in_stock and product.in_stock <= 0 %}
<div class="ribbon ribbon-7 productbox-ribbon">
{{ snippets.ribbons.7 }}
</div>
{% endif %}
{% if product.age and product.age <= snippets.settings.newProductmaxDays %}
<div class="ribbon ribbon-3 productbox-ribbon">
{{ snippets.ribbons.3 }}
</div>
{% endif %}
{% if product.average_rating and product.average_rating <= snippets.settings.topProductMinStars %}
<div class="ribbon ribbon-6 productbox-ribbon">
{{ snippets.ribbons.6 }}
</div>
{% endif %}
{% if product.age and product.age < 0 %}
<div class="ribbon ribbon-5 productbox-ribbon">
{{ snippets.ribbons.5 }}
</div>
{% endif %}
{% if product.vorbestellbardate and product.vorbestellbardate > 0 %}
<div class="ribbon ribbon-9 productbox-ribbon">
{{ snippets.ribbons.9 }}
</div>
{% endif %}
{% if product.age and product.age > 0 and product.stock <= 0 %}
<div class="ribbon ribbon-5 productbox-ribbon">
{{ snippets.ribbons.5 }}
</div>
{% endif %}
<div class="productbox-images list-gallery">
<a href="{{ product.url }}" title="{{ product.name }}">
<div class="productbox-image square square-image">
<div class="inner">
<picture>
<img src="{{ product.image }}" class="img-fluid" loading="lazy" alt="{{ product.name }}" />
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col col-12">
<div class="productbox-caption">
<div class="et-item-box-manufacturer productbox-manufacturer">
<span>{% if snippets.settings.showBrand %}{{ product.brand }}{% endif %}</span>
</div>
<div class="et-item-box-title productbox-title">
<a href="{{ product.url }}" class="text-clamp-2 link-discreet">
{{ product.name }}
</a>
</div>
<div class="et-item-box-rating productbox-rating">
{% if product.average_rating > 0 %}
<a class="rating" href="{{ product.url }}#tab-votes" title="{{ snippets.productRating }}: {{ product.average_rating }}/5">
{% if product.average_rating >= 5 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>
{% else %}
{% if product.average_rating >= 4 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 4 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}
{% else %}
{% if product.average_rating >= 3 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 3 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.average_rating >= 2 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 2 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.average_rating >= 1 %}
<i class="{{ snippets.icons.rating }}"></i>{% if product.average_rating > 1 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.average_rating > 0 %}
<i class="{{ snippets.icons.ratingHalf }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
</a>
{% endif %}
</div>
{% if product.in_stock %}
{% if product.stock >= snippets.settings.storageLightsGreen%}
<div class="delivery-status">
<ul class="list-unstyled">
<li>
<span class="status status-2">
<span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
<span class="status-text">{{snippets.settings.storageLightTextGreen}}</span>
</span>
</li>
</ul>
</div>
{% endif %}
{% if product.stock > snippets.settings.storageLightsRed and product.stock < snippets.settings.storageLightsGreen %}
<div class="delivery-status">
<ul class="list-unstyled">
<li>
<span class="status status-1">
<span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
<span class="status-text">{{snippets.settings.storageLightTextYellow}}</span>
</span>
</li>
</ul>
</div>
{% endif %}
{% if product.stock == snippets.settings.storageLightsRed%}
<div class="delivery-status">
<ul class="list-unstyled">
<li>
<span class="status status-0">
<span class="{{snippets.settings.storageLightIcon}} status-icon"> </span>
<span class="status-text">{{snippets.settings.storageLightTextRed}}</span>
</span>
</li>
</ul>
</div>
{% endif %}
{% endif %}
<div class="et-item-box-price">
<div class="price_wrapper">
{% if product.has_variations or product.bulk_prices != 0 %}
<span class="price_label pricestarting">
{{ snippets.priceStarting }}
</span>
{% endif %}
<div class="price productbox-price {% if product.on_sale %} special-price{% endif %}">
<span>{{ product.price | money }} {{ globals.currency_symbol }} <span class="footnote-reference">*</span></span>
</div>
{% if product.on_sale %}
<div class="price-note et-old-price">
<div class="instead-of old-price">
<small class="text-muted-util">
<del class="value">{{ product.original_price | money }} {{ globals.currency_symbol }}</del>
</small>
</div>
</div>
{% endif %}
{% if product.base_price > 0 %}
<div class="price-note">
<span class="value">{{ product.base_price | money }} {{ globals.currency_symbol }} {{ snippets.vpePer }} {{ product.base_price_unit }}</span>
</div>
{% else %}
<div class="price-note"> </div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="et-slider-nav" id="clerk-slider-nav-{{ snippets.settings.slider.id }}">
<div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="clerk-slider-prev-{{ snippets.settings.slider.id }}">
<i class="{{ snippets.icons.sliderPrevious }}"></i>
</div>
<div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="clerk-slider-next-{{ snippets.settings.slider.id }}">
<i class="{{ snippets.icons.sliderNext }}"></i>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$("#et-clerk-slider-{{ snippets.settings.slider.id }}").slick({{ snippets.settings.slider.settings }});
$.evo.popover();
});
</script>
{% endif %}
Deslizador del Carrito de Compras (Nova) #
{% if products.length != 0 %}
<div class="slick-slider-other is-not-opc">
<div class="hr-sect h2">
{{ headline }}
</div>
<div id="slick-slider-{{ snippets.settings.slider.id }}" class="carousel-arrows-inside carousel slick-smooth-loading slider-no-preview slick-type-product slick-lazy" data-slick-type="product-slider">
{% for product in products %}
<div class="product-wrapper col">
<div id="result-wrapper_buy_form_{{ product.id }}" data-wrapper="true" class="productbox productbox-column">
<div class="productbox-inner">
<div class="row">
<div class="col col-12">
<div class="productbox-image">
<div class="productbox-images">
<a href="{{ product.url }}" title="{{ product.name }}">
<div class="productbox-image square square-image">
<div class="inner">
<picture>
<img src="{{ product.image }}" class="img-fluid" loading="lazy" alt="{{ product.name }}" />
</picture>
</div>
</div>
{% if product.top_article and product.top_article != false %}
<div class="ribbon ribbon-4 productbox-ribbon">
{{ snippets.ribbons.4 }}
</div>
{% endif %}
{% if product.on_sale and product.on_sale != false %}
<div class="ribbon ribbon-2 productbox-ribbon">
{{ snippets.ribbons.2 }}
</div>
{% endif %}
{% if product.in_stock and product.in_stock != false %}
<div class="ribbon ribbon-8 productbox-ribbon">
{{ snippets.ribbons.8 }}
</div>
{% endif %}
{% if product.in_stock and product.in_stock <= 0 %}
<div class="ribbon ribbon-7 productbox-ribbon">
{{ snippets.ribbons.7 }}
</div>
{% endif %}
{% if product.age and product.age <= snippets.settings.newProductmaxDays %}
<div class="ribbon ribbon-3 productbox-ribbon">
{{ snippets.ribbons.3 }}
</div>
{% endif %}
{% if product.average_rating and product.average_rating <= snippets.settings.topProductMinStars %}
<div class="ribbon ribbon-6 productbox-ribbon">
{{ snippets.ribbons.6 }}
</div>
{% endif %}
{% if product.age and product.age < 0 %}
<div class="ribbon ribbon-5 productbox-ribbon">
{{ snippets.ribbons.5 }}
</div>
{% endif %}
{% if product.vorbestellbardate and product.vorbestellbardate > 0 %}
<div class="ribbon ribbon-9 productbox-ribbon">
{{ snippets.ribbons.9 }}
</div>
{% endif %}
{% if product.age and product.age > 0 and product.stock <= 0 %}
<div class="ribbon ribbon-5 productbox-ribbon">
{{ snippets.ribbons.5 }}
</div>
{% endif %}
</a>
</div>
</div>
</div>
<div class="col col-12">
<div class="productbox-title">
<a href="{{ product.url }}" title="{{ product.name }}" class="text-clamp-2">
{{ product.name }}
</a>
</div>
{% if product.reviews_avg > 0 %}
<a class="rating" href="{{ product.url }}#tab-votes" title="{{ snippets.productRating }}: {{ product.reviews_avg }}/5">
{% if product.reviews_avg >= 5 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>
{% else %}
{% if product.reviews_avg >= 4 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 4 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}
{% else %}
{% if product.reviews_avg >= 3 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 3 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.reviews_avg >= 2 %}
<i class="{{ snippets.icons.rating }}"></i><i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 2 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.reviews_avg >= 1 %}
<i class="{{ snippets.icons.rating }}"></i>{% if product.reviews_avg > 1 %}<i class="{{ snippets.icons.ratingHalf }}"></i>{% else %}<i class="{{ snippets.icons.ratingEmpty }}"></i>{% endif %}<i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% else %}
{% if product.reviews_avg > 0 %}
<i class="{{ snippets.icons.ratingHalf }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i><i class="{{ snippets.icons.ratingEmpty }}"></i>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
</a>
{% else %}
<div class="rating productbox-rating-empty"></div>
{% endif %}
<div>
<div class="price_wrapper">
{% if product.has_variations or product.bulk_prices != 0 %}
<span class="price_label pricestarting">
{{ snippets.priceStarting }}
</span>
{% endif %}
<div class="price productbox-price {% if product.on_sale %} special-price{% endif %}">
<span>{{ product.price | money_eu }} {{ globals.currency_symbol }} <span class="footnote-reference">*</span></span>
</div>
{% if product.on_sale %}
<div class="price-note">
<div class="instead-of old-price">
<small class="text-muted-util">
<del class="value">{{ product.original_price | money_eu }} {{ globals.currency_symbol }}</del>
</small>
</div>
</div>
{% endif %}
{% if product.base_price > 0 %}
<div class="price-note">
<span class="value">{{ product.base_price | money_eu }} {{ globals.currency_symbol }} {{ snippets.vpePer }} {{ product.base_price_unit }}</span>
</div>
{% else %}
<div class="price-note"> </div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$(function() {
$.evo.generateSlickSlider();
$.evo.popover();
});
</script>
{% endif %}
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.