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 cuando utilizas una configuración de Clerk.js en VTEX.

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

Seguir los pasos en my.clerk.io > Settings > Setup Guides creará 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 Editor de Design para configurarlo visualmente o usar code designs.

Un Design puede reutilizarse para cualquier cantidad de elementos de Recommendations que crees.

Puedes utilizar la Guía de configuración bajo Recommendations - Create a design for your recommendations elements para crear rápidamente un Design que tenga el mismo esquema de colores y estilo que tu tienda online.

Haz clic en Publicar cuando estés satisfecho con el estilo.

Puedes cambiar esto fácilmente más adelante, en Recommendations - Designs, luego haz clic en el botón de editar.

Crear Element #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations y hacerlo embebible 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. Asigna un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que deseas usar. Ej., “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas usar en el desplegable. Puedes ver un resumen 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 quieres mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Con la Guía de Configuración, puedes ver en qué páginas instalar Recommendations y qué tipos usar para ejecutar nuestra Best Practice. Cada paso de la Guía de Configuración se enfoca en una página específica de la tienda y contiene información sobre:

• Por qué son importantes las recommendations en la página.
• Qué tipos de recommendations usar.
• En qué lugar de la página deben colocarse.

Haz clic para cada tipo de Recommendations que quieras usar y sigue los pasos.

Por favor, ten en cuenta: al solo hacer clic en cada bloque de Recommendations se pondrán verdes como si estuvieran instalados - no lo están - aún necesitas hacer clic y seguir los pasos.

Añadir al sitio web #

Para añadir Clerk Recommendations a tu sitio web, necesitas configurar la integración de VTEX.

1. En el tema de tu tienda, añade clerkiopartnerdk.integration-vtex 1.x como dependencia par en el archivo manifest.json:

"peerDependencies": {
"clerkiopartnerdk.integration-vtex": "1.x"
}

2. Añade el bloque clerkio_recommendations en cualquier lugar de tu tienda. Ejemplo: en home.json

{
  "store.home": {
    "blocks": [
      "responsive-layout.desktop#homepage",
      "responsive-layout.mobile#homepage"
    ]
  },
  "responsive-layout.desktop#homepage": {
    "children": ["clerkio_recommendations"]
  }
}

3. Ve al VTEX Site Editor, y en el menú lateral derecho aparecerá un bloque ClerkIO. Haz clic en él.

4. Rellena la información requerida en el bloque:

   • Block Class Name: inserta un identificador único para el bloque dentro de la página donde se utiliza. Ej. clerk-product-page-alternatives
   • Template Name: introduce el ID proporcionado por Clerk en el Element creado anteriormente.
   • Product Logic: elige la misma lógica de Recommendation que el Element que creaste en Clerk.io. Revisa las lógicas de productos para ver las opciones disponibles.

Páginas #

A continuación se muestran las páginas específicas donde debes insertar Recommendations, y qué tipos deberías 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. Añade el bloque clerkio_recommendations al layout de tu homepage en VTEX Site Editor.
3. Configura cada bloque con el Template Name y Product Logic correspondiente.

Category Page #

1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
2. Añade el bloque clerkio_recommendations al layout de tu página de categoría.
3. Configura el bloque con el Template Name y asigna Product Logic para que coincida con tu Element.

Product Page #

1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Añade el bloque clerkio_recommendations al layout de tu página de producto.
3. Configura cada bloque con el Template Name y Product Logic correspondiente.

Add-To-Basket Step #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
2. Asígale 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. Añade el bloque clerkio_recommendations a tu paso/página de añadir al carrito.
5. Configura el bloque con el Template Name y Product Logic.

Cart Page #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
2. Añade el bloque clerkio_recommendations al layout de tu página de carrito.
3. Configura el bloque con el Template Name y Product Logic.

Exit Intent #

1. En my.clerk.io, crea un Element con la lógica Visitor Recommendations.
2. Añade el bloque clerkio_recommendations a tu layout global.
3. Configura el bloque con el Template Name y Product Logic, y configúralo para que se active por exit intent.

Templates para comenzar #

Si deseas usar code designs, estos templates pueden ayudarte a empezar.

Slider Code #

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