Frontend estático responsive para la primera etapa de la tienda online.
Frontend profesional y dinámico para `apps-registry/workloads/ecommerce/`.
## Incluye
- Home profesional y responsive
-Buscador y filtros por categoría
-Catálogo demostrativo
-Carrito lateral en el navegador
-Integración inicial con Instagram
-Base preparada para consumir APIs de microservicios
- Home responsive.
-Catálogo JSON con búsqueda, categorías y ordenamiento.
-Favoritos y carrito persistentes.
-Pedido por WhatsApp o fallback a Instagram.
-Nginx con `/healthz`.
-CSV -> JSON -> WebP automático.
- Workflow diario opcional para Gitea Actions.
## Despliegue en el laboratorio
Reemplaza `workloads/ecommerce/index.html` con el `index.html` incluido. El pipeline actual construirá la imagen, actualizará el manifiesto GitOps y validará el tag desplegado.
## Configuración
Edita `workloads/ecommerce/data/store.json` y configura:
```json
"whatsappNumber":"57XXXXXXXXXX"
```
## Antes de producción
Se deben incorporar logo oficial, fotos y precios reales, inventario, número de WhatsApp, políticas comerciales y servicios de catálogo, inventario, carrito, pedidos, pagos y clientes.
ari-001,Bolso Crossbody Aura,Accesorios,89900,109900,Bolso compacto de uso diario con correa ajustable.,accesorios|bolso,true,true,true,9,,Catálogo inicial Ari Shopping,
ari-002,Set Glow Skincare,Belleza,74900,89900,Rutina esencial de cuidado facial para una apariencia luminosa.,belleza|set,true,false,true,10,,Catálogo inicial Ari Shopping,
ari-003,Reloj Minimal Rose,Accesorios,119900,149900,Diseño minimalista con correa suave y detalle metálico.,accesorios|reloj,false,false,true,11,,Catálogo inicial Ari Shopping,
ari-004,Audífonos Mini Pods,Tecnología,99900,129900,Audífonos inalámbricos con estuche de carga portátil.,tecnología|audífonos,true,true,true,12,,Catálogo inicial Ari Shopping,
ari-005,Organizador Vanity,Hogar,64900,79900,"Organizador para maquillaje, accesorios y artículos personales.",hogar|organizador,false,false,true,13,,Catálogo inicial Ari Shopping,
ari-006,Kit Brochas Essential,Belleza,59900,74900,Brochas suaves para una rutina de maquillaje completa.,belleza|kit,false,true,true,14,,Catálogo inicial Ari Shopping,
ari-007,Termo Trend 1.2L,Hogar,84900,99900,"Termo de gran capacidad con tapa, pitillo y asa.",hogar|termo,true,false,true,15,,Catálogo inicial Ari Shopping,
ari-008,Smart Band Active,Tecnología,109900,139900,Pulsera inteligente para actividad diaria y notificaciones.,tecnología|smart,true,false,true,16,,Catálogo inicial Ari Shopping,
1
id
name
category
price
compare_at_price
description
tags
featured
new
available
stock
image_urls
source_name
source_url
2
ari-001
Bolso Crossbody Aura
Accesorios
89900
109900
Bolso compacto de uso diario con correa ajustable.
accesorios|bolso
true
true
true
9
Catálogo inicial Ari Shopping
3
ari-002
Set Glow Skincare
Belleza
74900
89900
Rutina esencial de cuidado facial para una apariencia luminosa.
belleza|set
true
false
true
10
Catálogo inicial Ari Shopping
4
ari-003
Reloj Minimal Rose
Accesorios
119900
149900
Diseño minimalista con correa suave y detalle metálico.
accesorios|reloj
false
false
true
11
Catálogo inicial Ari Shopping
5
ari-004
Audífonos Mini Pods
Tecnología
99900
129900
Audífonos inalámbricos con estuche de carga portátil.
tecnología|audífonos
true
true
true
12
Catálogo inicial Ari Shopping
6
ari-005
Organizador Vanity
Hogar
64900
79900
Organizador para maquillaje, accesorios y artículos personales.
hogar|organizador
false
false
true
13
Catálogo inicial Ari Shopping
7
ari-006
Kit Brochas Essential
Belleza
59900
74900
Brochas suaves para una rutina de maquillaje completa.
belleza|kit
false
true
true
14
Catálogo inicial Ari Shopping
8
ari-007
Termo Trend 1.2L
Hogar
84900
99900
Termo de gran capacidad con tapa, pitillo y asa.
hogar|termo
true
false
true
15
Catálogo inicial Ari Shopping
9
ari-008
Smart Band Active
Tecnología
109900
139900
Pulsera inteligente para actividad diaria y notificaciones.
<aclass="brand"href="#inicio"><spanclass="logo">ARI</span><spanclass="brandText"><strong>Ari Shopping</strong><small>Detalles que te encantan</small></span></a>
<divclass="heroCopy"><spanclass="tag"><spanclass="dot"></span>Nueva colección</span><h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1><p>Juguetes, minifiguras, bolsos y regalos seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p><divclass="heroActions"><aclass="cta primary"href="#productos">Explorar productos</a><aclass="cta"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/">Ver Instagram</a></div></div>
<divclass="heroMedia"><imgsrc="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=1200&q=85"alt="Juguetes coloridos"><divclass="float"><strong>Compra con acompañamiento</strong><span>Te ayudamos a elegir, confirmar disponibilidad y coordinar tu envío.</span></div></div>
</div></div></section>
<sectionclass="trust"><divclass="wrap trustGrid"><articleclass="trustCard"><spanclass="trustIcon">🚚</span><div><strong>Envíos seguros</strong><small>Coordinación y seguimiento.</small></div></article><articleclass="trustCard"><spanclass="trustIcon">💳</span><div><strong>Pagos fáciles</strong><small>Opciones claras para comprar.</small></div></article><articleclass="trustCard"><spanclass="trustIcon">💗</span><div><strong>Atención cercana</strong><small>Antes y después de tu compra.</small></div></article></div></section>
<sectionclass="block"><divclass="wrap"><divclass="heading"><div><h2>Compra por categoría</h2><p>Encuentra rápido el regalo, juguete o accesorio ideal.</p></div><aclass="link"href="#productos">Ver todo →</a></div><divclass="cats">
<articleclass="cat"data-cat="juguetes"><imgsrc="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82"alt="Juguetes"><divclass="catText"><strong>Juguetes</strong><small>Diversión para todas las edades</small></div></article>
<articleclass="cat"data-cat="minifiguras"><imgsrc="https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82"alt="Minifiguras"><divclass="catText"><strong>Minifiguras</strong><small>Personajes para coleccionar</small></div></article>
<articleclass="cat"data-cat="bolsos"><imgsrc="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82"alt="Mochilas"><divclass="catText"><strong>Bolsos y mochilas</strong><small>Estilo para cada aventura</small></div></article>
<articleclass="cat"data-cat="regalos"><imgsrc="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82"alt="Regalos"><divclass="catText"><strong>Regalos</strong><small>Detalles que emocionan</small></div></article>
</div></div></section>
<sectionid="productos"class="block soft"><divclass="wrap"><divclass="heading"><div><h2>Productos destacados</h2><p>Catálogo demostrativo listo para conectarse después con el microservicio de productos.</p></div><aclass="link"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/">Consultar disponibilidad →</a></div><divid="filters"class="filters"></div><divid="products"class="products"></div></div></section>
<sectionclass="insta"><divclass="wrap instaGrid"><div><spanclass="tag"><spanclass="dot"></span>@ari_shopping1</span><h2>Descubre novedades todos los días.</h2><p>Sigue la cuenta para conocer productos recién llegados, promociones y disponibilidad. La tienda online transformará esa comunidad en una experiencia de compra completa.</p><aclass="cta primary"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/">Seguir en Instagram</a></div><divclass="tiles"><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=500&q=80"alt="Producto"></a><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=500&q=80"alt="Juguetes"></a><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=500&q=80"alt="Mochila"></a><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=500&q=80"alt="Regalo"></a><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=500&q=80"alt="Juguetes"></a><aclass="tile"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/"><imgsrc="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=500&q=80"alt="Regalos"></a></div></div></section>
{id:2,n:'Set creativo de bloques y personajes',c:'juguetes',tag:'Favorito',p:119000,old:139000,img:'https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=800&q=82'},
{id:3,n:'Mochila urbana compacta',c:'bolsos',tag:'Nuevo',p:89000,old:0,img:'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82'},
{id:4,n:'Caja sorpresa para regalo',c:'regalos',tag:'Oferta',p:59000,old:69000,img:'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82'},
{id:5,n:'Vehículo de juguete colección',c:'juguetes',tag:'Nuevo',p:69000,old:0,img:'https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82'},
{id:6,n:'Kit de arte y creatividad',c:'regalos',tag:'Favorito',p:74000,old:0,img:'https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=800&q=82'},
{id:7,n:'Figura decorativa de colección',c:'minifiguras',tag:'Oferta',p:65000,old:79000,img:'https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=800&q=82'},
{id:8,n:'Bolso casual de uso diario',c:'bolsos',tag:'Nuevo',p:99000,old:0,img:'https://images.unsplash.com/photo-1559563458-527698bf5295?auto=format&fit=crop&w=800&q=82'}
functiontoast(t){constel=$('#toast');el.textContent=t;el.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>el.classList.remove('show'),2000)}functionadd(id){constx=data.find(p=>p.id===id),e=state.cart.find(p=>p.id===id);e?e.qty++:state.cart.push({...x,qty:1});renderCart();toast('Producto agregado al carrito')}functionremove(id){state.cart=state.cart.filter(x=>x.id!==id);renderCart()}
functionrenderCart(){constn=state.cart.reduce((s,x)=>s+x.qty,0),t=state.cart.reduce((s,x)=>s+x.p*x.qty,0);$('#count').textContent=n;$('#total').textContent=money.format(t);cartList.innerHTML=state.cart.length?state.cart.map(x=>`<div class="cartItem"><img src="${x.img}" alt="${x.n}"><div><strong>${x.n}</strong><small>${money.format(x.p)} · Cant. ${x.qty}</small></div><button class="remove" data-remove="${x.id}">Eliminar</button></div>`).join(''):'<div class="cartEmpty"><div><strong>Tu carrito está vacío</strong><br><small>Agrega productos para comenzar.</small></div></div>'}
<!doctype html><htmllang="es"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><metaname="theme-color"content="#ff3f7f"><metaname="description"content="Ari Shopping, productos seleccionados y compras fáciles desde Colombia."><title>Ari Shopping</title><linkrel="icon"href="assets/img/brand/favicon.svg"><linkrel="stylesheet"href="assets/css/styles.css"><scriptdefersrc="assets/js/app.js"></script></head><body>
<divclass="announcement">Envíos nacionales · Atención personalizada · Precios en COP</div>
<header><divclass="shell head"><ahref="#inicio"><imgsrc="assets/img/brand/logo.svg"alt="Ari Shopping"></a><labelclass="search"><span>⌕</span><inputid="search"type="search"placeholder="Busca productos o categorías"></label><aclass="ig"href="https://www.instagram.com/ari_shopping1/"target="_blank"rel="noopener">Instagram</a><buttonid="cartOpen"class="cart">Carrito <bid="cartCount">0</b></button></div></header>
<mainid="inicio"><sectionclass="hero shell"><div><spanclass="eyebrow">Ari Shopping · Colección destacada</span><h1>Detalles que hacen tu día más especial.</h1><p>Una experiencia de compra moderna, cercana y rápida. Descubre novedades, favoritos y productos seleccionados para ti.</p><divclass="heroActions"><aclass="btn primary"href="#catalogo">Ver productos</a><aclass="btn ghost"href="https://www.instagram.com/ari_shopping1/"target="_blank"rel="noopener">Seguir en Instagram</a></div></div><divclass="art"><div><small>Nuevos favoritos</small><strong>Estilo para cada momento</strong><span>Desde $59.900</span></div></div></section>
<sectionclass="benefits shell"><article><b>01</b><span><strong>Compra simple</strong><small>Agrega y envía tu pedido.</small></span></article><article><b>02</b><span><strong>Catálogo dinámico</strong><small>Productos desde una fuente central.</small></span></article><article><b>03</b><span><strong>Atención directa</strong><small>Confirma disponibilidad antes de pagar.</small></span></article></section>
<sectionid="catalogo"class="catalog shell"><divclass="sectionTitle"><div><spanclass="eyebrow">Catálogo dinámico</span><h2>Productos para descubrir</h2><pid="summary">Cargando catálogo...</p></div><selectid="sort"><optionvalue="featured">Destacados</option><optionvalue="new">Nuevos</option><optionvalue="asc">Precio: menor</option><optionvalue="desc">Precio: mayor</option></select></div><divid="categories"class="categories"></div><divid="grid"class="grid"></div><divid="empty"class="empty"hidden>No encontramos productos.</div></section>
<sectionclass="instagram"><divclass="shell"><div><spanclass="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><aclass="btn light"href="https://www.instagram.com/ari_shopping1/"target="_blank"rel="noopener">@ari_shopping1</a></div></section></main>
<footer><divclass="shell foot"><imgsrc="assets/img/brand/logo.svg"alt="Ari Shopping"><p>Detalles que enamoran, compras que disfrutas.</p><span>Frontend v2.0.0</span></div></footer>
<divid="overlay"class="overlay"hidden></div><asideid="drawer"class="drawer"aria-hidden="true"><divclass="drawerHead"><div><small>Tu selección</small><h2>Carrito</h2></div><buttonid="cartClose">×</button></div><divid="cartItems"class="drawerBody"></div><divclass="drawerFoot"><div><span>Total estimado</span><strongid="cartTotal">$0</strong></div><buttonid="checkout"class="btn primary full">Enviar pedido</button><buttonid="clearCart"class="link">Vaciar carrito</button><small>Precio y disponibilidad se confirman antes del pago.</small></div></aside><divid="toast"class="toast"hidden></div>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
