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 hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar al utilizar una Clerk.js setup en Magento 1.

Para consultar nuestras Prácticas recomendadas 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, tienes la guía básica para configurar un Element.

Al seguir los pasos en my.clerk.io > Settings > Setup Guides se crearán automáticamente los Elements para nuestras Best Practices.

Crear un Design #

Las Recommendations se muestran como un slider por defecto. Esto permite que los clientes vean más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente o emplear code designs.

Un Design se puede reutilizar para cualquier cantidad de Elements 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, selecciona la que desees usar como punto de partida.
  4. Ponle un nombre y haz clic en Create design.
  5. Realiza cualquier cambio que desees en el diseño.

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 diseño inicial, revisa la Slider template más abajo.

Crear un Element #

Este contiene todas las configuraciones usadas para mostrar las Recommendations y hacerlo integrable 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 Element.
  3. Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y lógica que desees usar. Por ejemplo, “Home Page / Visitor Recommendations”.
  4. En Element type, selecciona la lógica de producto que desees usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
  5. En Design selecciona el diseño que creaste en el menú y elige el número de productos que deseas 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 mediante un selector CSS.
    • Usando embedded code te permite insertar el código manualmente en tu sitio web.
  3. Elige la opción que te resulte más sencilla de usar.
  4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona Magento 1 en estos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de Magento 1.

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 para habilitar sliders en las páginas clave:

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

  3. Abre la pestaña Insert into website.

  4. Elige una de las siguientes:

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

  5. Para el embedded code en Magento 1, las ubicaciones habituales son:

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

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 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 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. Configura data-category con <?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 del tema de Magento 1, encuentra 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. Configura data-products con <?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. 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 el add-to-basket Powerstep usando la extensión de Magento:
    1. Ve a System > Configuration > Clerk.
    2. En Power step settings, agrega tus IDs de Element (separados por coma) en Templates.
    3. Pon 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 encuentra el archivo que genera tus páginas de carrito.
  4. Inserta el embedcode en algún lugar debajo de los artículos y el botón de checkout. Configura data-products con los IDs de productos actuales 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. Abajo están 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 correcta.
  2. En Exit-Intent Settings, pon Enable en Yes y asegúrate de que el campo Element/Templates contenga tus IDs de Element (por ejemplo, exit-intent).
  3. Haz clic en Save Config.

Configuración manual #

Embed manual (versiones antiguas de la extensión): agrega lo siguiente a 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 del Slider #

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