Saltar al contenido principal

Comparación de Productos

El widget incluye una funcionalidad de comparación que permite analizar hasta 4 productos lado a lado, con análisis inteligente de pros y contras.

Funcionalidad​

  • Comparar hasta 4 productos simultáneamente
  • Tabla de especificaciones lado a lado
  • Análisis IA con pros/contras (planes Growth+)
  • Persistencia en sessionStorage
  • Interfaz responsive (cards en móvil, tabla en desktop)

Cómo usar​

Añadir a comparación​

El usuario puede añadir productos desde los resultados de búsqueda:

  1. Hover sobre un producto
  2. Click en el icono de comparación (o botón "Comparar")
  3. El producto se añade al panel de comparación

Panel de comparación​

  • Aparece en la parte inferior de la pantalla
  • Muestra miniaturas de productos añadidos
  • Click en "Comparar" para ver tabla completa

Límite de productos​

El límite es 4 productos. Si el usuario intenta añadir más, se muestra un mensaje indicando el límite.

Persistencia​

Los productos de comparación se guardan automáticamente en sessionStorage:

  • Se restauran al recargar la página
  • Se limpian al cerrar el navegador

La persistencia está habilitada por defecto y no requiere configuración adicional.

Análisis IA​

En planes Growth y superiores, la comparación incluye análisis inteligente automático:

Contenido del análisis​

SecciónDescripción
ProsVentajas de cada producto
ContrasDesventajas de cada producto
Mejor paraCaso de uso ideal
VeredictoRecomendación basada en los productos

El análisis se genera automáticamente cuando el usuario abre la tabla de comparación con 2 o más productos.

Respondiendo a clicks​

Para ejecutar lógica cuando el usuario hace click en un producto (incluyendo desde la comparación), usa el callback onResultClick:

NeuroonWidget.init({
  callbacks: {
    onResultClick: (product) => {
      console.log('Usuario clickeó:', product.name);

      // Analytics
      gtag('event', 'select_item', {
        item_id: product.id,
        item_name: product.name,
        price: product.price,
      });
    },
  },
});
Callbacks disponibles

Los callbacks son la única forma de responder a eventos del widget. Consulta la documentación de callbacks para ver todos los disponibles.

Personalización​

Traducciones​

NeuroonWidget.init({
  translations: {
    comparison: {
      title: 'Tu comparativa',
      addProduct: 'Añadir otro producto',
      removeProduct: 'Quitar',
      maxProducts: 'Puedes comparar hasta {max} productos',
      clearAll: 'Limpiar todo',
      compare: 'Comparar ahora',
      comparing: 'Comparando {count} productos',

      // Análisis IA
      aiAnalysis: 'Análisis inteligente',
      pros: 'Puntos fuertes',
      cons: 'Puntos débiles',
      bestFor: 'Ideal para',
      verdict: 'Conclusión',

      // Tabla
      specifications: 'Especificaciones',
      differences: 'Ver diferencias',
      similarities: 'Ver similitudes',
    },
  },
});

Estilos​

/* Panel de comparación */
.neuroon-widget {
  --nrn-comparison-bg: 30 41 59;
  --nrn-comparison-border: 51 65 85;
}

/* Indicador de comparación en productos */
.neuroon-widget {
  --nrn-compare-badge: 168 85 247; /* Púrpura */
}

Accesibilidad​

La tabla de comparación cumple WCAG 2.2 AA:

  • Navegación por teclado completa
  • Headers de tabla con scope
  • Anuncios ARIA para acciones
  • Contraste de colores verificado

Próximos pasos​