Magento 1

Recommendations

Automatiza y personaliza productos en cualquier página en Magento 1.

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 comenzar cuando utilizas una configuración Clerk.js en Magento 1.

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

Configuración de 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.

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 slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar el Editor de Design para configurarlo de forma visual, o utilizar code designs.

Un design puede ser reutilizado para cualquier cantidad de elementos de Recommendations que crees.

Editor de Design #

  1. Ve a Recommendations > Designs y haz clic en New Design.
  2. Selecciona Product Slider
  3. De la lista de plantillas de design, elige la que deseas para empezar.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza cualquier cambio que quieras en el design.

Code Design #

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

Si quieres un diseño inicial, consulta la plantilla Slider más abajo.

Crear Contenido #

Esto contiene todos los ajustes utilizados para mostrar las Recommendations y hacer que se puedan insertar 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. Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que quieres usar. Por ejemplo, “Página de Inicio / Visitor Recommendations”.
  4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver una visió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 quieres mostrar.
  6. Haz clic en Save en la parte superior de la pantalla.

Agregar al Sitio Web #

Para agregar Clerk Recommendations en tu sitio web, tienes dos opciones: Injection y Embedded code.

  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 embedded code te permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que sea más sencilla para ti.
  4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona Magento 1 en estos casos. Esto autoprecompletará el embedcode con los shortcodes de Magento 1 correctos.

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

Configuración de Extensión #

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

  1. En Magento, ve a System > Configuration > Clerk settings y elige la vista de tienda correcta (Store View).
  2. Para cada sección de página, habilita y completa las plantillas/contenidos:
    • Product Page Settings: establece Enable en Yes y asegúrate de que el campo de plantillas contiene tus IDs de Slider (separados por coma, sin “@”).
    • Category Page Settings: establece Enable en Yes y añade tus IDs de Slider.
    • Cart Settings: establece Enable 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:

  5. Para embedded code en Magento 1, las ubicaciones típicas son:

    • Página de inicio: CMS > Pages > Home page bajo Content.
    • Página de producto: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml con data-products ajustado a <?php echo Mage::registry('current_product')->getId(); ?>.
    • Página de categoría: app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml con data-category ajustado a <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Página de carrito: en la plantilla de carrito, ajusta data-products a los IDs de productos actuales del carrito, por ejemplo:
    data-products="[<?php $i = 0; foreach(Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems() as $_item) { if ($i > 0) { echo ','; } echo $_item->getProductId(); $i++; } ?>]"

Páginas #

A continuación se muestran las páginas específicas donde deberías insertar Recommendations y qué tipos utilizar 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 1 y copia el embedcode.
  3. Ve a los archivos del tema de Magento 1 y busca el archivo que genera tus páginas de categoría. Normalmente es app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Inserta el embedcode en algún lugar debajo del título y la descripción. Ajusta data-category a <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.

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 1 para cada uno y copia los embedcodes.
  3. En los archivos del tema de Magento 1, busca el archivo que genera tus páginas de producto. Normalmente es app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Inserta los embedcodes en algún lugar debajo de la descripción del producto. Ajusta data-products a <?php echo Mage::registry('current_product')->getId(); ?>.

Paso de Agregar al Carrito #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Ponle 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. Para activar la funcionalidad add-to-basket Powerstep usando la extensión de Magento:
    1. Ve a System > Configuration > Clerk.
    2. Bajo Power step settings, agrega los IDs de tus Elements (separados por coma) en Templates.
    3. Establece Enable en Yes y haz clic en Save Config.

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 1 y copia el embedcode.
  3. Ve a los archivos del tema de Magento 1 y busca el archivo que genera tus páginas de carrito.
  4. Inserta el embedcode en algún lugar debajo de los ítems del carrito y el botón de pago. Ajusta data-products a los IDs actuales de los productos del carrito.

Exit Intent #

  1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
  2. Puedes activarlo a través de la extensión o de forma manual. A continuación se detallan los pasos para ambas opciones.

Configuración con Extensión #

Usando la extensión:

  1. Ve a System > Configuration > Clerk Settings y selecciona la Store View correspondiente.
  2. Bajo Exit-Intent Settings, establece Enable en Yes y asegúrate de que el campo Content/Templates contiene tu(s) ID(s) de Element (por ejemplo, exit-intent).
  3. Haz clic en Save Config.

Configuración Manual #

Inserción manual (para versiones antiguas de la extensión): añade lo siguiente en app/design/frontend/base/default/template/clerk/tracking.phtml:

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

Plantillas Iniciales #

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

Código de Slider #

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