Prestashop

Recommendations

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

Clerk.io ofrece más de 20 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 con Recommendations usando el módulo PrestaShop.

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

Configuración de Slider #

Las Recommendations se crean con Sliders que hacen referencia a un Diseño. A continuación, se muestra la guía básica para configurar un Slider.

Seguir los pasos de my.clerk.io > Settings > Setup Guides creará automáticamente los Sliders para nuestras Mejores Prácticas.

Crear Diseño #

Las Recommendations se muestran como un slider 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 utilizar diseños en código.

Un diseño puede ser reutilizado para cualquier cantidad de sliders de Recommendations que crees.

Editor de Diseño #

  1. Ve a Recommendations > Designs y haz clic en New Design..
  2. Elige Product Slider.
  3. De la lista de plantillas de diseño, elige la que quieres usar como base.
  4. Asígnale un nombre y haz clic en Create design..
  5. Realiza los cambios que desees en el diseño.

Código de Diseño #

  1. Ve a Recommendations > Designs y haz clic en New Design..
  2. Elige Other designs > Blank > Code..
  3. Asígnale 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, consulta la plantilla de Slider más abajo.

Crear Contenido #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations y hacerlas insertables en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras crear.

  1. Ve a Recommendations > Sliders..
  2. Haz clic en New Content..
  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas usar. Por ejemplo, “Página Principal / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que quieras utilizar en el menú desplegable. Puedes ver una visión general de todas las lógicas de productos aquí.
  5. En Design selecciona el diseño que creaste del menú desplegable y elige la cantidad de productos que quieres mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

Para añadir Clerk Recommendations a tu sitio web, tienes tres opciones diferentes: Inyección, Código embebido y mediante el Módulo.

  1. Abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar la inyección te permite insertar el código utilizando un selector CSS.
    • Usar el código embebido te permite insertar el código manualmente en tu web.
  3. Elige la opción que te resulte más sencilla.
  4. Para algunas lógicas verás el desplegable Choose your platform. Selecciona PrestaShop en estos casos. Así se rellenará automáticamente el embedcode con los shortcodes correctos de PrestaShop.

Configuración de Módulo #

Esta opción está disponible para páginas de Categoría, Carrito y Producto, Exit Intent y Powerstep.

  1. En PrestaShop, ve a Modules and Services > Clerk > Configure.
  2. Para cada sección de página, habilita y completa las plantillas/contenidos:
    • Página de producto: pon Enabled en Yes y asegúrate de que el campo de plantillas contenga tus IDs de Slider (separados por coma, sin “@”).
    • Página de categoría: pon Enabled en Yes y añade tus IDs de Slider.
    • Página de carrito: pon Enabled en Yes y añade tu ID de Slider.
  3. Haz clic en Save.

Configuración my.clerk.io #

  1. Ve a Recommendations > Sliders..
  2. Selecciona el contenido elegido.
  3. Abre la pestaña Insert into website.
  4. Aquí tienes dos opciones:
    • Usar inyección te permite insertar el código usando un selector CSS.
    • Usar el código embebido te permite insertar el código manualmente en tu web.
  5. Elige la opción que sea más fácil para ti.
  6. Con el código embebido, añade 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.

