Recommendations

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar a usar una Clerk.js setup en ScanNet.

Para ver 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.

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 de forma predeterminada. 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 se puede reutilizar para cualquier número de elementos Recommendations que crees.

Design Editor #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Product Slider
3. En la lista de plantillas de diseño, elige la que deseas usar como punto de partida.
4. Asigna 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. Asigna un nombre y haz clic en Create design.
4. Crea un code design desde cero utilizando Liquid code.

Crear Element #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations, y hace que sean insertables 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. Asigna un nombre descriptivo. Recomendamos nombrarlo en función de la página y la lógica que deseas usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas utilizar del desplegable. Puedes ver una descripción general de todas las product logics aquí.
5. En Design selecciona el design que creaste del menú desplegable 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 #

1. Abre la pestaña Insert into website.
2. Aquí tienes dos opciones:
   • Usar injection te permite insertar el código utilizando un selector CSS.
   • Usar embedded code te permite insertar el código manualmente en tu sitio web.
3. Elige la opción que te resulte más fácil de usar.

Páginas #

A continuación se muestran las páginas específicas donde debes insertar las Recommendations, y qué tipos debes 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. En el Admin de ScanNet, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Encuentra el archivo index.tpl.

4. Ya que este archivo genera todas las páginas de la tienda online incluyendo la página de inicio, busca una sentencia IF que identifique la página principal. Busca cualquiera de estas opciones:

   • {$general.isShop and $page.isFrontPage}
   • {if $page.isFrontPage}

5. Copia los embedcodes dentro de esta sentencia IF. Esto garantiza que los banners solo aparezcan en la página de inicio.

<span class="clerk"
    data-template="@home-page-visitor-recommendations">
</span>

6. Haz clic en Gem para guardar.

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 Admin de ScanNet, ve a Kontrolpanel > Design Manager > Rediger filer.

3. Encuentra el archivo que genera la página de producto. En los temas estándar, es modules > product > product-entity.tpl.

4. Copia los embedcodes al final de este archivo y haz clic en Gem.

<span class="clerk"
   data-template="@product-page-alternatives"
   data-products="[{$product->Id}]">
</span>

Página de categoría #

1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.

2. En el Admin de ScanNet, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Encuentra el archivo que genera tus páginas de Categoría. En los temas estándar, es modules > product > product-list.tpl.

4. Copia el embedcode en el archivo, en algún lugar debajo del título y la descripción (usualmente alrededor de la línea 92). Luego, haz clic en Gem.

{if $field == 'search'}
{else}
<span class="clerk"
    data-template="@category-page-bestsellers"
    data-category="{$item->Id}">
</span>
{/if}

La sentencia IF asegura que el banner solo se muestre en las páginas de categoría y no en la página Search, ya que ambas usan el mismo archivo de plantilla.

Página del carrito #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.

2. En el Admin de ScanNet, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Encuentra el archivo que genera la página del Carrito. En los temas estándar, es modules > cart > cart.tpl.

4. Inserta el código al final del archivo y haz clic en Gem.

{$cartProductidsString = ''} 
{$counter = 1} 
{foreach $cartList.CartProductLine as $cartProduct} 
{if $counter==1} 
{assign var="cartProductidsString" value="{$cartProduct->ProductId}"} 
{else} 
{assign var="cartProductidsString" value="{$cartProductidsString},{$cartProduct->ProductId}"} 
{/if}
{$counter = $counter + 1}
{/foreach}
<span class="clerk" 
    data-template="@cart-page-cross-sell" 
    data-products="[{$cartProductidsString}]">
</span>

Exit Intent #

1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.

2. En el Admin de ScanNet, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Encuentra partials > body.tpl.

4. Copia el embedcode al final del archivo y haz clic en Gem.

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

Después de agregar esto, el popup de Exit Intent se mostrará cuando un cliente pase el cursor del mouse sobre la barra de direcciones de su navegador.

Paso de agregar al carrito #

El Paso de Agregar al Carrito es una función compleja en ScanNet. Recomendamos que un desarrollador de ScanNet lo integre, o salta este paso si no tienes recursos de desarrollo disponibles.

1. Crea una nueva página CMS en ScanNet.
2. Agrega los embedcodes a la página CMS.

<span class="clerk"
    data-template="@powerstep-alternatives"
    data-products="[PRODUCT_ID]">
</span>

3. Agrega una regla de redirección a esta página cada vez que se agregue un producto al carrito.