Template de integración desarrollado para implementar Empathy en tiendas VTEX. Esta aplicación inyecta un widget de búsqueda avanzada mediante VTEX Pixel, siguiendo las prácticas recomendadas por VTEX.

---

• Descripción General
• Requisitos Previos
• Instalación
• Configuración
• Arquitectura
• Componentes Principales
• Flujo de Integración
• Configuración por Cliente
• Evolutivos Propuestos
• Debugging
• Contribución

---

Esta app es una solución template configurable que permite integrar el buscador de Empathy en tiendas VTEX. Cada cliente puede tener diferentes configuraciones según sus necesidades:

✅ Con o sin variantes de productos
✅ Con o sin botón de add to cart
✅ Con o sin quantity selector
✅ Con o sin wishlist

• 🔍 Búsqueda avanzada mediante el widget de Empathy
• 🛒 Integración con carrito VTEX (add/remove/update)
• ❤️ Gestión de wishlist con sincronización visual
• 📊 Eventos de analítica GA4 personalizados
• 🔄 Comunicación bidireccional mediante el setSnippetConfig

---

⚠️ IMPORTANTE: Antes de instalar esta app, asegúrate de que:

1. El conector backend de Empathy esté correctamente configurado
2. El catálogo de VTEX se esté enviando como feed a Empathy
3. El equipo de Empathy haya mapeado el feed correctamente
4. Tengas acceso al script de Empathy de cada cliente (app.js) provisto por el equipo de Empathy

---

Esta aplicación está diseñada para operar como una App Privada. Sigue estos pasos para configurarla e instalarla bajo la cuenta correspondiente.

Asegúrate de estar logueado en la cuenta objetivo:

1. Clona este repositorio:

   
   

   _10

   git clone <repository-url>

   _10

   cd empathymx-pixel-app

   
   

2. Configura el Vendor (Account Name): Abre el archivo manifest.json en la raíz del proyecto. Cambia el valor del campo vendor por el nombre de la cuenta (account name) donde se instalará la aplicación.

   
   

   _10

   // manifest.json

   _10

   {

   _10

   "name": "pixel-app",

   _10

   "vendor": "TU_ACCOUNT_NAME",

   _10

   "version": "0.0.x",

   _10

   }

   
   

Nota: Esto cambiará el ID de la app a TU_ACCOUNT_NAME.empathy-pixel-app.

3. Instala la aplicación: Instala la versión recién publicada en el workspace actual:

   
   

   _10

   vtex install

   
   

4. Verifica la instalación:

   
   

   _10

   vtex ls | grep empathymx.pixel-app

   
   

---

Actualiza el archivo pixel/head.html con la URL del script de Empathy proporcionada por el equipo:

Ejemplo:

En react/Components/EmpathySearchbar/index.tsx, configura los parámetros del cliente:

En tu theme, agrega los siguientes bloques:

---

---

El componente principal que:

• Inicializa el widget de Empathy mediante initX
• Configura callbacks para interacciones del usuario
• Gestiona la comunicación con VTEX (carrito, wishlist)
• Envía eventos de analítica a GA4

Callbacks disponibles:

Callback	Descripción
UserClickedResultAddToCart	Click en "agregar al carrito" (producto simple)
UserClickedResultVariantAddToCart	Click en "agregar al carrito" (con variantes)
UserClickedResultRemoveFromCart	Click en "quitar del carrito" (producto simple)
UserClickedResultVariantRemoveFromCart	Click en "quitar del carrito" (con variantes)
UserClickedResultWishlist	Click en el icono de wishlist

Contenedor overlay para mostrar los resultados de búsqueda. Empathy "teleporta" su UI a este componente usando data-teleport.

• handleCart.ts: Lógica centralizada para operaciones de carrito
• handleWishlist.ts: Gestión completa de wishlist con GraphQL
• useGAAnalytics.ts: Envío de eventos personalizados a GA4
• index.tsx (utils): Funciones auxiliares (findProductBySkuId, mapProductForGA4)

---

---

Esta es la interfaz principal para comunicarse con el widget de Empathy:

¿Qué hace?

• ✅ Actualiza el estado visual del widget
• ✅ Muestra cantidades en el carrito
• ✅ Marca productos con icono de wishlist "filled"

La app envía 3 eventos personalizados:

• add_to_cart_empathy: Cuando se agrega un producto
• remove_from_cart_empathy: Cuando se quita un producto
• add_to_wishlist_empathy: Cuando se agrega a favoritos

Todos incluyen:

• search_term: El término de búsqueda que generó la interacción
• ecommerce.items[]: Datos del producto en formato GA4

---

Script de Empathy

• Cambiar URL en pixel/head.html según entorno del cliente
• Verificar que el script se cargue correctamente (console.log(window.InterfaceX))

InitX Configuration

• Actualizar instance (identificador del cliente en Empathy)
• Configurar env: 'staging' o 'production'
• Ajustar lang según idioma del sitio
• Configurar currency según moneda de la tienda
• Verificar scope: 'desktop' o 'mobile'

Funcionalidades Opcionales

• ¿El cliente tiene variantes? → Mantener callbacks de Variant
• ¿El cliente tiene add to cart? → Configurar callbacks de AddToCart
• ¿El cliente tiene quantity selector? → Verificar metadata.inputValue
• ¿El cliente tiene wishlist? → Verificar dependencia vtex.wish-list

Backend y Testing

• Verificar que el conector backend esté instalado
• Confirmar que el feed se envíe correctamente a Empathy
• Validar que Empathy haya mapeado el feed
• Probar búsqueda y resultados
• Probar add/remove from cart (con y sin variantes)
• Probar wishlist (agregar/remover)
• Verificar eventos GA4 en window.dataLayer

---

Problema	Solución
Widget no se muestra	Verificar que el script en head.html se cargue correctamente
InterfaceX is undefined	El script de Empathy no se cargó. Revisar URL y conectividad
Cart no sincroniza	Revisar que setSnippetConfig se llame después de init()
Wishlist no funciona	Verificar que vtex.wish-list esté instalada
Eventos GA4 no aparecen	Revisar que window.dataLayer exista antes de push

---