Magento 2

Recommendations

Backend en el Clerk.io backend

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que hace posible mostrar productos totalmente automatizados en cualquier página. Este artículo explica cómo empezar cuando se usa una configuración de Clerk.js en Magento 2.

Para conocer nuestras Mejores Prácticas completas, lea 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, se presenta la guía básica para configurar un Element.

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará automáticamente los Elements según nuestras Mejores Prácticas.

Crear Design #

Las Recommendations se muestran como slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puede utilizar el Editor de Designs para configurarlo visualmente, o usar code designs.

Un design puede reutilizarse para cualquier cantidad de elementos de Recommendations que cree.

Editor de Designs #

  1. Vaya a Recommendations > Designs y haga clic en New Design.
  2. Elija Product Slider
  3. De la lista de plantillas de design, elija la que desee para empezar.
  4. Nómbrelo y haga clic en Create design.
  5. Realice los cambios que desee en el design.

Code Design #

  1. Vaya a Recommendations > Designs y haga clic en New Design.
  2. Elija Other designs > Blank > Code.
  3. Nómbrelo y haga clic en Create design.
  4. Cree un code design desde cero usando Liquid code.

Si desea un design de inicio, consulte la plantilla de Slider más abajo.

Crear Element #

Esto contiene todas las configuraciones para mostrar las Recommendations, y lo hace embebible en su sitio web. Siga estos pasos para cada banner de Recommendations que desee crear.

  1. Vaya a Recommendations > Elements.
  2. Haga clic en New Element.
  3. Asigne un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que desee utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, seleccione la lógica de producto que desee utilizar del menú desplegable. Puede ver una descripción general de todas las lógicas de producto aquí.
  5. En Design seleccione el design que creó del menú desplegable y elija la cantidad de productos que desea mostrar.
  6. Haga clic en Save en la parte superior de la pantalla.

Añadir a la web #

  1. Abra la pestaña Insert into website.
  2. Aquí tiene dos opciones:
    • Usar injection le permite insertar el código usando un selector CSS.
    • Usar embedded code le permite insertar el código manualmente en su sitio web.
  3. Elija la opción que le resulte más sencilla de usar.
  4. Para algunas Logics verá el desplegable Choose your platform. Seleccione 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, vaya a my.clerk.io > Data > Configuration.

Configuración de la extensión #

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

  1. Vaya a Stores > Configuration > Clerk > Configuration y elija la Store View correcta.
  2. Para cada sección de página, active y complete las plantillas/contenidos:
    • Product Settings: configure Enabled en Yes y asegúrese de que el campo de plantillas contiene sus IDs de Slider (separados por comas, sin “@”).
    • Category Settings: configure Enabled en Yes y agregue sus IDs de Slider.
    • Cart Settings: configure Enabled en Yes y agregue su ID de Slider.
  3. Haga clic en Save Config.

Configuración en my.clerk.io #

  1. Vaya a Recommendations > Elements.
  2. Seleccione el slider que desea insertar.
  3. Abra la pestaña Insert into website.
  4. Elija una de las siguientes opciones:
    • Usar injection inserta el código utilizando un selector CSS.
    • Usar embedded code inserta el código manualmente.
  5. Para el embedded code en Magento 2, las ubicaciones típicas son:
    • Página de 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 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 configurado con el 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 del carrito.

Páginas #

A continuación se muestran las páginas específicas donde debe insertar Recommendations, y qué tipos debe utilizar, para seguir nuestras Mejores Prácticas.

Página de inicio #

  1. En my.clerk.io, cree 3 Elements con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserte los embedcodes en su plantilla/bloque de página de inicio.

Página de categoría #

  1. En my.clerk.io, cree un Element con la lógica Bestsellers In Category.
  2. En el desplegable Insert into website > Choose your platform, seleccione Magento 2, y copie el embedcode.
  3. Vaya a los archivos de tema de Magento 2 y localice el archivo que genera sus páginas de Categoría. Normalmente es vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Inserte el embedcode en algún lugar debajo del título y la descripción. Configure data-category con el ID de la categoría actual.

Página de producto #

  1. En my.clerk.io, cree 2 Elements con las siguientes lógicas:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. En el desplegable Insert into website > Choose your platform, seleccione Magento 2 para cada uno y copie los embedcodes.
  3. En los archivos de tema de Magento 2, localice el archivo que genera sus páginas de producto. Normalmente es vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Inserte los embedcodes en algún lugar debajo de la descripción del producto. Configure data-products con el ID del producto actual.

Paso de añadir al carrito #

  1. Si aún no lo ha hecho, cree el Element que desea utilizar en su Paso de Añadir al Carrito (Power Step).

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

  3. Configure Enabled en Yes.

  4. Elija la opción Popup o Page, y escriba los IDs de sus Elements, separados por comas.

  5. Haga clic en Save Config.

Para encontrar un Element ID, vaya a Recommendations > Elements en my.clerk.io y abra el Element. Use el ID que aparece en su configuración. Puede agregar de uno a cuatro Elements al paso de Añadir al Carrito.

Página de carrito #

  1. En my.clerk.io, cree un Element con la lógica Best Cross-Sell Products.
  2. En el desplegable Insert into website > Choose your platform, seleccione Magento 2, y copie el embedcode.
  3. Vaya a los archivos de tema de Magento 2 y localice el archivo que genera sus páginas de carrito. Normalmente es vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Inserte el embedcode en algún lugar debajo de los artículos del carrito y el botón de finalizar compra. Configure data-products con los IDs de productos del carrito.

Exit Intent #

  1. En my.clerk.io, cree un Element con la lógica Visitor Recommendations.
  2. Puede activarlo mediante la extensión o manualmente. A continuación se detallan 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. Cree uno nuevo de Website Element en my.clerk.io y nómbrelo “Exit Intent”

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

  3. En el backend de Magento2, vaya a Stores->Configuration->Configuration en el menú lateral y busque Exit-Intent Settings.

  4. Marque la casilla Enabled y asegúrese de que el campo Element contiene “exit-intent”.

  5. Haga clic en Save Config para activarlo.

Configuración Manual #

La configuración son 4 pasos:

  1. Cree uno nuevo de Website Element en my.clerk.io y nómbrelo “Exit Intent”

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

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

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

  4. Añada: data-exit-intent=“true” al embed code que acaba de colocar. Así:

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

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

Plantillas de inicio #

Si desea utilizar code designs, estas plantillas pueden ayudarle a empezar.

Código de slider #

Esta plantilla mostrará un slider estándar con información común de los productos que puede adaptar a sus 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.