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 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 usar.

Configuración del Slider #

Recommendations se crean con Elements que hacen referencia a un Design. A continuación se encuentra la guía básica para configurar un Element.

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

Crear Design #

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 utilizar code designs.

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

Puedes utilizar la Setup Guide bajo Recommendations - Create a design for your recommendations elements para crear rápidamente un Design que tenga el mismo esquema de color y estilo que tu tienda online.

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

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

Crear Element #

Esto contiene todos los ajustes utilizados para mostrar Recommendations y hace que se puedan insertar 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. Dale 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 menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
5. En Design selecciona el design que creaste del menú desplegable y elige la cantidad de productos que deseas mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Con la Setup Guide, puedes ver en qué páginas debes instalar recomendaciones y qué tipos usar para aplicar nuestra Best Practice. Cada paso de la Setup Guide se centra en una página específica de la tienda y contiene información sobre:

• Por qué son importantes las recomendaciones en esa página.
• Qué tipos de recomendaciones usar.
• Dónde en la página deben ubicarse.

Haz clic en cada tipo de recomendaciones que quieras usar y sigue los pasos.

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

Agregar al sitio web #

Para agregar Recommendations de Clerk en tu sitio web, debes configurar la integración con VTEX.

1. En el tema de tu tienda, agrega clerkiopartnerdk.integration-vtex 1.x como theme peerDependency en el archivo manifest.json:

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

2. Agrega el bloque clerkio_recommendations en cualquier parte 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ú de la derecha, se mostrará un bloque ClerkIO. Haz clic en él.

4. Completa la información requerida en el bloque:
   • Block Class Name: inserta un identificador único para el bloque dentro de la página donde se usa. Ejemplo: clerk-product-page-alternatives
   • Template Name: inserta el ID proporcionado por Clerk en el Element creado previamente.
   • Product Logic: iguala la lógica de recomendaciones con la especificada en el Element creado previamente en Clerk. Las lógicas de producto disponibles son:

Páginas #

A continuación se indican las páginas específicas donde debes insertar Recommendations, y qué tipos usar, 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. Agrega el bloque clerkio_recommendations al layout de la página principal 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. Agrega el bloque clerkio_recommendations al layout de tu página de categoría.
3. Configura el bloque con el Template Name y selecciona 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. Agrega el bloque clerkio_recommendations al layout de la 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í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. Agrega el bloque clerkio_recommendations al paso/página de agregar 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. Agrega 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. Agrega el bloque clerkio_recommendations a tu layout global.
3. Configura el bloque con el Template Name y Product Logic, y configúralo para activarse en el exit intent.

Templates de inicio #

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

Código del Slider #

Este template mostrará un slider estándar con diversos datos de producto, que puedes adaptar a tus necesidades.