Recommendations

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

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

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.

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 a los clientes ver más productos con menos clics. Puedes usar el Editor de Designs para configurarlo visualmente, o usar 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. Elige una plantilla, nómbrala y luego haz clic en Create design.
4. Ajusta el design según sea necesario.

Diseño por Código #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Other designs > Blank > Code.
3. Asígnale un nombre y luego haz clic en Create design.
4. Crea tu design usando Liquid code.

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

Crear Element #

Esto contiene todas las configuraciones utilizadas para mostrar las Recommendations, y hacerlas insertables 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. Asígnale un nombre descriptivo. Te recomendamos nombrarlo según la página y la lógica que desees usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas usar en el menú 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 menú 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: Injection y Embedded code.

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 sea más fácil de usar.
4. Para algunas Lógicas verás el menú desplegable Choose your platform. En estos casos, selecciona DanDomain Classic. Esto completará automáticamente el embedcode con los shortcodes correctos de DanDomain Classic.

Para agregar 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 encontrarás las páginas específicas donde debes insertar Recommendations, y qué tipos deberías usar, para seguir nuestras Mejores Prácticas.

Página de Inicio #

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 página de inicio (a menudo el nombre de tu tema + “Forside”).
4. Haz clic en Kilde para ver el HTML.
5. Inserta el código de inserción donde desees 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 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 para las páginas de categoría (a menudo el nombre de tu tema + “Produktliste”).
5. Haz clic en Kilde.
6. Inserta el código de inserción donde desees 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 menú desplegable Insert into website > Choose your platform, selecciona DanDomain Classic para cada uno de ellos y copia los códigos de inserción.
3. En DanDomain Classic, ve a Design > Egne Sider.
4. Bajo Produktkort, encuentra la página para las páginas de producto (a menudo el nombre de tu tema + “Produktkort”).
5. Haz clic en Kilde.
6. Inserta el código de inserción donde desees el slider y luego haz clic en Gem.

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

Paso “Añadir a la Cesta” #

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 Clerk.io DanDomain Classic, habilita Powerstep.
5. Agrega los IDs de los elementos que deseas mostrar, separados por comas.
6. Haz clic en Save.

Página del Carrito #

1. En my.clerk.io, crea un Element 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 (a menudo “Kurv” o “Lille Kurv”).
5. Haz clic en Kilde.
6. Inserta el código de inserción donde desees 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 Clerk.io DanDomain Classic, encuentra Exit Intent.
3. Marca Enabled y haz clic en Gem.

Página de Blog #

1. Copia el código de inserción en la página de contenido donde deseas que se muestre.
2. Reemplaza INSER_PAGE_HERE con 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 usar diseños por código, estas plantillas pueden ayudarte a comenzar.

Código del Slider #

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