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 cuando usas 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 Elements que hacen referencia a un Design. A continuación, se presenta la guía básica para configurar un Element.

Al seguir 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 de forma predeterminada. Esto permite que los clientes vean más productos con menos clics. Puedes configurar el slider visualmente usando el Editor de Design o puedes utilizar code designs.

Un Design puede reutilizarse para cualquier cantidad 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. Escoge una plantilla, asígnale un nombre y haz clic en Create design.
4. Ajusta el design según sea necesario.

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 tu design usando código Liquid.

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

Crear Element #

Esto contiene todas las configuraciones utilizadas para mostrar Recommendations y para que sea insertable en tu sitio web. Sigue estos pasos para 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 según la página y la lógica que deseas usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas usar del desplegable. Puedes ver una descripción general de todas las lógicas de productos aquí.
5. En Design selecciona el design que creaste en el desplegable y elige la cantidad de productos que deseas mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Agregar al Sitio Web #

Para agregar Clerk Recommendations en tu sitio web, tienes dos opciones: Inyección y Código embebido.

1. Abre la pestaña Insert into website.
2. Aquí tienes dos opciones:
   • Usar la inyección te permite insertar el código mediante un selector CSS.
   • Usar el código embebido 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 Lógicas verás el desplegable Choose your platform. Selecciona DanDomain Classic en estos casos. Así se rellenará previamente 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 abajo en el backend de DanDomain Classic para insertar tus sliders.

Páginas #

A continuación se detallan las páginas específicas donde debes insertar Recommendations y qué tipos debes utilizar 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 DanDomain Classic, ve a Design > Egne Sider.
3. Bajo Forside, encuentra la página que muestra tu homepage (a menudo el nombre de tu tema + “Forside”).
4. Haz clic en Kilde para ver el HTML.
5. Inserta el código embebido donde quieres el slider y luego haz clic en Gem.

<span class="clerk" data-template="@SLIDER_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 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 para las páginas de categorías (a menudo el nombre de tu tema + “Produktliste”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, y luego 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 Elements con las siguientes lógicas:
   • Best Alternative Products
   • Best Cross-Sell Products
2. En el 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 para las páginas de productos (a menudo el nombre de tu tema + “Produktkort”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, y luego 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 Element con la lógica Best Cross-Sell Products.
2. Asígnale 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 DanDomain Classic, habilita Powerstep.
5. Añade los IDs de los elementos que deseas mostrar, separados por comas.
6. Haz clic en Save.

Página de Carrito #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
2. En el 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 (a menudo “Kurv” o “Lille Kurv”).
5. Haz clic en Kilde.
6. Inserta el embed code donde quieras el slider, y luego 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 Element con la lógica Visitor Recommendations.
2. En la app de Clerk.io DanDomain Classic, busca Exit Intent.
3. Marca Enabled y haz clic en Gem.

Página del Blog #

1. Copia el embed code en la página de contenido donde quieras que aparezca.
2. Sustituye INSER_PAGE_HERE por el ID de la página para la que quieres mostrar productos.

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

Plantillas Iniciales #

Si deseas usar code designs, estas plantillas pueden ayudarte a empezar.

Slider Code #

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