Recommendations

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 empezar al usar una configuración de Clerk.js en SmartWeb.

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

Configuración del Slider #

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 #

Por defecto, Recommendations se muestra como un slider. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar el Editor de Design para configurarlo visualmente, o usar designs en código.

Un Design puede ser reutilizado para cualquier número de elementos de Recommendations que crees.

Editor de Design #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Product Slider
3. Desde la lista de plantillas de design, elige la que quieras usar como punto de partida.
4. Asígnale un nombre y haz clic en Create design.
5. Realiza cualquier cambio que desees en el Design.

Design en código #

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 Design en código desde cero utilizando Liquid code.

Crear Element #

Esto contiene todos los ajustes utilizados para mostrar las Recommendations y hace que puedan ser incrustadas en tu sitio web. Sigue estos pasos por 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 función de la página y la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que quieres usar en el desplegable. Puedes ver una visión general de todas las lógicas de producto aquí.
5. En Design selecciona el Design que creaste en el desplegable y elige el número de productos que quieres mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Añadir al Sitio Web #

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

Páginas #

A continuación, se muestran 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. En el Admin de SmartWeb, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Busca el archivo index.tpl.

4. Dado que este archivo genera todas las páginas de la tienda, incluyendo la página principal, busca una sentencia IF que identifique la portada. Busca alguna de estas opciones:

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

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

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

3. Busca el archivo que genera la página de producto. En 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 SmartWeb, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Busca el archivo que genera tus páginas de Categoría. En 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 (generalmente 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 de search, ya que ambas usan el mismo archivo de plantilla.

Página de carrito #

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

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

3. Busca el archivo que genera la página de carrito. En 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 SmartWeb, ve a Online Store > Design > Aktive designs > Rediger filer.

3. Busca 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 añadir esto, el popup de Exit Intent se mostrará cuando un cliente mueva el cursor sobre la barra de direcciones de su navegador.

Paso Add-To-Basket #

El paso Add-To-Basket es una función compleja en SmartWeb. Recomendamos contactar a un desarrollador de SmartWeb para integrarlo, o bien omitir este paso si no tienes recursos de desarrollo disponibles.

1. Crea una nueva página CMS en SmartWeb.
2. Añade los embedcodes a la página CMS.

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

3. Añade una regla de redirección a esta página cada vez que se añada un producto al carrito.