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 hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo empezar con Recommendations utilizando el módulo de PrestaShop.

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

Configuración de Slider #

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.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements para nuestras Best Practices.

Crear Design #

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

Un design se puede reutilizar para cualquier cantidad de elements de Recommendations que crees.

Design Editor #

  1. Ve a Recommendations > Designs y haz clic en New Design..
  2. Elige Product Slider.
  3. De la lista de plantillas de design, elige la que quieras para comenzar.
  4. Ponle un nombre y haz clic en Create design..
  5. Haz 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. Ponle un nombre y haz clic en Create design..
  4. Crea un code design desde cero usando Liquid code.

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

Crear Element #

Aquí van todas las configuraciones utilizadas para mostrar las Recommendations y hacerlo insertable 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 Element..
  3. Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y lógica que uses. Ejemplo: “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieras usar en el menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el design que creaste en el menú desplegable y elige el número de productos que quieres mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Para añadir Clerk Recommendations a tu sitio web, tienes tres opciones diferentes: Injection, Embedded code, y por medio del Module.

  1. Abre la pestaña Insert into website.
  2. 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.
  3. Elige la opción que te resulte más fácil.
  4. Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona PrestaShop en estos casos. Esto completará el embedcode con los shortcodes correctos para PrestaShop.

Configuración del Módulo #

Esta opción está disponible para Category, Cart y Product pages, Exit Intent y Powerstep.

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

Configuración en my.clerk.io #

  1. Ve a Recommendations > Elements..
  2. Selecciona el contenido 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 resulte más fácil.
  6. Para embedded code, añade la 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 embedded code en PrestaShop, las ubicaciones y rutas de archivo típicas son:

  • Homepage: inserta el embed code en la plantilla/bloque CMS de tu homepage (por ejemplo, Ap PageBuilder RawHTML).
  • Product page: themes/TEMPLATE_NAME/product.tpl — pon data-products a [{$smarty.get.id_product}].
  • Category page: themes/TEMPLATE_NAME/category.tpl — pon data-category a {$smarty.get.id_category}.
  • Cart page: themes/TEMPLATE_NAME/shopping-cart.tpl — pon data-products a [{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 de Recommendations, con un sample product ID:

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

Pages #

A continuación están las páginas específicas donde debes insertar Recommendations y qué tipos deberías usar, para seguir nuestras Best Practices.

Homepage #

  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/bloque CMS de tu homepage (por ejemplo, Ap PageBuilder RawHTML).

Si quieres mostrar todos los banners uno encima de otro, inserta todos los embedcodes en la misma caja. Si quieres repartirlos por la Home Page, simplemente repite el proceso anterior varias veces.

Category Page #

  1. En my.clerk.io, crea un Element 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 del tema de PrestaShop y localiza el archivo que genera tus Category pages. Suele ser themes/TEMPLATE_NAME/category.tpl.
  4. Inserta el embedcode debajo del título y la descripción. Pon data-category a {$smarty.get.id_category}.

Product Page #

  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 del tema de PrestaShop, localiza el archivo que genera tus product pages. Suele ser themes/TEMPLATE_NAME/product.tpl.
  4. Inserta los embedcodes debajo de la descripción del producto. Pon data-products a [{$smarty.get.id_product}].

Add-To-Basket Step #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Ponle 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. Bajo Powerstep Settings, inserta los IDs de los elements que creaste, separados por comas, en el campo Templates. El ID está dentro del código embed del element en data template name, por ejemplo: data-template=@power-step-others-also-bought.
  6. Pon Enabled en Yes.
  7. Haz clic en Save.

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

Para mostrar el paso Add-To-Basket, necesitas desactivar el Ajax cart por defecto 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.

Cart Page #

  1. En my.clerk.io, crea un Element 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 del tema de PrestaShop y localiza el archivo que genera tus Cart pages. Suele ser themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserta el embedcode debajo de los artículos del carrito y el botón de checkout. Pon data-products a [{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 a través del módulo o manualmente. A continuació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 Element en my.clerk.io y ponle el nombre Exit Intent.

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

  3. En el backend de PrestaShop, ve al menú lateral Modules and Services y busca Clerk module.

  4. Busca Exit Intent Settings. Pon 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 Exit Intent manualmente, sigue estos pasos:

  1. Crea un nuevo Element en my.clerk.io y ponle el nombre 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 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. Añade data-exit-intent="true" al embed code que acabas de colocar 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 tengan data-exit-intent="true" activarán el pop-up de exit intent.

Plantillas iniciales #

Si deseas usar code designs, estas plantillas pueden ayudarte a empezar.

Código del Slider #

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