576 lines
24 KiB
HTML
576 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="de">
|
||
<head>
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||
<link rel="alternate icon" href="/favicon.ico">
|
||
<!-- Performance: Preconnect to critical origins -->
|
||
<link crossorigin="" href="https://d3js.org" rel="preconnect"/>
|
||
<link crossorigin="" href="https://images.pexels.com" rel="preconnect"/>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>Ecommerce Website KI Odoo | Odoo Expertos</title>
|
||
<link href="https://www.odoo-expertos.com/de/odoo-ia/odoo-ecommerce-website-ia-2025/" rel="canonical"/>
|
||
<meta content="Ecommerce Website KI Odoo: Revoluciona tu tienda online con Künstliche Intelligenz integrada. Personalización, recomendaciones y Automatisierung avanzada." name="description"/>
|
||
<meta content="ecommerce KI Odoo, website KI Odoo, tienda online KI" name="keywords"/>
|
||
<meta content="index, follow" name="robots"/>
|
||
<meta content="Equipo Odoo Expertos" name="author"/>
|
||
<meta content="Ecommerce Website KI Odoo | Odoo Expertos" property="og:title"/>
|
||
<meta content="Ecommerce Website KI Odoo: Revoluciona tu tienda online con Künstliche Intelligenz integrada." property="og:description"/>
|
||
<meta content="article" property="og:type"/>
|
||
<meta content="https://www.odoo-expertos.com/Odoo-KI/Odoo-ecommerce-website-KI-2025/" property="og:url"/>
|
||
<meta content="Odoo Expertos" property="og:site_name"/>
|
||
<meta content="de_DE" property="og:locale"/>
|
||
<!-- Twitter Card Meta Tags -->
|
||
<meta content="summary_large_image" name="twitter:card"/>
|
||
<meta content="Ecommerce Website KI Odoo | Odoo Expertos" name="twitter:title"/>
|
||
<meta content="Ecommerce Website KI Odoo: Revoluciona tu tienda online con Künstliche Intelligenz integrada." name="twitter:description"/>
|
||
<link href="/css/main.min.css" rel="stylesheet"/>
|
||
<!-- 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/de/odoo-ia/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 3,
|
||
"name": "Ecommerce Website IA",
|
||
"item": "https://www.odoo-expertos.com/de/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="/">Startseite</a></li>
|
||
<li class="breadcrumb-separator">›</li>
|
||
<li class="breadcrumb-item"><a href="/de/odoo-ia/">Odoo KI</a></li>
|
||
<li class="breadcrumb-separator">›</li>
|
||
<li class="breadcrumb-item active">Ecommerce Website KI</li>
|
||
</ol>
|
||
</nav>
|
||
<header class="hero-section">
|
||
<h1 class="primary-headline">Ecommerce Website KI Odoo: Revoluciona tu Tienda Online</h1>
|
||
<h2 class="secondary-headline">Künstliche Intelligenz que Transforma Visitantes en Clientes</h2>
|
||
<p>Entdecken Sie Wie la <a href="/de/odoo-ia/odoo-constructor-web-ia-2025/">KI 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="/de/odoo/curso-odoo-aprender-completo-2025/">curso completo de Odoo</a> te enseñará los fundamentos antes de implementar KI avanzada.</p>
|
||
</header>
|
||
<section class="content-section">
|
||
<h2 class="secondary-headline">¿Por Qué Ecommerce KI en Odoo es Esencial en 2025?</h2>
|
||
<div class="body-text">
|
||
<p><strong>El ecommerce con KI 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 Künstliche Intelligenz que transforman completamente la experiencia de compra online. Para una <a href="/de/odoo-ia/implementacion-odoo-ia-guia-paso-a-paso-2025/">implementación exitosa</a>, necesitas entender Wie integrar cada componente de KI.</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 in Echtzeit</li>
|
||
<li><strong>Optimización de Conversiones:</strong> A/B testing automático impulsado por KI</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>Automatisierung atención: 89% consultas</li>
|
||
<li>Integración con <a href="/de/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 KI en Ecommerce Odoo</h2>
|
||
<div class="body-text">
|
||
<h3>1. Motor de Recomendaciones Inteligentes</h3>
|
||
<p>El System de KI 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 KI 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 in Echtzeit</li>
|
||
</ul>
|
||
<h3>3. Optimización de Conversiones con A/B Testing KI</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 KI 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 KI</li>
|
||
</ul>
|
||
<h3>Fase 2: Configuración de KI (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 KI</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">Erfolgreiche Fälle: ROI Comprobado en Ecommerce KI</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>Automatisierung 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 KI 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 KI en Odoo</h2>
|
||
<div class="faq-item" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Cuánto cuesta implementar KI en mi tienda online Odoo?</h3>
|
||
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
La inversión típica para ecommerce KI 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" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Qué nivel de precisión tienen las recomendaciones de KI?</h3>
|
||
<div itemprop="acceptedAnswer" itemscope="" 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" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Wie funciona la personalización automática de contenido?</h3>
|
||
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
La KI 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" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Qué resultados puedo esperar en los primeros 60 días?</h3>
|
||
<div itemprop="acceptedAnswer" itemscope="" 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" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
|
||
<h3 itemprop="name">¿Es compatible con mi diseño web actual en Odoo?</h3>
|
||
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
|
||
<div class="body-text" itemprop="text">
|
||
Sí, las funciones de KI 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 KI 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>Automatisierung consultas:</strong> 80-95%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p>La pregunta no es si necesitas KI 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="/de/odoo-ia/odoo-automatizacion-ia-procesos-2025/">Automatisierung avanzada</a> y <a href="/de/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> |