Recommendations

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

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

Configuración del Slider #

Recommendations se crean con Sliders que hacen referencia a un Diseño. A continuación se muestra la guía básica para configurar un Slider.

Si sigues los pasos en my.clerk.io > Settings > Setup Guides se crearán automáticamente los Sliders para nuestras Mejores Prácticas.

Crear Diseño #

Recommendations se muestran como un slider de forma predeterminada. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.

Un diseño puede reutilizarse en cualquier cantidad de sliders de Recommendations que crees.

Editor de Diseño #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Product Slider
3. Selecciona una plantilla, asígnale un nombre y haz clic en Create design.
4. Ajusta el diseño según sea necesario.

Diseño de Código #

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 tu diseño usando código Liquid.

Si deseas un diseño inicial, revisa la plantilla de Slider más abajo.

Crear Contenido #

Aquí se encuentran todas las configuraciones utilizadas para mostrar las Recommendations y para que se puedan incrustar en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras crear.

1. Ve a Recommendations > Sliders.
2. Haz clic en New Content.
3. Ponle un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que quieres usar. Ejemplo: “Home Page / Visitor Recommendations”.
4. En Content type, selecciona la lógica de producto que deseas usar del menú desplegable. Puedes ver una visión general de todas las lógicas de producto aquí.
5. En Design selecciona el diseño que creaste del menú y elige la cantidad de productos que quieres mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Añadir al Sitio Web #

Para añadir Clerk Recommendations en tu sitio web, tienes dos opciones: Inyección y Código incrustado.

1. Abre la pestaña Insert into website.
2. Aquí tienes dos opciones:
   • Usar inyección te permite insertar el código utilizando un selector CSS.
   • Usar código incrustado te permite insertar el código manualmente en tu sitio web.
3. Elige la opción que sea más fácil para ti.
4. Para algunas Logics verás el menú desplegable Choose your platform. Selecciona DanDomain Classic en estos casos. Esto rellenará automáticamente el embedcode con los shortcodes correctos de DanDomain Classic.

Para añadir detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Sigue los pasos a continuación en el backend de DanDomain Classic para insertar tus sliders.

Páginas #

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

Página principal #

1. En my.clerk.io, crea 3 Sliders con las siguientes lógicas:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. En DanDomain Classic, ve a Design > Egne Sider.
3. Bajo Forside, encuentra la página que muestra tu página principal (a menudo el nombre de tu tema + “Forside”).
4. Haz clic en Kilde para ver el HTML.
5. Inserta el código incrustado donde desees el slider y haz clic en Gem.

<span class="clerk" data-template="@SLIDER_ID"></span>

Página de Categoría #

1. En my.clerk.io, crea un Slider con la lógica Bestsellers In Category.
2. En el menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic y copia el embedcode.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Vareliste, encuentra la página de las páginas de categoría (normalmente el nombre de tu tema + “Produktliste”).
5. Haz clic en Kilde.
6. Inserta el código incrustado donde quieras el slider y haz clic en Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-category="CATEGORY_ID">
</span>

Página de Producto #

1. En my.clerk.io, crea 2 Sliders con las siguientes lógicas:
   • Best Alternative Products
   • Best Cross-Sell Products
2. En el menú desplegable Insert into website > Choose your platform selecciona DanDomain Classic para cada uno de ellos y copia los embedcodes.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Produktkort, encuentra la página de producto (normalmente el nombre de tu tema + “Produktkort”).
5. Haz clic en Kilde.
6. Inserta el código incrustado donde desees el slider y haz clic en Gem.

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

Paso de Añadir al Carrito #

1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
2. Ponle el nombre “Add-To-Basket / Others Also Bought”. Esto es importante para que el embedcode funcione correctamente.
3. Haz clic en Save en la parte superior de la página.
4. En la app de Clerk.io para DanDomain Classic, habilita Powerstep.
5. Añade los IDs de los sliders que deseas mostrar, separados por comas.
6. Haz clic en Save.

Página de Carrito #

1. En my.clerk.io, crea un Slider con la lógica Best Cross-Sell Products.
2. En el menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic y copia el embedcode.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Kurv, encuentra la página de carrito (normalmente “Kurv” o “Lille Kurv”).
5. Haz clic en Kilde.
6. Inserta el código incrustado donde quieras el slider y haz clic en Gem.

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

Exit Intent #

1. En my.clerk.io, crea un Slider con la lógica Visitor Recommendations.
2. En la app de Clerk.io para DanDomain Classic, busca Exit Intent.
3. Marca Enabled y haz clic en Gem.

Página de Blog #

1. Copia el código incrustado en la página de contenido donde deseas mostrarlo.
2. Reemplaza INSER_PAGE_HERE por el ID de la página para la que deseas mostrar productos.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-page="INSER_PAGE_HERE">
</span>

Plantillas iniciales #

Si deseas utilizar diseños de código, estas plantillas te pueden ayudar a empezar.

Código del Slider #

Esta plantilla renderizará un slider estándar con información común del producto que puedes adaptar a tus necesidades.