Recommendations

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

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

Siguiendo los pasos en my.clerk.io > Settings > Setup Guides se crearán 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 usar code designs.

Un design se puede reutilizar 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, selecciona la que quieres usar como base.
4. Ponle un nombre y haz clic en Create design.
5. Realiza cualquier cambio 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. Ponle un nombre y haz clic en Create design.
4. Crea un code design desde cero usando Liquid code.

Crear Element #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations y hace que pueda ser incrustado 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 la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que quieras usar en el menú desplegable. Puedes ver una visión general de todas las product logics aquí.
5. En Design selecciona el design que creaste desde el menú desplegable y escoge 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 embedded code te permite insertar el código manualmente en tu sitio web.
3. Elige la opción que sea más fácil para ti.

Páginas #

A continuación se indican las páginas específicas donde debes insertar Recommendations y qué tipos debes usar para seguir 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 Admin de DanDomain, 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 online incluyendo la homepage, busca una declaración IF que identifique la página principal. Busca alguna de estas opciones:

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

5. Copia los embedcodes dentro de esta declaración IF. Así aseguras que los banners solo aparecen 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 Admin de DanDomain, ve a Kontrolpanel > Design Manager > Rediger filer.

3. Busca el archivo que genera la página de producto. En los temas estándar, este 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 Admin de DanDomain, 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, este 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). Después haz clic en Gem.

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

La declaración IF asegura que el banner solo aparezca en 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 Admin de DanDomain, 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, este 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 DanDomain, 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 pase el cursor sobre la barra de direcciones de su navegador.

Add-To-Basket Step #

El Add-To-Basket Step es una función compleja en DanDomain. Recomendamos que un desarrollador de DanDomain lo integre o que omitas este paso si no cuentas con recursos de desarrollo disponibles.

1. Crea una nueva página CMS en DanDomain.
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 un producto se añada al carrito.