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 de PrestaShop.

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

Configuración del Slider #

Las Recommendations se crean con Elements que hacen referencia a un Design. A continuación se muestra la guía básica para configurar un Element.

Si sigues los pasos en my.clerk.io > Settings > Setup Guides, se crearán automáticamente los Elements para nuestras mejores prácticas.

Crear Design #

Las Recommendations se muestran como un slider de forma predeterminada. Esto permite que los clientes vean más productos con menos clics. Puedes utilizar el Editor de Design para configurarlo visualmente, o usar code designs.

Un Design puede reutilizarse para cualquier cantidad de elementos de Recommendations que crees.

Editor de Design #

  1. Ve a Recommendations > Designs y haz clic en New Design..
  2. Elige Product Slider.
  3. De la lista de plantillas de Design, selecciona la que desees para comenzar.
  4. Asígnale un nombre y haz clic en Create design..
  5. Realiza cualquier cambio que desees en el Design.

Code Design #

  1. Ve a Recommendations > Designs y haz clic en New Design..
  2. Elige Other designs > Blank > Code..
  3. Asigna un nombre y haz clic en Create design..
  4. Crea un code design desde cero usando Liquid code.

Si deseas un design inicial, consulta la plantilla Slider más abajo.

Crear Content #

Esto contiene todas las configuraciones utilizadas para mostrar las Recommendations y hacer que se puedan insertar en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras crear.

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

Agregar al sitio web #

Para agregar Clerk Recommendations a tu sitio web, tienes tres opciones diferentes: Injection, Embedded code y a través del Módulo.

  1. Abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código utilizando un selector CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que te resulte más fácil de usar.
  4. Para algunas Logics verás el menú desplegable Choose your platform. En estos casos, selecciona PrestaShop. Esto rellenará automáticamente el embedcode con los shortcodes correctos de PrestaShop.

Configuración del Módulo #

Esta opción está disponible para las 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 los templates/contents:
    • Página de producto: ajusta Enabled en Yes y asegúrate de que el campo de templates contenga tus IDs de Slider (separados por comas, sin “@”).
    • Página de categoría: ajusta Enabled en Yes y agrega tus IDs de Slider.
    • Página de carrito: ajusta Enabled en Yes y agrega tu ID de Slider.
  3. Haz clic en Save.

Configuración en my.clerk.io #

  1. Ve a Recommendations > Elements..
  2. Selecciona el Content elegido.
  3. Abre la pestaña Insert into website.
  4. Aquí tienes dos 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. Elige la opción que te sea más sencilla.
  6. Para embedded code, agrega cualquier lógica frontend necesaria para insertar, por ejemplo, el ID de un producto o una categoría. Esto depende de la lógica que elijas.

Para embedded code en PrestaShop, las ubicaciones y rutas de archivos típicas son:

  • Página de inicio: inserta el embed code en la plantilla de tu página de inicio/bloque CMS (por ej., Ap PageBuilder RawHTML).
  • Página de producto: themes/TEMPLATE_NAME/product.tpl — establece data-products como [{$smarty.get.id_product}].
  • Página de categoría: themes/TEMPLATE_NAME/category.tpl — establece data-category como {$smarty.get.id_category}.
  • Página de carrito: themes/TEMPLATE_NAME/shopping-cart.tpl — establece 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 embed code para Recommendations, con un ID de producto de ejemplo:

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

Páginas #

A continuación se indican las páginas específicas donde deberías insertar Recommendations, y qué tipos usar, para seguir nuestras mejores prácticas.

Página de Inicio #

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

Si deseas mostrar todos los banners uno encima de otro, coloca todos los embedcodes en el mismo bloque. Si prefieres repartirlos en la Home Page, solo repite el proceso anterior varias veces.

Página de Categoría #

  1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
  2. En el menú desplegable Insert into website > Choose your platform, selecciona PrestaShop y copia el embedcode.
  3. Ve a los archivos de tema de PrestaShop y busca el archivo que genera tus páginas de Categoría. Normalmente es themes/TEMPLATE_NAME/category.tpl.
  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Establece 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 Insert into website > Choose your platform selecciona PrestaShop para cada uno y copia los embedcodes.
  3. En los archivos de tema de PrestaShop, busca el archivo que genera tus páginas de producto. Normalmente es themes/TEMPLATE_NAME/product.tpl.
  4. Inserta los embedcodes en algún lugar debajo de la descripción del producto. Establece data-products como [{$smarty.get.id_product}].

Paso Add-To-Basket #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Asígnale el nombre “Add-To-Basket / Others Also Bought”. Esto 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 IDs de los elements que creaste, separados por comas, en el campo Templates. El ID se indica dentro del embed code como tu data template name, por ejemplo, data-template=@power-step-others-also-bought.
  6. Ajusta Enabled en Yes.
  7. Haz clic en Save.

Puedes encontrar los IDs de cada elemento que has creado en tu backend de Clerk en Recommendations -> Elements -> Edit (el número de elements varía entre 1 y 4 para el paso Add-To-Basket).

Para que el paso Add-To-Basket se muestre, necesitas desactivar el Ajax cart predeterminado de PrestaShop:

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

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 PrestaShop y copia el embedcode.
  3. Ve a los archivos de tema de PrestaShop y busca el archivo que genera tus páginas de Carrito. Normalmente es themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserta el embedcode en algún lugar debajo de los artículos del carrito y el botón de checkout. Establece 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 Element con la lógica Visitor Recommendations.
  2. Puedes activarlo mediante el módulo o manualmente. A continuación, los pasos para ambas opciones.

Configuración del Módulo #

Para configurar Exit Intent a través del módulo, sigue estos cinco pasos:

  1. Crea un nuevo Content en my.clerk.io y nómbrelo 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 encuentra Clerk module.

  4. Busca Exit Intent Settings. Ajusta Enabled en YES, y asegúrate de que el campo Template contenga “exit-intent”.

  5. Haz clic en Save para activarlo.

Configuración Manual #

Si quieres configurar manualmente Exit Intent, sigue estos pasos:

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

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

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

  4. En Insert Into Website, copia el embed code proporcionado a este archivo de PrestaShop, justo encima del script de seguimiento de Clerk.io: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Agrega data-exit-intent="true" al embed code que acabas de colocar en visitor_tracking.tpl. De esta forma:

<!-- 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 Recommendations que contengan data-exit-intent="true" activarán la ventana emergente de exit intent.

Plantillas Iniciales #

Si deseas utilizar code designs, estas plantillas pueden servirte como punto de partida.

Código Slider #

Esta plantilla renderizará un slider estándar con diversa informació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-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.