El componente "connectif.product-recommendation" sirve para mostrar recomendaciones de productos enviadas desde Connectif en forma de carrusel en las integraciones con VTEX IO.
Para configurar este componente, necesitarás un experto con conocimientos en programación. Además, para que el eCommerce pueda recibir eventos de productos recomendados, deberás crear y configurar los workflows necesarios con el nodo “Compartir datos”.
Cómo se usa
El componente "connectif.product-recommendation" está diseñado para las integraciones con VTEX IO, utilizando componentes nativos de VTEX como Slider Layout y Product Summary para mostrar la información de producto y configurar los ajustes del carrousel.
Requisitos
Para poder usar el componente "connectif.product-recommendation" es necesario tener la dependencia de Connectif en el theme, añadiendo el siguiente fragmento de código en el manifest.json:
"peerDependencies": {
"connectif.connectif": "1.x"
},
Ejemplo
El componente tendrá este aspecto:
"connectif.product-recommendation": {
"props": {
"id": "product-recommendation-home"
},
"children": ["list-context.product-list-static#connectif-products"]
},
"list-context.product-list-static#connectif-products": {
"blocks": ["product-summary.shelf"], // VTEX Product Summary component
"children": ["slider-layout#connectif-products"] // VTEX Slider Layout component
},
"slider-layout#connectif-products": {
"props": {
"itemsPerPage": {
"desktop": 3,
"tablet": 3,
"phone": 1
},
"infinite": true,
"fullWidth": false,
"blockClass": "shelf"
}
},
Explicación del ejemplo:
- connectif.product-recommendation: recibe en las props un “id”, este id es el identificador que debes configurar en el nodo "Compartir datos”.
- list-context.product-list-static#connectif-products: envuelve el bloque product-summary.shelf y contiene el componente slider-layout#connectif-products.
- product-summary.shelf: es el componente nativo de VTEX para poder mostrar la información de producto.
- slider-layout#connectif-products son los ajustes personalizables del carrousel, que permite configurar cuántos productos mostrar en cada dispositivo.
¡Enhorabuena!
Has llegado al final de la lección.
¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Guía para integrar con VTEX IO, para aprender cómo integrar tu tienda VTEX IO con Connectif.
- Insertar un inline en VTEX, para insertar contenido de Connectif mediante un inline en tu VTEX IO.
- Configuración de Afiliados en VTEX, para aprender cómo sincronizar los afiliados en VTEX con Connectif y cómo se comporta esa sincronización.
- Integración personalizada para enviar datos, para enviar datos desde Connectif a sistemas o aplicaciones externos.