Recommendations

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

Para ver nuestras Mejores Prácticas completas, lea 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 muestran como un slider. Esto permite que los clientes vean más productos con menos clics. Puede usar el Editor de Designs para configurarlo visualmente, o usar diseños de código.

Un design se puede reutilizar para cualquier cantidad de elementos de Recommendations que cree.

Editor de Designs #

1. Vaya a Recommendations > Designs y haga clic en New Design.
2. Elija Product Slider
3. De la lista de plantillas de diseño, seleccione la que desee para comenzar.
4. Asígnele un nombre y haga clic en Create design.
5. Realice los cambios que desee en el design.

Diseño de Código #

1. Vaya a Recommendations > Designs y haga clic en New Design.
2. Elija Other designs > Blank > Code.
3. Asígnele un nombre y haga clic en Create design.
4. Cree un diseño de código desde cero usando código Liquid.

Crear Element #

Esto contiene todos los ajustes utilizados para mostrar las Recommendations y hacerlo insertable en su sitio web. Siga estos pasos para cada banner de Recommendations que quiera crear.

1. Vaya a Recommendations > Elements.
2. Haga clic en New Element.
3. Asígnele un nombre descriptivo. Le recomendamos nombrarlo según la página y lógica que desea utilizar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, seleccione la lógica de producto que quiere usar del menú desplegable. Puede ver una descripción general de todas las lógicas de producto aquí.
5. En Design seleccione el design que creó desde el menú desplegable y elija el número de productos que desea mostrar.
6. Haga clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

1. Abra la pestaña Insert into website.
2. Aquí tiene dos opciones:
   • Usar injection le permite insertar el código mediante un selector CSS.
   • Usar embedded code le permite insertar el código manualmente en su sitio web.
3. Elija la opción que le resulte más conveniente.

Páginas #

A continuación se muestran las páginas específicas en las que debe insertar Recommendations y qué tipos debe usar, para seguir nuestras Mejores Prácticas.

Página de inicio #

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

   • Visitor Recommendations
   • Bestsellers
   • Hot Products

2. En el administrador de DanDomain, vaya a Online Store > Design > Aktive designs > Rediger filer.

3. Busque el archivo index.tpl.

4. Como este archivo genera todas las páginas de la tienda online incluyendo la página de inicio, busque una sentencia IF que identifique la portada. Busque:

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

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

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

6. Haga clic en Gem para guardar.

Página de producto #

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

   • Best Alternative Products
   • Best Cross-Sell Products

2. En el administrador de DanDomain, vaya a Kontrolpanel > Design Manager > Rediger filer.

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

4. Copie los embedcodes al final de este archivo y haga 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, cree un Element con la lógica Bestsellers In Category.

2. En el administrador de DanDomain, vaya a Online Store > Design > Aktive designs > Rediger filer.

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

4. Copie el embedcode en el archivo, en algún lugar debajo del título y la descripción (normalmente alrededor de la línea 92). Después haga 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 páginas de categoría y no en la página de Search, ya que ambas usan el mismo archivo de plantilla.

Página del carrito #

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

2. En el administrador de DanDomain, vaya a Online Store > Design > Aktive designs > Rediger filer.

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

4. Inserte el código al final del archivo y haga 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, cree un Element con la lógica Visitor Recommendations.

2. En el administrador de DanDomain, vaya a Online Store > Design > Aktive designs > Rediger filer.

3. Busque partials > body.tpl.

4. Copie el embedcode al final del archivo y haga 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 aparecerá cuando un cliente mueva su mouse sobre la barra de direcciones de su navegador.

Paso de Add-To-Basket #

El paso de Add-To-Basket es una función compleja en DanDomain. Recomendamos que un desarrollador de DanDomain la integre, o salte este paso si no tiene recursos de desarrollo disponibles.

1. Cree una nueva página CMS en DanDomain.
2. Agregue los embedcodes a la página CMS.

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

3. Añada una regla de redireccionamiento a esta página cada vez que se agregue un producto al carrito.