Magento 2

Recommendations

Clerk.io ofrece más de 23 tipos diferentes de lógicas de producto, lo que te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo empezar a usar una configuración Clerk.js en Magento 2.

Para ver todas nuestras Mejores Prácticas, lee este artículo sobre qué Recommendations utilizar.

Configuración de Slider #

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

Si sigues los pasos en my.clerk.io > Settings > Setup Guides, los Sliders de nuestras Mejores Prácticas se crearán automáticamente.

Crear Diseño #

Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.

Un diseño puede reutilizarse en 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 deseas usar como punto de partida.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza los cambios que desees en el diseño.

Diseño de Código #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Selecciona Other designs > Blank > Code.
  3. Ponle un nombre y haz clic en Create design.
  4. Crea un diseño de código desde cero usando código Liquid.

Si deseas un diseño de inicio, revisa la plantilla de Slider al final.

Crear Contenido #

Esto incluye 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 quieras usar. Ej., “Página principal / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste del menú 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 #

  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. Escoge la opción que más fácil te resulte.
  4. Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona Magento 2 en estos casos. Esto rellenará el embedcode con los shortcodes correctos de Magento 2.

Para añadir detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Configuración de la Extensión #

Usa la extensión de Magento 2 para habilitar sliders en páginas clave:

  1. Ve a Stores > Configuration > Clerk > Configuration y elige la Store View correcta.
  2. Para cada sección de página, habilita y añade las plantillas/contenidos:
    • Product Settings: ajusta Enabled a Yes y asegúrate de que el campo templates contenga tus IDs de Slider (separados por comas, sin “@”).
    • Category Settings: ajusta Enabled a Yes y añade tus IDs de Slider.
    • Cart Settings: ajusta Enabled a Yes y añade el ID de tu Slider.
  3. Haz clic en Save Config.

Configuración en my.clerk.io #

  1. Ve a Recommendations > Sliders.
  2. Selecciona el slider que quieres insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
  5. Para el código embebido en Magento 2, los lugares típicos son:
    • Página principal: Content > Blocks > Home page block debajo de Contenido.
    • Página de producto: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml con data-products establecido al ID del producto actual.
    • Página de categoría: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml con data-category establecido al ID de la categoría actual.
    • Página de carrito: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml con data-products establecidos a los IDs de los productos en el carrito.

Páginas #

A continuación se detallan las páginas específicas donde deberías insertar Recommendations, y qué tipo deberías 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/bloque de tu página principal.

Página de Categoría #

  1. En my.clerk.io, crea un Slider con la lógica Bestsellers In Category.
  2. En el menú desplegable Insert into website > Choose your platform, selecciona Magento 2 y copia el embedcode.
  3. Ve a los archivos de tema de Magento 2 y busca el archivo que genera tus páginas de Categoría. Normalmente es vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserta el embedcode en alguna parte debajo del título y la descripción. Establece data-category en el ID de la categoría actual.

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 menú desplegable Insert into website > Choose your platform selecciona Magento 2 para cada uno y copia los embedcodes.
  3. En los archivos de tema de Magento 2, busca el archivo que genera tus páginas de producto. Normalmente es vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserta los embedcodes en alguna parte debajo de la descripción del producto. Establece data-products en el ID actual del producto.

Paso de Añadir al Carrito #

  1. Si aún no lo has hecho, crea el Content que desees usar en tu Paso de Añadir al Carrito (Power Step).

  2. En el backend de Magento 2, ve a Stores -> Configuration -> Clerk -> Configuration y encuentra Powerstep settings.

  3. Ajusta Enabled en Yes.

  4. Elige la opción Popup o Page y escribe los ID de tus Sliders, separados por comas.

  5. Haz clic en Save Config.

Puedes encontrar los ID de cada Slider que has creado en tu Clerk backend ( my.clerk.io), en Recommendations -> Sliders -> Edit (el número de Sliders varía entre 1 y 4 para el paso Add-To-Basket):

Aquí hay un ejemplo de cómo encontrar el ID del Slider:

Página de Carrito #

  1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
  2. En el menú desplegable Insert into website > Choose your platform, selecciona Magento 2 y copia el embedcode.
  3. Ve a los archivos de tema de Magento 2 y busca el archivo que genera tus páginas de Carrito. Normalmente es vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Inserta el embedcode en alguna parte debajo de los productos del carrito y del botón de finalizar compra. Establece data-products a los IDs de los productos del carrito.

Exit Intent #

  1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
  2. Puedes activarlo mediante la extensión o manualmente. A continuación están los pasos para ambas opciones.

Configuración de la Extensión #

Desde la v2.2.3, Exit-Intent puede activarse directamente desde la extensión con estos pasos:

  1. Crea un nuevo Website 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 Magento2, ve a Stores->Configuration->Configuration en el menú lateral y busca Exit-Intent Settings.

  4. Marca la casilla Enabled y asegúrate de que el campo Content contenga “exit-intent”.

  5. Haz clic en Save Config para activarlo.

Configuración Manual #

La configuración lleva 4 pasos:

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

  2. Elige una lógica para él - Sugerimos “Visitor Recommendations”.

  3. Desde Insert Into Website, copia el embedcode proporcionado en la parte superior de este archivo de Magento2, en FTP:

    vendor->clerk->magento2->view->frontend->templates->tracking.phtml

  4. Añade: data-exit-intent=“true” al código que acabas de poner. Así:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Nota: Todas las recommendations que contengan data-exit-intent=“true” activarán el pop up de exit intent.

Plantillas Iniciales #

Si quieres usar diseños de código, estas plantillas pueden ayudarte a comenzar.

Código de Slider #

Esta plantilla renderizará un slider estándar con la información de producto más común 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}


.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;
}

@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.