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 cuando uses una Clerk.js setup en SmartWeb.

Para ver 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, 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 #

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

Un design puede reutilizarse para cualquier cantidad de elementos 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, elige con la que deseas empezar.
4. Ponle un nombre y haz clic en Create design.
5. Haz los cambios que desees al design.

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.

Crear Element #

Esto contiene todos los ajustes utilizados 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 nombrar según la página y lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
5. En Design selecciona el design que has creado del menú desplegable y elige cuántos productos 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 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, las páginas específicas donde deberías insertar Recommendations y qué tipos usar, para cumplir con nuestras Mejores Prácticas.

Homepage #

1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. En el Administrador 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 homepage, busca una sentencia IF que identifique la front page. Busca alguno de estos:

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

5. Copia los embedcodes dentro de esta sentencia IF. Así aseguras que los banners solo aparezcan en la homepage.

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

6. Haz clic en Gem para guardar.

Product Page #

1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:

   • Best Alternative Products
   • Best Cross-Sell Products

2. En el Administrador de SmartWeb, ve a Kontrolpanel > Design Manager > Rediger filer.

3. Busca 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>

Category Page #

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

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

3. Busca 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, bajo el título y 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 aparezca en las páginas de categoría y no en la página de Search, ya que ambas usan el mismo archivo de plantilla.

Cart Page #

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

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

3. Busca 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 Administrador 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>

Luego de añadir esto, el popup de Exit Intent se mostrará cuando un cliente desplace el ratón sobre la barra de direcciones de su navegador.

Add-To-Basket Step #

El Add-To-Basket Step es una característica compleja en SmartWeb. Se recomienda que un desarrollador de SmartWeb lo integre, o saltar 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 agregue un producto al carrito.