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 producto, lo que hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar con Recommendations usando el módulo PrestaShop.

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

Configuración del Slider #

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

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

Crear Design #

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

Un Design puede reutilizarse en 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 usar como base.
  4. Asígnale un nombre y haz clic en Create design..
  5. Realiza cualquier cambio que desees en el diseño.

Code Design #

  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 code design desde cero usando código Liquid.

Si deseas un diseño de inicio, consulta la plantilla Slider más abajo.

Crear Element #

Esto contiene todos los ajustes utilizados para mostrar Recommendations y permite insertarlo 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. Asígnale un nombre descriptivo. Recomendamos nombrarlo en función de la página y la lógica que deseas usar. Ej.: “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieras usar del desplegable. Puedes ver una visión general de todas las lógicas de producto aquí.
  5. En Design selecciona el design que creaste del desplegable y elige la cantidad de productos que deseas 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: Injectión, Código embebido y a través del Módulo.

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

Configuración del 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, activa y completa los campos de plantillas/contenidos:
    • Página de producto: pon Enabled en Yes y asegúrate de que el campo de plantillas contiene tus IDs de Slider (separados por comas, 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 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:
    • Usando injection permite insertar el código usando un selector CSS.
    • Usando código embebido permite insertar el código manualmente en tu sitio web.
  5. Elige la opción más fácil para ti.
  6. Para código embebido, agrega cualquier lógica frontend necesaria para insertar, por ejemplo, un ID de producto o de categoría. Esto depende de la lógica que elijas.

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

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

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

Páginas #

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

Página Principal #

  1. En my.clerk.io, crea 3 Elements con las siguientes logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los códigos de inserción en la plantilla de tu página principal/bloque CMS (por ejemplo, Ap PageBuilder RawHTML).

Si quieres mostrar todos los banners uno encima del otro, inserta todos los códigos en la misma caja. Si quieres dividirlos por la Home Page, simplemente repite el proceso anterior varias veces.

Página de Categoría #

  1. En my.clerk.io, crea un Element con la logic Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, selecciona PrestaShop y copia el código de inserción.
  3. Ve a los archivos del tema de PrestaShop y encuentra el archivo que genera tus páginas de categoría. Por lo general es themes/TEMPLATE_NAME/category.tpl.
  4. Inserta el código de inserción en algún lugar debajo del título y la descripción. Establece data-category en {$smarty.get.id_category}.

Página de Producto #

  1. En my.clerk.io, crea 2 Sliders con las siguientes logics:
    • 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 códigos de inserción.
  3. En los archivos del tema de PrestaShop, busca el archivo que genera tus páginas de producto. Por lo general es themes/TEMPLATE_NAME/product.tpl.
  4. Inserta los códigos de inserción en algún lugar debajo de la descripción del producto. Establece data-products en [{$smarty.get.id_product}].

Paso de Añadir al Carrito #

  1. En my.clerk.io, crea un Element con la logic 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. Bajo Powerstep Settings, inserta los IDs de los elements que creaste, separados por comas, en el campo Templates. El ID aparece dentro del embedcode del element como tu nombre de plantilla de datos, 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 en Recommendations -> Elements -> Edit (el número de elements varía entre 1 y 4 para el paso Add-To-Basket).

Para permitir que se muestre el paso Add-To-Basket, 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. Pon Ajax cart en No.
  4. Haz clic en Save.

Página de Carrito #

  1. En my.clerk.io, crea un Element con la logic 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 encuentra el archivo que genera tus páginas de carrito. Por lo general es themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Inserta el código de inserción en algún lugar debajo de los ítems y el botón de finalizar compra. Establece data-products en [{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 logic Visitor Recommendations.
  2. Puedes activarlo a través del módulo o manualmente. A continuación tienes 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 Element en my.clerk.io y asígnale el nombre Exit Intent.

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

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

  4. Localiza 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 prefieres configurar Exit Intent manualmente, sigue estos pasos:

  1. Crea un nuevo Element en my.clerk.io y asígnale el nombre Exit Intent.

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

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

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

  5. Agrega data-exit-intent="true" al código de inserción 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 recommendations que incluyan data-exit-intent="true" lanzarán el pop-up de exit intent.

Plantillas Iniciales #

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

Código Slider #

Esta plantilla renderiza un slider estándar con diversa información del producto, que puedes adaptar según 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.