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 a utilizar una Clerk.js setup 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 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 #

Por defecto, Recommendations se muestra como un slider. Esto permite a los clientes ver más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o utilizar code designs.

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

Puedes usar la Setup Guide en Recommendations - Create a design for your recommendations elements para crear rápidamente un Design que tenga la misma gama de colores 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, en Recommendations - Designs, luego haz clic en el botón de editar.

Crear Content #

Este contiene todos los ajustes utilizados 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 Content.
3. Asigna un nombre descriptivo. Recomendamos nombrarlo en función de la página y la lógica que quieras usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Content type, selecciona la lógica de producto que desees utilizar en el menú desplegable. Puedes ver un resumen de todas las lógicas de producto aquí.
5. En Design selecciona el design que creaste en el menú desplegable y elige el número 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 instalar recomendaciones y qué tipos usar, para aplicar nuestras 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é las recomendaciones son importantes en la página.
• Qué tipos de recomendaciones usar.
• Dónde deben colocarse en la página.

Haz clic para cada tipo de Recommendations que desees utilizar y sigue los pasos.

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

Añadir a la página web #

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

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

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

2. Añade 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 a VTEX Site Editor, y en el menú del lado derecho se mostrará 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. Por ejemplo: clerk-product-page-alternatives
   • Template Name: inserta el ID proporcionado por Clerk en el Content creado previamente.
   • Product Logic: iguala la lógica de recomendación a la especificada en el Content previamente creado en Clerk. Las lógicas de producto disponibles son:

Páginas #

A continuación, se indican las páginas específicas donde deberías 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. 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 correspondientes.

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 Category Page.
3. Configura el bloque con el Template Name y selecciona la Product Logic que coincida con tu Content.

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 Product Page.
3. Configura cada bloque con el Template Name y Product Logic correspondientes.

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. Añade el bloque clerkio_recommendations a tu paso/página de add-to-basket.
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 Cart Page.
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 con exit intent.

Plantillas de inicio #

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

Slider Code #

Esta plantilla mostrará un slider estándar con varias informaciones de producto, que puedes adaptar a tus necesidades.