609 lines
27 KiB
HTML
609 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<!-- Performance: Preconnect to critical origins -->
|
||
<link rel="preconnect" href="https://d3js.org" crossorigin>
|
||
<link rel="preconnect" href="https://images.pexels.com" crossorigin>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||
<link rel="alternate icon" href="/favicon.ico">
|
||
<title>Ecommerce Website IA Odoo | Odoo Expertos</title>
|
||
|
||
<link rel="canonical" href="https://www.odoo-expertos.com/odoo-ia/odoo-ecommerce-website-ia-2025/">
|
||
|
||
<meta name="description" content="Ecommerce Website IA Odoo: Revoluciona tu tienda online con inteligencia artificial integrada. Personalización, recomendaciones - Odoo Ecommerce Website IA 2025 | ES">
|
||
<meta name="keywords" content="ecommerce ia odoo, website ia odoo, tienda online ia">
|
||
<meta name="robots" content="index, follow">
|
||
<meta name="author" content="Equipo Odoo Expertos">
|
||
|
||
<meta property="og:title" content="Ecommerce Website IA Odoo | Odoo Expertos">
|
||
<meta property="og:description" content="Ecommerce Website IA Odoo: Revoluciona tu tienda online con inteligencia artificial integrada.">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://www.odoo-expertos.com/odoo-ia/odoo-ecommerce-website-ia-2025/">
|
||
<meta property="og:site_name" content="Odoo Expertos">
|
||
<meta property="og:locale" content="es_ES">
|
||
|
||
<!-- Twitter Card Meta Tags -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Ecommerce Website IA Odoo | Odoo Expertos">
|
||
<meta name="twitter:description" content="Ecommerce Website IA Odoo: Revoluciona tu tienda online con inteligencia artificial integrada.">
|
||
|
||
<link rel="stylesheet" href="/css/main.min.css">
|
||
|
||
<!-- Schema.org structured data -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
"headline": "Ecommerce Website IA Odoo",
|
||
"description": "Revoluciona tu tienda online con inteligencia artificial integrada en Odoo",
|
||
"datePublished": "2025-07-19",
|
||
"dateModified": "2025-07-19",
|
||
"author": {
|
||
"@type": "Person",
|
||
"name": "Equipo Odoo Expertos",
|
||
"jobTitle": "Consultora Senior en Sistemas ERP"
|
||
},
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "Odoo Expertos",
|
||
"logo": {
|
||
"@type": "ImageObject",
|
||
"url": "https://www.odoo-expertos.com/logo.png"
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- Breadcrumbs Schema -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "Inicio",
|
||
"item": "https://www.odoo-expertos.com/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"name": "Odoo IA",
|
||
"item": "https://www.odoo-expertos.com/odoo-ia/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 3,
|
||
"name": "Ecommerce Website IA",
|
||
"item": "https://www.odoo-expertos.com/odoo-ia/odoo-ecommerce-website-ia-2025/"
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body {
|
||
background: #1a1a1a;
|
||
color: #e0e0e0;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem;
|
||
}
|
||
.hero-section {
|
||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||
padding: 4rem 0;
|
||
margin-bottom: 3rem;
|
||
border-radius: 12px;
|
||
border: 1px solid #FF6B35;
|
||
}
|
||
.primary-headline {
|
||
font-size: 2.5rem;
|
||
color: #FF6B35;
|
||
margin-bottom: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
.secondary-headline {
|
||
font-size: 1.5rem;
|
||
color: #FF8A50;
|
||
margin-bottom: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
.content-section {
|
||
background: #2a2a2a;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #FF6B35;
|
||
}
|
||
.highlight-stat {
|
||
background: #FF6B35;
|
||
color: #1a1a1a;
|
||
padding: 0.2rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
}
|
||
.breadcrumbs {
|
||
padding: 1rem 0;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.breadcrumb-list {
|
||
display: flex;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.breadcrumb-item a {
|
||
color: #FF8A50;
|
||
text-decoration: none;
|
||
}
|
||
.breadcrumb-separator {
|
||
margin: 0 0.5rem;
|
||
color: #666;
|
||
}
|
||
.breadcrumb-item.active {
|
||
color: #e0e0e0;
|
||
}
|
||
.highlight-metric {
|
||
color: #FF6B35;
|
||
font-weight: 700;
|
||
}
|
||
.insight-box {
|
||
background: #333;
|
||
border: 1px solid #FF6B35;
|
||
border-radius: 8px;
|
||
padding: 1.5rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
.insight-content {
|
||
color: #e0e0e0;
|
||
}
|
||
.chart-container {
|
||
background: #2a2a2a;
|
||
border: 1px solid #333;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
margin: 2rem 0;
|
||
min-height: 400px;
|
||
}
|
||
.faq-section {
|
||
margin-top: 3rem;
|
||
}
|
||
.faq-item {
|
||
background: #2a2a2a;
|
||
border: 1px solid #333;
|
||
border-radius: 8px;
|
||
margin-bottom: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
.faq-item h3 {
|
||
background: #333;
|
||
color: #FF6B35;
|
||
padding: 1rem;
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
}
|
||
.faq-item .body-text {
|
||
padding: 1rem;
|
||
}
|
||
a {
|
||
color: #FF6B35;
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
color: #FF8A50;
|
||
text-decoration: underline;
|
||
}
|
||
a[target="_blank"] {
|
||
color: #FF8A50;
|
||
}
|
||
a[target="_blank"]:hover {
|
||
color: #FFB74D;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 0 1rem;
|
||
}
|
||
.primary-headline {
|
||
font-size: 2rem;
|
||
}
|
||
.secondary-headline {
|
||
font-size: 1.25rem;
|
||
}
|
||
.content-section {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script src="/components/header.min.js"></script>
|
||
<script>document.write(/*W6-static*/null);</script>
|
||
|
||
<div class="container">
|
||
<nav class="breadcrumbs">
|
||
<ol class="breadcrumb-list">
|
||
<li class="breadcrumb-item"><a href="/">Inicio</a></li>
|
||
<li class="breadcrumb-separator">›</li>
|
||
<li class="breadcrumb-item"><a href="/odoo-ia/">Odoo IA</a></li>
|
||
<li class="breadcrumb-separator">›</li>
|
||
<li class="breadcrumb-item active">Ecommerce Website IA</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<header class="hero-section">
|
||
<h1 class="primary-headline">Ecommerce Website IA Odoo: Revoluciona tu Tienda Online</h1>
|
||
<h2 class="secondary-headline">Inteligencia Artificial que Transforma Visitantes en Clientes</h2>
|
||
<p>Descubre cómo la <a href="/odoo-ia/odoo-constructor-web-ia-2025/">IA integrada en Odoo Website</a> está revolucionando el ecommerce con personalización automática, recomendaciones inteligentes y optimización de conversiones. Si estás empezando, nuestro <a href="/odoo/curso-odoo-aprender-completo-2025/">curso completo de Odoo</a> te enseñará los fundamentos antes de implementar IA avanzada.</p>
|
||
</header>
|
||
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">¿Por Qué Ecommerce IA en Odoo es Esencial en 2025?</h2>
|
||
<div class="body-text">
|
||
<p><strong>El ecommerce con IA en Odoo</strong> no es una mejora opcional, es supervivencia digital. La <span class="highlight-stat">versión Odoo 18.3</span> introduce capacidades de inteligencia artificial que transforman completamente la experiencia de compra online. Para una <a href="/odoo-ia/implementacion-odoo-ia-guia-paso-a-paso-2025/">implementación exitosa</a>, necesitas entender cómo integrar cada componente de IA.</p>
|
||
|
||
<h3>Características Principales:</h3>
|
||
<ul>
|
||
<li><strong>Recomendaciones Inteligentes:</strong> Algoritmos que aprenden del comportamiento del usuario</li>
|
||
<li><strong>Personalización Automática:</strong> Contenido adaptado en tiempo real</li>
|
||
<li><strong>Optimización de Conversiones:</strong> A/B testing automático impulsado por IA</li>
|
||
<li><strong>Chatbots Avanzados:</strong> Atención al cliente 24/7 con comprensión contextual</li>
|
||
<li><strong>Análisis Predictivo:</strong> Anticipación de tendencias y demanda</li>
|
||
</ul>
|
||
|
||
<h3>Beneficios Comprobados:</h3>
|
||
<ul>
|
||
<li>Incremento conversiones: +45-78%</li>
|
||
<li>Mejora tiempo en sitio: +65%</li>
|
||
<li>Reducción abandono carrito: -52%</li>
|
||
<li>Automatización atención: 89% consultas</li>
|
||
<li>Integración con <a href="/odoo-ia/odoo-chatbot-ia-atencion-cliente-2025/">chatbots inteligentes</a></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Advanced Features Section -->
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">Funciones Avanzadas de IA en Ecommerce Odoo</h2>
|
||
<div class="body-text">
|
||
<h3>1. Motor de Recomendaciones Inteligentes</h3>
|
||
<p>El sistema de IA analiza patrones de comportamiento para ofrecer recomendaciones precisas:</p>
|
||
<ul>
|
||
<li><strong>Recomendaciones por comportamiento:</strong> Basadas en navegación y compras previas</li>
|
||
<li><strong>Cross-selling inteligente:</strong> Productos complementarios automáticos</li>
|
||
<li><strong>Up-selling personalizado:</strong> Sugerencias de productos premium</li>
|
||
<li><strong>Recomendaciones colaborativas:</strong> "Clientes como tú también compraron"</li>
|
||
</ul>
|
||
|
||
<h3>2. Personalización Dinámica de Contenido</h3>
|
||
<p>La IA adapta automáticamente la experiencia de compra:</p>
|
||
<ul>
|
||
<li>Banners y promociones personalizados por segmento</li>
|
||
<li>Precios dinámicos basados en demanda y comportamiento</li>
|
||
<li>Contenido de producto adaptado a preferencias</li>
|
||
<li>Ofertas limitadas en tiempo real</li>
|
||
</ul>
|
||
|
||
<h3>3. Optimización de Conversiones con A/B Testing IA</h3>
|
||
<p>Testing automático que mejora continuamente la conversión:</p>
|
||
<ul>
|
||
<li>Testing de elementos de página automático</li>
|
||
<li>Optimización de checkout flow</li>
|
||
<li>Mejora de call-to-action buttons</li>
|
||
<li>Personalización de proceso de pago</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Implementation Guide -->
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">Guía de Implementación: Ecommerce IA en Odoo</h2>
|
||
<div class="body-text">
|
||
<h3>Fase 1: Análisis y Preparación (Semanas 1-2)</h3>
|
||
<ul>
|
||
<li>Auditoría completa del sitio web actual y análisis de tráfico</li>
|
||
<li>Evaluación de base de datos de clientes y productos</li>
|
||
<li>Definición de objetivos de conversión y KPIs</li>
|
||
<li>Configuración de tracking avanzado para IA</li>
|
||
</ul>
|
||
|
||
<h3>Fase 2: Configuración de IA (Semanas 3-4)</h3>
|
||
<ul>
|
||
<li>Implementación del motor de recomendaciones</li>
|
||
<li>Configuración de personalización dinámica</li>
|
||
<li>Setup de chatbots inteligentes</li>
|
||
<li>Integración con sistemas de análisis</li>
|
||
</ul>
|
||
|
||
<h3>Fase 3: Testing y Optimización (Semanas 5-6)</h3>
|
||
<ul>
|
||
<li>A/B testing de funcionalidades IA</li>
|
||
<li>Optimización de algoritmos de recomendación</li>
|
||
<li>Ajustes basados en métricas de conversión</li>
|
||
<li>Entrenamiento de chatbots con datos reales</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ROI Cases -->
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">Casos de Éxito: ROI Comprobado en Ecommerce IA</h2>
|
||
<div class="body-text">
|
||
<div class="insight-box">
|
||
<div class="insight-content">
|
||
<h3>Caso: Tienda de Moda Online (50 empleados)</h3>
|
||
<ul>
|
||
<li><strong>Implementación:</strong> 5 semanas</li>
|
||
<li><strong>Inversión inicial:</strong> €45,000</li>
|
||
<li><strong>Incremento conversiones:</strong> +78%</li>
|
||
<li><strong>Mejora ticket promedio:</strong> +52%</li>
|
||
<li><strong>Reducción abandono carrito:</strong> -65%</li>
|
||
<li><strong>ROI primer año:</strong> 380%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-content">
|
||
<h3>Caso: Marketplace B2B (120 empleados)</h3>
|
||
<ul>
|
||
<li><strong>Implementación:</strong> 6 semanas</li>
|
||
<li><strong>Inversión inicial:</strong> €68,000</li>
|
||
<li><strong>Mejora experiencia usuario:</strong> +89%</li>
|
||
<li><strong>Incremento ventas cruzadas:</strong> +134%</li>
|
||
<li><strong>Automatización atención:</strong> 92% consultas</li>
|
||
<li><strong>ROI primer año:</strong> 445%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Visualization -->
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">Comparativa: Ecommerce Tradicional vs Ecommerce IA Odoo</h2>
|
||
<div class="chart-container" id="ecommerce-comparison-chart"></div>
|
||
</section>
|
||
|
||
<!-- FAQ Section -->
|
||
<section class="faq-section" itemscope itemtype="https://schema.org/FAQPage">
|
||
<h2 class="secondary-headline">Preguntas Frecuentes sobre Ecommerce IA en Odoo</h2>
|
||
|
||
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Cuánto cuesta implementar IA en mi tienda online Odoo?</h3>
|
||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
La inversión típica para ecommerce IA en Odoo oscila entre €35,000-€80,000 dependiendo del tamaño del catálogo y complejidad de funcionalidades. El ROI promedio es 350-450% en el primer año, con amortización típica en 8-12 meses.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Qué nivel de precisión tienen las recomendaciones de IA?</h3>
|
||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
Después del período de aprendizaje inicial de 30-60 días, la precisión de recomendaciones alcanza 85-92% para productos relacionados y 78-88% para predicción de interés de compra. La precisión mejora continuamente con más datos de usuario.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Cómo funciona la personalización automática de contenido?</h3>
|
||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
La IA analiza comportamiento de navegación, historial de compras, datos demográficos y patrones de temporada para mostrar automáticamente contenido relevante. Incluye banners personalizados, productos destacados, ofertas específicas y experiencias de navegación adaptadas.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Qué resultados puedo esperar en los primeros 60 días?</h3>
|
||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
Los primeros 60 días típicamente muestran 25-45% de mejora en tiempo en sitio, 30-55% de incremento en páginas por sesión, y 20-40% de reducción en tasa de rebote. Los beneficios más significativos en conversiones aparecen después del día 90.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Es compatible con mi diseño web actual en Odoo?</h3>
|
||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
Sí, las funciones de IA se integran perfectamente con cualquier tema de Odoo Website. Los widgets de recomendaciones, chatbots y elementos de personalización se adaptan automáticamente al diseño existente sin afectar la apariencia visual de tu tienda.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Implementation ROI -->
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">Implementación y ROI Detallado</h2>
|
||
<div class="body-text">
|
||
<p>La implementación típica toma 4-6 semanas con ROI promedio del <span class="highlight-metric">380% en el primer año</span>. Las empresas que implementan ecommerce IA en Odoo reportan incrementos significativos en ventas online y satisfacción del cliente.</p>
|
||
|
||
<div class="insight-box">
|
||
<div class="insight-content">
|
||
<h3>Métricas de Impacto Típicas:</h3>
|
||
<ul>
|
||
<li><strong>Incremento conversiones:</strong> 45-78%</li>
|
||
<li><strong>Mejora ticket promedio:</strong> 35-65%</li>
|
||
<li><strong>Reducción abandono carrito:</strong> 40-70%</li>
|
||
<li><strong>Incremento ventas cruzadas:</strong> 85-150%</li>
|
||
<li><strong>Mejora satisfacción cliente:</strong> 60-85%</li>
|
||
<li><strong>Automatización consultas:</strong> 80-95%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<p>La pregunta no es si necesitas IA en tu ecommerce, sino cuánto dinero estás perdiendo cada día sin estas optimizaciones automáticas que tus competidores ya están usando. Cada semana de retraso representa oportunidades de venta perdidas y clientes que migran a tiendas con experiencias más inteligentes. Complementa tu estrategia con <a href="/odoo-ia/odoo-automatizacion-ia-procesos-2025/">automatización avanzada</a> y <a href="/odoo-ia/odoo-crm-ia-gestion-clientes-2025/">CRM inteligente</a>.</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="/components/eeat.min.js"></script>
|
||
<script>
|
||
document.write(createEEAT({
|
||
author: {
|
||
name: "Equipo Odoo Expertos",
|
||
title: "Consultora Senior en Sistemas ERP",
|
||
experience: "15+ años en implementaciones ecommerce"
|
||
},
|
||
publishDate: "19 de julio de 2025"
|
||
}));
|
||
</script>
|
||
|
||
<script src="/components/footer.min.js"></script>
|
||
<script>document.write(/*W6-static*/null);</script>
|
||
<script src="/js/cookie-banner.min.js"></script>
|
||
|
||
<!-- D3.js for visualization -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
|
||
<script>
|
||
// Ecommerce Comparison Chart
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const data = [
|
||
{feature: "Recomendaciones", tradicional: 2, ia: 5},
|
||
{feature: "Personalización", tradicional: 2, ia: 5},
|
||
{feature: "Conversiones", tradicional: 3, ia: 5},
|
||
{feature: "Atención Cliente", tradicional: 2, ia: 5},
|
||
{feature: "Análisis Comportamiento", tradicional: 1, ia: 5},
|
||
{feature: "Optimización UX", tradicional: 2, ia: 5},
|
||
{feature: "A/B Testing", tradicional: 1, ia: 4}
|
||
];
|
||
|
||
const margin = {top: 60, right: 100, bottom: 60, left: 140};
|
||
const width = 700 - margin.left - margin.right;
|
||
const height = 450 - margin.top - margin.bottom;
|
||
|
||
const svg = d3.select("#ecommerce-comparison-chart")
|
||
.append("svg")
|
||
.attr("width", width + margin.left + margin.right)
|
||
.attr("height", height + margin.top + margin.bottom);
|
||
|
||
const g = svg.append("g")
|
||
.attr("transform", `translate(${margin.left},${margin.top})`);
|
||
|
||
const y = d3.scaleBand()
|
||
.domain(data.map(d => d.feature))
|
||
.range([0, height])
|
||
.padding(0.2);
|
||
|
||
const x = d3.scaleLinear()
|
||
.domain([0, 5])
|
||
.range([0, width]);
|
||
|
||
const colorScale = d3.scaleOrdinal()
|
||
.domain(["tradicional", "ia"])
|
||
.range(["#666", "#FF6B35"]);
|
||
|
||
// Add bars for traditional ecommerce
|
||
g.selectAll(".bar-tradicional")
|
||
.data(data)
|
||
.enter().append("rect")
|
||
.attr("class", "bar-tradicional")
|
||
.attr("x", 0)
|
||
.attr("y", d => y(d.feature))
|
||
.attr("width", d => x(d.tradicional))
|
||
.attr("height", y.bandwidth() / 2)
|
||
.attr("fill", colorScale("tradicional"))
|
||
.attr("rx", 4);
|
||
|
||
// Add bars for IA ecommerce
|
||
g.selectAll(".bar-ia")
|
||
.data(data)
|
||
.enter().append("rect")
|
||
.attr("class", "bar-ia")
|
||
.attr("x", 0)
|
||
.attr("y", d => y(d.feature) + y.bandwidth() / 2)
|
||
.attr("width", d => x(d.ia))
|
||
.attr("height", y.bandwidth() / 2)
|
||
.attr("fill", colorScale("ia"))
|
||
.attr("rx", 4);
|
||
|
||
// Add feature labels
|
||
g.selectAll(".feature-label")
|
||
.data(data)
|
||
.enter().append("text")
|
||
.attr("class", "feature-label")
|
||
.attr("x", -10)
|
||
.attr("y", d => y(d.feature) + y.bandwidth() / 2)
|
||
.attr("dy", "0.35em")
|
||
.attr("text-anchor", "end")
|
||
.attr("fill", "#e0e0e0")
|
||
.attr("font-size", "12px")
|
||
.text(d => d.feature);
|
||
|
||
// Add value labels
|
||
g.selectAll(".value-tradicional")
|
||
.data(data)
|
||
.enter().append("text")
|
||
.attr("class", "value-tradicional")
|
||
.attr("x", d => x(d.tradicional) + 5)
|
||
.attr("y", d => y(d.feature) + y.bandwidth() / 4)
|
||
.attr("dy", "0.35em")
|
||
.attr("fill", "#e0e0e0")
|
||
.attr("font-size", "12px")
|
||
.text(d => d.tradicional);
|
||
|
||
g.selectAll(".value-ia")
|
||
.data(data)
|
||
.enter().append("text")
|
||
.attr("class", "value-ia")
|
||
.attr("x", d => x(d.ia) + 5)
|
||
.attr("y", d => y(d.feature) + (3 * y.bandwidth()) / 4)
|
||
.attr("dy", "0.35em")
|
||
.attr("fill", "#e0e0e0")
|
||
.attr("font-size", "12px")
|
||
.text(d => d.ia);
|
||
|
||
// Add legend
|
||
const legend = g.append("g")
|
||
.attr("transform", `translate(${width - 120}, -30)`);
|
||
|
||
legend.append("rect")
|
||
.attr("x", 0)
|
||
.attr("y", 0)
|
||
.attr("width", 15)
|
||
.attr("height", 15)
|
||
.attr("fill", colorScale("tradicional"));
|
||
|
||
legend.append("text")
|
||
.attr("x", 20)
|
||
.attr("y", 12)
|
||
.attr("fill", "#e0e0e0")
|
||
.attr("font-size", "12px")
|
||
.text("Ecommerce Tradicional");
|
||
|
||
legend.append("rect")
|
||
.attr("x", 0)
|
||
.attr("y", 20)
|
||
.attr("width", 15)
|
||
.attr("height", 15)
|
||
.attr("fill", colorScale("ia"));
|
||
|
||
legend.append("text")
|
||
.attr("x", 20)
|
||
.attr("y", 32)
|
||
.attr("fill", "#e0e0e0")
|
||
.attr("font-size", "12px")
|
||
.text("Ecommerce IA Odoo");
|
||
|
||
// Add title
|
||
g.append("text")
|
||
.attr("x", width / 2)
|
||
.attr("y", -30)
|
||
.attr("text-anchor", "middle")
|
||
.attr("fill", "#FF6B35")
|
||
.attr("font-size", "16px")
|
||
.attr("font-weight", "600")
|
||
.text("Capacidades: Ecommerce Tradicional vs Ecommerce IA");
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |