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 productos, lo que te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar a usar una Clerk.js setup en Magento 1.

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 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 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 utilizar code designs.

Un design puede reutilizarse 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 design, elige la que quieras para empezar.
  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 quieres un design inicial, revisa la Slider template más abajo.

Crear Element #

Esto contiene todos los ajustes usados para mostrar las Recommendations y hacerlas insertables en tu web. Sigue estos pasos para cada banner de Recommendations que desees crear.

  1. Ve a Recommendations > Elements.
  2. Haz clic en New Element.
  3. Asígnale un nombre descriptivo. Recomendamos nombrarlo en base a la página y la lógica que quieras utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver una descripción general de todas las product logics aquí.
  5. En Design selecciona el design que creaste en el menú 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 #

Para añadir 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:
    • Utilizando injection puedes insertar el código usando un selector CSS.
    • Utilizando embedded code puedes insertar el código manualmente en tu web.
  3. Elige la opción que sea más fácil para ti.
  4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona Magento 1 en estos casos. Esto completará automáticamente el embedcode con los shortcodes correctos para Magento 1.

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

Configuración de la 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 el Store View correcto.
  2. Para cada sección de página, habilita y rellena los templates/contenidos:
    • Product Page Settings: ajusta Enable a Yes y asegúrate de que el campo de templates contenga tus Slider IDs (separados por coma, sin “@”).
    • Category Page Settings: ajusta Enable a Yes y agrega tus Slider IDs.
    • Cart Settings: ajusta Enable a Yes y agrega tu Slider ID.
  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:

    • Usando injection se inserta el código con un selector CSS.
    • Usando embedded code se inserta el código manualmente.

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

    • Página de inicio: CMS > Pages > Home page en el bloque de Contenido.
    • Página de producto: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml con data-products configurado como <?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 configurado como <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Carrito: en tu plantilla de carrito, configura data-products con los IDs actuales de productos 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 detallan las páginas específicas donde deberías insertar Recommendations y qué tipos deberías usar, para seguir nuestras Mejores Prácticas.

Página de inicio #

  1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Inserta los embedcodes en tu plantilla o bloque de 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 de tema de Magento 1 y encuentra 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. Establece data-category como <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.

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 menú desplegable Insert into website > Choose your platform selecciona Magento 1 para cada uno y copia los embedcodes.
  3. En los archivos de tema de Magento 1, localiza 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. Establece data-products como <?php echo Mage::registry('current_product')->getId(); ?>.

Paso de Añadir al carrito #

  1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
  2. Asígnale 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 el Powerstep de add-to-basket usando la extensión de Magento:
    1. Ve a System > Configuration > Clerk.
    2. Bajo Power step settings, añade tus Element IDs (separados por coma) en Templates.
    3. Ajusta Enable a 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 de tema de Magento 1 y encuentra el archivo que genera tus páginas de carrito.
  4. Inserta el embedcode debajo de los artículos del carrito y el botón de checkout. Establece data-products como los IDs actuales 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 los pasos para ambas opciones.

Configuración de la extensión #

Usando la extensión:

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

Configuración manual #

Empotramiento manual (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 usar code designs, estas plantillas pueden ayudarte a comenzar.

Código para Slider #

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