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

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

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.

Seguír los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements para nuestras mejores prácticas.

Crear Design #

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

Un design puede reutilizarse para cualquier número 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 design, elige la que desees usar como base.
  4. Ponle 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. Ponle un nombre y haz clic en Create design.
  4. Crea un code design desde cero usando Liquid code.

Si deseas un design de ejemplo, revisa la plantilla de slider más abajo.

Crear Element #

Esto contiene todas las configuraciones utilizadas para mostrar las Recommendations y permite integrarlo en tu sitio web. Sigue estos pasos para cada banner de Recommendations que desees 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 la lógica que desees usar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que deseas usar del desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el design que creaste en el desplegable y elige el número 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 web.
  3. Elige la opción que te sea más sencilla de usar.
  4. Para algunas lógicas verás el desplegable Choose your platform. Selecciona Magento 2 en estos casos. Así, el embedcode se autocompletará 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 #

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

  1. Ve a Stores > Configuration > Clerk > Configuration y selecciona el Store View correcto.
  2. Para cada sección de página, habilita y rellena las plantillas/contenidos:
    • Product Settings: establece Enabled en Yes y asegúrate de que el campo de plantillas contiene los IDs de tus Sliders (separados por coma, sin “@”).
    • Category Settings: pon Enabled en Yes y añade tus IDs de Sliders.
    • Cart Settings: pon 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 quieres insertar.
  3. Abre la pestaña Insert into website.
  4. Elige una de las siguientes opciones:
  5. Para embedded code en Magento 2, ubicaciones típicas son:
    • Página principal: Content > Blocks > Home page block bajo Content.
    • Página de producto: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml con data-products configurado con el 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 configurado con los IDs de productos en el carrito.

Páginas #

A continuación se muestran 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 (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 de tu página principal.

Página de categoría #

  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 Magento 2 y copia el embedcode.
  3. Ve a los archivos de tema de Magento 2 y encuentra 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 la descripción. Configura data-category con el ID de la categoría actual.

Página de producto #

  1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. En el 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, encuentra 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 debajo de la descripción del producto. Configura data-products con el ID del producto actual.

Paso de Añadir al Carrito (Add-To-Basket Step) #

  1. Si aún no lo has hecho, crea el Element que quieres usar en tu Add-To-Basket Step (Power Step).

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

  3. Establece Enabled en Yes.

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

  5. Haz clic en Save Config.

Puedes encontrar los ID’S de cada Element que has creado en tu Clerk backend ( my.clerk.io), en Recommendations -> Elements -> Edit (el número de Elements varía entre 1 y 4 para el paso 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 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 encuentra 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 debajo de los artículos del carrito y el botón de pago. Configura data-products con los IDs de productos en el 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. Abajo tienes 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 Website 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 Magento2, ve a Stores->Configuration->Configuration en el menú lateral y localiza Exit-Intent Settings.

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

  5. Haz clic en Save Config para activarlo.

Configuración manual #

La configuración es de 4 pasos:

  1. Crea un Website Element en my.clerk.io y ponle el nombre " 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 embedcode que acabas de colocar. Así:

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

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

Plantillas de inicio #

Si quieres usar code designs, estas plantillas te pueden ayudar a empezar.

Slider Code #

Esta plantilla renderizará un slider estándar con información de producto común que puedes ajustar 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.