Para el código embebido en PrestaShop, las ubicaciones y rutas de archivo típicas son:

  • Página principal: inserta el embedcode en la plantilla de inicio/bloque CMS (ejemplo: Ap PageBuilder RawHTML).
  • Página de producto: themes/TEMPLATE_NAME/product.tpl — define data-products como [{$smarty.get.id_product}].
  • Página de categoría: themes/TEMPLATE_NAME/category.tpl — define data-category como {$smarty.get.id_category}.
  • Página de carrito: themes/TEMPLATE_NAME/shopping-cart.tpl — define data-products como [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

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

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

Páginas #

A continuación encontrarás las páginas específicas donde deberías insertar Recommendations y qué tipos debes usar para seguir nuestras Mejores Prácticas.

Página Principal #

  1. En my.clerk.io, crea 3 Sliders con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los embedcodes en la plantilla de inicio/bloque CMS (ejemplo: Ap PageBuilder RawHTML).

Si quieres mostrar todos los banners uno encima del otro, inserta todos los embedcodes en el mismo bloque. Si deseas dividirlos a lo largo de la Página Principal, solo sigue el proceso anterior varias veces.

Página de Categoría #

  1. En my.clerk.io, crea un Slider con la lógica Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, selecciona PrestaShop y copia el embedcode.
  3. Ve a los archivos de tema de PrestaShop y localiza el archivo que genera tus páginas de Categoría. Suele ser themes/TEMPLATE_NAME/category.tpl.
  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Define data-category como {$smarty.get.id_category}.

Página de Producto #

  1. En my.clerk.io, crea 2 Sliders con las siguientes lógicas:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. En el desplegable Insert into website > Choose your platform, selecciona PrestaShop para cada uno y copia los embedcodes.
  3. En los archivos de tema de PrestaShop, localiza el archivo que genera tus páginas de producto. Suele ser themes/TEMPLATE_NAME/product.tpl.
  4. Inserta los embedcodes en algún lugar debajo de la descripción del producto. Define data-products como [{$smarty.get.id_product}].

Paso de Añadir a la Cesta #

  1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
  2. Asígnale el nombre “Add-To-Basket / Others Also Bought”. Es importante para que el embedcode funcione correctamente.
  3. Haz clic en Save en la parte superior de la página.
  4. En el backend de PrestaShop, ve a Modules And Services -> Clerk -> Configure.
  5. En Powerstep Settings, inserta los ID de los sliders que creaste, separados por coma, en el campo Templates. El ID está dentro del código embed del slider como el nombre de data template, por ejemplo, data-template=@power-step-others-also-bought.
  6. Pon Enabled en Yes.
  7. Haz clic en Save.

Puedes encontrar los ID de cada slider creado en tu backend de Clerk bajo Recommendations -> Sliders -> Edit (el número de sliders varía entre 1 y 4 para el paso de Añadir a la Cesta).

Para permitir que se muestre el paso Añadir a la Cesta, necesitas desactivar el carrito Ajax predeterminado de PrestaShop:

  1. En el backend de PrestaShop, ve a Modules And Services.
  2. Busca Cart Block y haz clic en Configure.
  3. Pon Ajax cart en No.
  4. Haz clic en Save.

Página de Carrito #

  1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
  2. En el desplegable Insert into website > Choose your platform selecciona PrestaShop y copia el embedcode.
  3. Ve a los archivos de tema de PrestaShop y localiza el archivo que genera tu página de Carrito. Suele ser themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserta el embedcode en algún lugar debajo de los elementos del carrito y botón de checkout. Define data-products como [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Exit Intent #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
  2. Puedes activarlo a través del módulo o manualmente. Abajo están los pasos para ambas opciones.

Configuración del Módulo #

Para configurar Exit Intent mediante el módulo, sigue estos cinco pasos:

  1. Crea un nuevo Content en my.clerk.io y nómbralo Exit Intent.

  2. Elige una lógica para él – sugerimos “Visitor Recommendations”.

  3. En el backend de PrestaShop, ve a Modules and Services en el menú lateral y localiza Clerk module.

  4. Ubica Exit Intent Settings. Pon Enabled en YES, y asegúrate de que el campo Template contiene “exit-intent”.

  5. Haz clic en Save para activarlo.

Configuración Manual #

Si quieres configurar Exit Intent manualmente, sigue estos pasos:

  1. Crea un nuevo Content en my.clerk.io y nómbralo Exit Intent.

  2. Estiliza tu slider en Designs en my.clerk.io.

  3. Elige una lógica para él – sugerimos “Visitor Recommendations”.

  4. Desde Insert Into Website, copia el código embed proporcionado a este archivo de PrestaShop, justo antes del script de seguimiento de Clerk.io: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Añade data-exit-intent="true" al código embed que colocaste en visitor_tracking.tpl. Así:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Nota: Todas las recomendaciones que contengan data-exit-intent="true" activarán la ventana emergente de exit intent.

Plantillas de Inicio #

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

Código de Slider #

Esta plantilla renderizará un slider estándar con varias informaciones 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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.