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 Clerk.js setup en Magento 2.

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

Configuración del Slider #

Las Recommendations se crean con Elements que hacen referencia a un Design. A continuación, tienes 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 mejores prácticas.

Crear Design #

Las 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 ser reutilizado para cualquier cantidad de elementos 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 diseño, elige la que quieras usar como punto de partida.
  4. Asígnale un nombre y haz clic en Create design.
  5. Realiza los cambios 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. Asígnale un nombre y haz clic en Create design.
  4. Crea un code design desde cero usando Liquid code.

Si deseas un diseño inicial, revisa la Slider template más abajo.

Crear Content #

Este contiene todas las configuraciones utilizadas para mostrar las Recommendations y hacerlo embebible 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 se va a utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
  5. En Design selecciona el design 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.

Agregar 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. Elige la opción que te resulte más fácil de utilizar.
  4. Para algunas Logics verás el menú desplegable Choose your platform. En esos casos selecciona Magento 2. Esto rellenará el embedcode con los shortcodes correctos para 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 #

Utiliza la extensión de Magento 2 para habilitar sliders en las 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 rellena los campos de templates/contents:
    • Product Settings: establece Enabled en Yes y asegúrate de que el campo de templates contenga tus IDs de Slider (separados por comas, sin “@”).
    • Category Settings: establece Enabled en Yes y añade tus IDs de Slider.
    • Cart Settings: establece Enabled en Yes y añade tu ID de Slider.
  3. Haz clic en Save Config.

Configuración en my.clerk.io #

  1. Ve a Recommendations > Elements.
  2. Selecciona el slider que deseas insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
  5. Para embedded code en Magento 2, las ubicaciones típicas son:
    • Inicio: Content > Blocks > Home page block bajo Content.
    • Página de producto: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml con data-products establecido en el ID del producto actual.
    • Página de categoría: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml con data-category establecido en el ID de la categoría actual.
    • Carrito: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml con data-products establecido en los IDs de productos del carrito.

Páginas #

A continuación, se muestran las páginas específicas donde debes 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 logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los embedcodes en la plantilla/bloque de tu página de inicio.

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 Magento 2 y copia el embedcode.
  3. Ve a los archivos de tema de Magento 2 y localiza 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 algún lugar debajo del título y descripción. Establece data-category en el ID de la categoría actual.

Página de Producto #

  1. En my.clerk.io, crea 2 Elements con las siguientes logics:
    • 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 del 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 algún lugar debajo de la descripción del producto. Establece data-products en el ID del producto actual.

Paso de Añadir al Carrito #

  1. Si aún no lo hiciste, crea el Content que desees utilizar en tu paso de Añadir al Carrito (Power Step).

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

  3. Establece Enabled en Yes.

  4. Elige la opción Popup o Page, e introduce los IDs de tus Elements, separados por comas.

  5. Haz clic en Save Config.

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

Aquí tienes un ejemplo de cómo encontrar el ID del Element:

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 Magento 2 y copia el embedcode.
  3. Ve a los archivos de tema de Magento 2 y localiza 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 algún lugar debajo de los artículos del carrito y el botón de checkout. Establece data-products en los IDs de productos del carrito.

Exit Intent #

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

Configuración de la Extensión #

Desde 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 consta de 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, por FTP:

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

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

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

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

Plantillas Iniciales #

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

Código Slider #

Esta plantilla renderiza un slider estándar con información de producto 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.