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)

Uso básico​

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

API de JavaScript​

Añadir producto​

const product = {
  id: 'prod_123',
  name: 'Nike Air Max',
  price: 120,
  imageUrl: 'https://...',
  // ... otros campos
};

const added = widget.addToComparison(product);
// true si se añadió, false si ya existe o límite alcanzado

Verificar si está en comparación​

if (widget.isInComparison('prod_123')) {
  console.log('Ya está en la comparación');
}

Quitar producto​

widget.removeFromComparison('prod_123');

Limpiar comparación​

widget.clearComparison();

Obtener productos​

const products = widget.comparisonProducts;
console.log(`Comparando ${products.length} productos`);

Abrir/cerrar panel​

widget.openComparison();
widget.closeComparison();

Eventos​

EventoPayloadDescripción
comparison:add{ product }Producto añadido
comparison:remove{ productId }Producto quitado
comparison:clear{}Comparación limpiada
comparison:open{}Panel abierto
comparison:close{}Panel cerrado
widget.on('comparison:add', ({ product }) => {
  showToast(`${product.name} añadido a comparación`);

  // Analytics
  gtag('event', 'add_to_comparison', {
    item_id: product.id,
    item_name: product.name,
  });
});

widget.on('comparison:clear', () => {
  console.log('Comparación limpiada');
});

Límite de productos​

El límite es 4 productos. Al intentar añadir más:

widget.on('comparison:add', ({ product }) => {
  // Este evento NO se emite si el límite está alcanzado
});

// Para saber si se alcanzó el límite:
if (widget.comparisonProducts.length >= 4) {
  showNotification('Máximo 4 productos para comparar');
}

Persistencia​

Los productos de comparación se guardan en sessionStorage:

// Clave: neuroon_comparison_{shopId}
// Formato: JSON array de productos

// Se restaura al recargar la página
// Se limpia al cerrar el navegador

Desactivar persistencia​

NeuroonWidget.init({
  persistence: {
    comparison: false, // Por defecto: true
  },
});

Análisis IA​

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

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

Ejemplo de respuesta​

{
  "analysis": {
    "products": [
      {
        "id": "prod_123",
        "pros": ["Mejor calidad de materiales", "Mayor durabilidad"],
        "cons": ["Precio más alto", "Menos colores disponibles"],
        "bestFor": "Usuarios que priorizan calidad sobre precio"
      },
      {
        "id": "prod_456",
        "pros": ["Precio competitivo", "Variedad de colores"],
        "cons": ["Materiales estándar"],
        "bestFor": "Usuarios con presupuesto limitado"
      }
    ],
    "verdict": "Para uso diario, el producto A ofrece mejor relación calidad-precio. Para uso ocasional, el producto B es suficiente.",
    "confidence": 0.87
  }
}

Acceder al análisis​

widget.on('comparison:open', async () => {
  const products = widget.comparisonProducts;

  if (products.length >= 2) {
    // El análisis se genera automáticamente al abrir la comparación
    // Se muestra en la UI del widget
  }
});

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 */
}

Ejemplos de uso​

Comparación desde código​

// Añadir productos destacados automáticamente
async function setupFeaturedComparison() {
  const featured = await fetchFeaturedProducts();

  // Añadir los primeros 2 productos
  featured.slice(0, 2).forEach(p => {
    widget.addToComparison(p);
  });

  // Abrir comparación
  widget.openComparison();
}

Integración con carrito​

// Sugerir comparación antes de añadir al carrito
widget.on('click', ({ product }) => {
  const comparison = widget.comparisonProducts;

  if (comparison.length > 0 && !widget.isInComparison(product.id)) {
    showPrompt({
      message: '¿Quieres comparar antes de comprar?',
      actions: [
        {
          text: 'Añadir a comparación',
          onClick: () => widget.addToComparison(product),
        },
        {
          text: 'Ir al producto',
          onClick: () => window.location.href = product.url,
        },
      ],
    });
  }
});

Analytics de comparación​

widget.on('comparison:add', ({ product }) => {
  gtag('event', 'add_to_comparison', {
    item_id: product.id,
    item_name: product.name,
    price: product.price,
  });
});

widget.on('comparison:open', () => {
  const products = widget.comparisonProducts;

  gtag('event', 'view_comparison', {
    items: products.map(p => ({
      item_id: p.id,
      item_name: p.name,
    })),
    comparison_count: products.length,
  });
});

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
<!-- Estructura accesible generada -->
<table role="grid" aria-label="Comparación de productos">
  <thead>
    <tr>
      <th scope="col">Característica</th>
      <th scope="col">Nike Air Max</th>
      <th scope="col">Adidas Ultraboost</th>
    </tr>
  </thead>
  <!-- ... -->
</table>

Próximos pasos​