feat(ecommerce): release Ari Shopping Frontend v2.1 real catalog
Build and Push Frontend / build (push) Successful in 2m30s

This commit is contained in:
2026-07-19 13:41:37 -05:00
parent 6700166821
commit 1c74220c88
33 changed files with 547 additions and 261 deletions
+11 -49
View File
@@ -1,52 +1,14 @@
# Ari Shopping Frontend v2 # Ari Shopping Frontend v2.1
Frontend profesional y dinámico para `apps-registry/workloads/ecommerce/`. Versión basada en 17 productos reales del archivo exportado por `ari_shopping1`.
## Incluye - Estética cercana al Frontend v1.
- Home responsive. - Imágenes propias normalizadas a WebP 1400 × 1400.
- Catálogo JSON con búsqueda, categorías y ordenamiento. - Hero y categorías con material real de Ari Shopping.
- Favoritos y carrito persistentes. - Pedidos por WhatsApp mediante `https://wa.link/rvcqqc`.
- Pedido por WhatsApp o fallback a Instagram. - Sin precios inventados: `Consultar disponibilidad`.
- Nginx con `/healthz`. - Catálogo editable desde `catalog-source.csv`.
- CSV -> JSON -> WebP automático.
- Workflow diario opcional para Gitea Actions.
## Configuración `data/external-image-sources.json` contiene páginas oficiales de Mattel y
Edita `workloads/ecommerce/data/store.json` y configura: Disney Store como referencias. Sus imágenes no están incluidas y solo deben
```json usarse con autorización del fabricante o proveedor.
"whatsappNumber": "57XXXXXXXXXX"
```
## Instalar en apps-registry
```bash
cd ari-shopping-frontend-v2
APPS_REPO=/DATA/AppData/k3d-lab/git/apps-registry ./tools-install-v2.sh
```
El instalador conserva `frontend.yaml`, `service.yaml`, `ingress.yaml` y `kustomization.yaml`.
## Build workflow
El workflow actual debe observar `workloads/ecommerce/**`; revisa `workflow-snippets/build-paths-update.yaml.txt`.
## Catálogo automático
Edita `catalog-source.csv`. Para imágenes propias o autorizadas, coloca URLs separadas por `|` en `image_urls` y ejecuta:
```bash
cd workloads/ecommerce
python3 -m pip install -r tools/requirements.txt
python3 tools/catalog_sync.py --download-images
```
Las imágenes se normalizan a 1200x1200 WebP.
Solo deben usarse imágenes propias, de proveedor o con autorización.
## Prueba local
```bash
cd workloads/ecommerce
python3 -m http.server 8080
```
## Docker
```bash
docker build -t ari-shopping-frontend:v2 workloads/ecommerce
docker run --rm -p 8080:80 ari-shopping-frontend:v2
curl http://127.0.0.1:8080/healthz
```
File diff suppressed because one or more lines are too long
Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

@@ -1 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100"><defs><linearGradient id="g"><stop stop-color="#ff3f7f"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs><rect width="360" height="100" rx="24" fill="#fff"/><circle cx="50" cy="50" r="34" fill="url(#g)"/><path d="M31 67 47 30h8l17 37H59l-3-8H44l-3 8Zm17-18h5l-2.5-7Z" fill="#fff"/><text x="95" y="48" font-family="Arial" font-size="30" font-weight="800" fill="#201a2b">Ari</text><text x="95" y="76" font-family="Arial" font-size="25" font-weight="700" fill="#ff3f7f">Shopping</text></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 116" role="img" aria-labelledby="title">
<title id="title">Ari Shopping</title>
<defs><linearGradient id="g" x1="0" x2="1"><stop stop-color="#ff3f86"/><stop offset="1" stop-color="#a139ef"/></linearGradient></defs>
<circle cx="55" cy="58" r="44" fill="#17111c"/>
<text x="55" y="68" text-anchor="middle" font-family="Georgia,serif" font-size="39" font-style="italic" font-weight="700" fill="#fff">ARI</text>
<text x="116" y="56" font-family="Arial,sans-serif" font-size="34" font-weight="850" fill="#211927">Ari Shopping</text>
<text x="117" y="83" font-family="Arial,sans-serif" font-size="15" font-weight="700" letter-spacing="2.6" fill="url(#g)">DETALLES PARA DISFRUTAR</text>
</svg>

Before

Width:  |  Height:  |  Size: 565 B

After

Width:  |  Height:  |  Size: 743 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

File diff suppressed because one or more lines are too long
+18 -9
View File
@@ -1,9 +1,18 @@
id,name,category,price,compare_at_price,description,tags,featured,new,available,stock,image_urls,source_name,source_url id,name,category,collection,description,dimensions,price,available,featured,new,image,source_fbid
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-001-toy-story-5-rex,Toy Story 5 - Rex,Figuras,Toy Story,Toy Story 5 - Rex,,,true,true,true,assets/img/products/ari-001-toy-story-5-rex.webp,18085705364648339
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-002-toy-story-5-buzz-lightyear,Toy Story 5 - Buzz Lightyear,Figuras,Toy Story,Toy Store 5 - Buzz Lightyear,,,true,true,true,assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp,17992282196809499
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-003-toy-story-5-jessie,Toy Story 5 - Jessie,Figuras,Toy Story,Toy Store 5 - Jessie,,,true,true,true,assets/img/products/ari-003-toy-story-5-jessie.webp,18095236400246225
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-004-toy-story-5-woody,Toy Story 5 - Woody,Figuras,Toy Story,Toy Store 5 - Woody,,,true,true,true,assets/img/products/ari-004-toy-story-5-woody.webp,17928025740357011
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-005-intensamente-furia,Intensamente Furia,Peluches,Intensamente,Intensamente Furia Disney Aprox 11 “,Aprox. 11 pulgadas,,true,true,false,assets/img/products/ari-005-intensamente-furia.webp,17872853505541489
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-006-intensamente-tristeza,Intensamente Tristeza,Peluches,Intensamente,Intensamente Tristeza Disney Aprox 11 “,Aprox. 11 pulgadas,,true,true,false,assets/img/products/ari-006-intensamente-tristeza.webp,17869884192555816
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-007-minnie-y-mickey-mouse,Minnie y Mickey Mouse,Peluches,Mickey & Minnie,Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “,Aprox. 15 pulgadas,,true,true,false,assets/img/products/ari-007-minnie-y-mickey-mouse.webp,18116898613530808
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, ari-008-angel-lilo-y-stitch,Angel Lilo y Stitch,Peluches,Lilo & Stitch,Angel Lilo y Stitch Disney Aprox 13 “,Aprox. 13 pulgadas,,true,true,false,assets/img/products/ari-008-angel-lilo-y-stitch.webp,18161192263375119
ari-009-mochilas-disney-coleccion-marvel,Mochilas Disney colección Marvel,Mochilas,Marvel,Mochilas Disney colección Marvel,,,true,false,false,assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp,18137839804491353
ari-010-mochila-ligera-y-resistente-al-agua-de-dis,"Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples ",Mochilas,Frozen,"Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples compartimentos y degradado, mochila de poliéster para estudiantes, tamaño pequeño en color rosa y azul celeste",,,true,false,false,assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-dis.webp,18111649603646835
ari-011-mochila-escolar-de-spider-man-de-disney-mo,"Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila lig",Mochilas,Marvel,"Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila ligera, antibacteriana y transpirable, resistente a salpicaduras, Dimensiones 28x18x30",28 × 18 × 30 cm,,true,false,false,assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-mo.webp,18087568414880256
ari-012-disney-mochila-de-poliester-ultraligera-y-,"Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dime",Mochilas,Disney,"Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimensiones 39x16x46",39 × 16 × 46 cm,,true,false,false,assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-y-.webp,18077075042356897
ari-013-mochila-pequena-bob-esponja,Mochila pequeña Bob Esponja,Mochilas,Bob Esponja,"Mochila pequeña Bob Esponja disponibles en color blanco, negro y verde",,,true,false,false,assets/img/products/ari-013-mochila-pequena-bob-esponja.webp,17891585106407663
ari-014-mochila-casual-de-gran-capacidad-con-estam,"Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos",Mochilas,Bob Esponja,"Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos animados linda, esencial para volver a la escuela Dimensiones 20 cm x 15 cm x 10 cm",20 × 15 × 10 cm,,true,false,false,assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-estam.webp,18119703688604702
ari-015-mochila-escolar-estilo-britanico-de-disney,"Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochil",Mochilas,Disney,"Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de gran capacidad y ultraligera para el inicio del colegio dimensiones 38 cm x 27 cm x 14.5 cm","38 × 27 × 14,5 cm",,true,false,false,assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disney.webp,18558512062005705
ari-016-disney-mochila-iron-man-de-poliester-ultra,"Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46",Mochilas,Marvel,"Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x 33 cm x 19 cm",46 × 33 × 19 cm,,true,false,false,assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ultra.webp,17862794898572444
ari-017-mochila-de-disney-marvel-capitan-america-d,"Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras",Mochilas,Marvel,"Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, para estudiantes de secundaria dimensiones 45 cm x 30 cm x 14 cm",45 × 30 × 14 cm,,true,false,false,assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america-d.webp,17977485617974392
1 id name category collection compare_at_price description dimensions tags price available featured new stock image image_urls source_fbid source_name source_url
2 ari-001 ari-001-toy-story-5-rex Bolso Crossbody Aura Toy Story 5 - Rex Accesorios Figuras Toy Story 109900 Bolso compacto de uso diario con correa ajustable. Toy Story 5 - Rex accesorios|bolso 89900 true true true 9 assets/img/products/ari-001-toy-story-5-rex.webp 18085705364648339 Catálogo inicial Ari Shopping
3 ari-002 ari-002-toy-story-5-buzz-lightyear Set Glow Skincare Toy Story 5 - Buzz Lightyear Belleza Figuras Toy Story 89900 Rutina esencial de cuidado facial para una apariencia luminosa. Toy Store 5 - Buzz Lightyear belleza|set 74900 true true false true 10 assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp 17992282196809499 Catálogo inicial Ari Shopping
4 ari-003 ari-003-toy-story-5-jessie Reloj Minimal Rose Toy Story 5 - Jessie Accesorios Figuras Toy Story 149900 Diseño minimalista con correa suave y detalle metálico. Toy Store 5 - Jessie accesorios|reloj 119900 true false true false true 11 assets/img/products/ari-003-toy-story-5-jessie.webp 18095236400246225 Catálogo inicial Ari Shopping
5 ari-004 ari-004-toy-story-5-woody Audífonos Mini Pods Toy Story 5 - Woody Tecnología Figuras Toy Story 129900 Audífonos inalámbricos con estuche de carga portátil. Toy Store 5 - Woody tecnología|audífonos 99900 true true true 12 assets/img/products/ari-004-toy-story-5-woody.webp 17928025740357011 Catálogo inicial Ari Shopping
6 ari-005 ari-005-intensamente-furia Organizador Vanity Intensamente Furia Hogar Peluches Intensamente 79900 Organizador para maquillaje, accesorios y artículos personales. Intensamente Furia Disney Aprox 11 “ Aprox. 11 pulgadas hogar|organizador 64900 true false true false 13 assets/img/products/ari-005-intensamente-furia.webp 17872853505541489 Catálogo inicial Ari Shopping
7 ari-006 ari-006-intensamente-tristeza Kit Brochas Essential Intensamente Tristeza Belleza Peluches Intensamente 74900 Brochas suaves para una rutina de maquillaje completa. Intensamente Tristeza Disney Aprox 11 “ Aprox. 11 pulgadas belleza|kit 59900 true false true true false 14 assets/img/products/ari-006-intensamente-tristeza.webp 17869884192555816 Catálogo inicial Ari Shopping
8 ari-007 ari-007-minnie-y-mickey-mouse Termo Trend 1.2L Minnie y Mickey Mouse Hogar Peluches Mickey & Minnie 99900 Termo de gran capacidad con tapa, pitillo y asa. Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “ Aprox. 15 pulgadas hogar|termo 84900 true true false 15 assets/img/products/ari-007-minnie-y-mickey-mouse.webp 18116898613530808 Catálogo inicial Ari Shopping
9 ari-008 ari-008-angel-lilo-y-stitch Smart Band Active Angel Lilo y Stitch Tecnología Peluches Lilo & Stitch 139900 Pulsera inteligente para actividad diaria y notificaciones. Angel Lilo y Stitch Disney Aprox 13 “ Aprox. 13 pulgadas tecnología|smart 109900 true true false 16 assets/img/products/ari-008-angel-lilo-y-stitch.webp 18161192263375119 Catálogo inicial Ari Shopping
10 ari-009-mochilas-disney-coleccion-marvel Mochilas Disney colección Marvel Mochilas Marvel Mochilas Disney colección Marvel true false false assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp 18137839804491353
11 ari-010-mochila-ligera-y-resistente-al-agua-de-dis Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples Mochilas Frozen Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples compartimentos y degradado, mochila de poliéster para estudiantes, tamaño pequeño en color rosa y azul celeste true false false assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-dis.webp 18111649603646835
12 ari-011-mochila-escolar-de-spider-man-de-disney-mo Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila lig Mochilas Marvel Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila ligera, antibacteriana y transpirable, resistente a salpicaduras, Dimensiones 28x18x30 28 × 18 × 30 cm true false false assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-mo.webp 18087568414880256
13 ari-012-disney-mochila-de-poliester-ultraligera-y- Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dime Mochilas Disney Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimensiones 39x16x46 39 × 16 × 46 cm true false false assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-y-.webp 18077075042356897
14 ari-013-mochila-pequena-bob-esponja Mochila pequeña Bob Esponja Mochilas Bob Esponja Mochila pequeña Bob Esponja disponibles en color blanco, negro y verde true false false assets/img/products/ari-013-mochila-pequena-bob-esponja.webp 17891585106407663
15 ari-014-mochila-casual-de-gran-capacidad-con-estam Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos Mochilas Bob Esponja Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos animados linda, esencial para volver a la escuela Dimensiones 20 cm x 15 cm x 10 cm 20 × 15 × 10 cm true false false assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-estam.webp 18119703688604702
16 ari-015-mochila-escolar-estilo-britanico-de-disney Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochil Mochilas Disney Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de gran capacidad y ultraligera para el inicio del colegio dimensiones 38 cm x 27 cm x 14.5 cm 38 × 27 × 14,5 cm true false false assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disney.webp 18558512062005705
17 ari-016-disney-mochila-iron-man-de-poliester-ultra Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 Mochilas Marvel Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x 33 cm x 19 cm 46 × 33 × 19 cm true false false assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ultra.webp 17862794898572444
18 ari-017-mochila-de-disney-marvel-capitan-america-d Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras Mochilas Marvel Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, para estudiantes de secundaria dimensiones 45 cm x 30 cm x 14 cm 45 × 30 × 14 cm true false false assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america-d.webp 17977485617974392
@@ -0,0 +1,42 @@
{
"policy": "reference-only",
"note": "Las imágenes externas no están incluidas. Usarlas únicamente con autorización del fabricante o proveedor.",
"sources": [
{
"productMatch": "Toy Story Rex",
"provider": "Mattel",
"url": "https://shop.mattel.com/products/disney-and-pixar-toy-story-rex-action-figure-dinosaur-jkv17",
"use": "Referencia oficial"
},
{
"productMatch": "Toy Story Buzz Lightyear",
"provider": "Mattel",
"url": "https://shop.mattel.com/en-ca/products/disney-and-pixar-toy-story-buzz-lightyear-action-figure-jkv15-en-ca",
"use": "Referencia oficial"
},
{
"productMatch": "Toy Story Jessie",
"provider": "Mattel",
"url": "https://shop.mattel.com/products/disney-and-pixar-toy-story-jessie-action-figure-jkv16",
"use": "Referencia oficial"
},
{
"productMatch": "Toy Story Woody",
"provider": "Mattel",
"url": "https://shop.mattel.com/en-ca/products/disney-and-pixar-toy-story-woody-action-figure-jkv14-en-ca",
"use": "Referencia oficial"
},
{
"productMatch": "Angel Lilo & Stitch",
"provider": "Disney Store",
"url": "https://www.disneystore.com/characters/disney/angel/",
"use": "Confirmar coincidencia exacta"
},
{
"productMatch": "Intensamente Furia y Tristeza",
"provider": "Disney Store",
"url": "https://www.disneystore.com/movies-shows/pixar/inside-out/",
"use": "Confirmar coincidencia exacta"
}
]
}
+356 -148
View File
@@ -1,190 +1,398 @@
{ {
"version": "2.0.0", "version": "2.1.0",
"updatedAt": "2026-07-18T00:00:00-05:00", "updatedAt": "2026-07-19T18:18:43.430634+00:00",
"currency": "COP", "currency": "COP",
"pricingMode": "consult",
"products": [ "products": [
{ {
"id": "ari-001", "id": "ari-001-toy-story-5-rex",
"name": "Bolso Crossbody Aura", "name": "Toy Story 5 - Rex",
"category": "Accesorios", "category": "Figuras",
"price": 89900, "collection": "Toy Story",
"compareAtPrice": 109900, "description": "Toy Story 5 - Rex",
"dimensions": "",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": true, "featured": true,
"new": true, "new": true,
"description": "Bolso compacto de uso diario con correa ajustable.", "stockText": "Disponible para confirmar",
"tags": [
"accesorios",
"bolso"
],
"images": [ "images": [
"assets/img/products/ari-001.svg" "assets/img/products/ari-001-toy-story-5-rex.webp"
], ],
"stock": 9,
"available": true,
"source": { "source": {
"type": "demo", "type": "instagram-export",
"name": "Catálogo inicial Ari Shopping" "account": "ari_shopping1",
"fbid": "18085705364648339",
"capturedAt": "2026-07-16T15:58:50+00:00"
} }
}, },
{ {
"id": "ari-002", "id": "ari-002-toy-story-5-buzz-lightyear",
"name": "Set Glow Skincare", "name": "Toy Story 5 - Buzz Lightyear",
"category": "Belleza", "category": "Figuras",
"price": 74900, "collection": "Toy Story",
"compareAtPrice": 89900, "description": "Toy Store 5 - Buzz Lightyear",
"featured": true, "dimensions": "",
"new": false, "price": null,
"description": "Rutina esencial de cuidado facial para una apariencia luminosa.", "priceText": "Consultar disponibilidad",
"tags": [
"belleza",
"set"
],
"images": [
"assets/img/products/ari-002.svg"
],
"stock": 10,
"available": true, "available": true,
"source": {
"type": "demo",
"name": "Catálogo inicial Ari Shopping"
}
},
{
"id": "ari-003",
"name": "Reloj Minimal Rose",
"category": "Accesorios",
"price": 119900,
"compareAtPrice": 149900,
"featured": false,
"new": false,
"description": "Diseño minimalista con correa suave y detalle metálico.",
"tags": [
"accesorios",
"reloj"
],
"images": [
"assets/img/products/ari-003.svg"
],
"stock": 11,
"available": true,
"source": {
"type": "demo",
"name": "Catálogo inicial Ari Shopping"
}
},
{
"id": "ari-004",
"name": "Audífonos Mini Pods",
"category": "Tecnología",
"price": 99900,
"compareAtPrice": 129900,
"featured": true, "featured": true,
"new": true, "new": true,
"description": "Audífonos inalámbricos con estuche de carga portátil.", "stockText": "Disponible para confirmar",
"tags": [
"tecnología",
"audífonos"
],
"images": [ "images": [
"assets/img/products/ari-004.svg" "assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp"
], ],
"stock": 12,
"available": true,
"source": { "source": {
"type": "demo", "type": "instagram-export",
"name": "Catálogo inicial Ari Shopping" "account": "ari_shopping1",
"fbid": "17992282196809499",
"capturedAt": "2026-06-25T18:02:24+00:00"
} }
}, },
{ {
"id": "ari-005", "id": "ari-003-toy-story-5-jessie",
"name": "Organizador Vanity", "name": "Toy Story 5 - Jessie",
"category": "Hogar", "category": "Figuras",
"price": 64900, "collection": "Toy Story",
"compareAtPrice": 79900, "description": "Toy Store 5 - Jessie",
"featured": false, "dimensions": "",
"new": false, "price": null,
"description": "Organizador para maquillaje, accesorios y artículos personales.", "priceText": "Consultar disponibilidad",
"tags": [
"hogar",
"organizador"
],
"images": [
"assets/img/products/ari-005.svg"
],
"stock": 13,
"available": true, "available": true,
"source": { "featured": true,
"type": "demo",
"name": "Catálogo inicial Ari Shopping"
}
},
{
"id": "ari-006",
"name": "Kit Brochas Essential",
"category": "Belleza",
"price": 59900,
"compareAtPrice": 74900,
"featured": false,
"new": true, "new": true,
"description": "Brochas suaves para una rutina de maquillaje completa.", "stockText": "Disponible para confirmar",
"tags": [
"belleza",
"kit"
],
"images": [ "images": [
"assets/img/products/ari-006.svg" "assets/img/products/ari-003-toy-story-5-jessie.webp"
], ],
"stock": 14,
"available": true,
"source": { "source": {
"type": "demo", "type": "instagram-export",
"name": "Catálogo inicial Ari Shopping" "account": "ari_shopping1",
"fbid": "18095236400246225",
"capturedAt": "2026-06-25T18:01:25+00:00"
} }
}, },
{ {
"id": "ari-007", "id": "ari-004-toy-story-5-woody",
"name": "Termo Trend 1.2L", "name": "Toy Story 5 - Woody",
"category": "Hogar", "category": "Figuras",
"price": 84900, "collection": "Toy Story",
"compareAtPrice": 99900, "description": "Toy Store 5 - Woody",
"featured": true, "dimensions": "",
"new": false, "price": null,
"description": "Termo de gran capacidad con tapa, pitillo y asa.", "priceText": "Consultar disponibilidad",
"tags": [
"hogar",
"termo"
],
"images": [
"assets/img/products/ari-007.svg"
],
"stock": 15,
"available": true, "available": true,
"featured": true,
"new": true,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-004-toy-story-5-woody.webp"
],
"source": { "source": {
"type": "demo", "type": "instagram-export",
"name": "Catálogo inicial Ari Shopping" "account": "ari_shopping1",
"fbid": "17928025740357011",
"capturedAt": "2026-06-25T17:58:48+00:00"
} }
}, },
{ {
"id": "ari-008", "id": "ari-005-intensamente-furia",
"name": "Smart Band Active", "name": "Intensamente Furia",
"category": "Tecnología", "category": "Peluches",
"price": 109900, "collection": "Intensamente",
"compareAtPrice": 139900, "description": "Intensamente Furia Disney Aprox 11 “",
"dimensions": "Aprox. 11 pulgadas",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": true, "featured": true,
"new": false, "new": false,
"description": "Pulsera inteligente para actividad diaria y notificaciones.", "stockText": "Disponible para confirmar",
"tags": [
"tecnología",
"smart"
],
"images": [ "images": [
"assets/img/products/ari-008.svg" "assets/img/products/ari-005-intensamente-furia.webp"
], ],
"stock": 16,
"available": true,
"source": { "source": {
"type": "demo", "type": "instagram-export",
"name": "Catálogo inicial Ari Shopping" "account": "ari_shopping1",
"fbid": "17872853505541489",
"capturedAt": "2026-02-19T17:58:49+00:00"
}
},
{
"id": "ari-006-intensamente-tristeza",
"name": "Intensamente Tristeza",
"category": "Peluches",
"collection": "Intensamente",
"description": "Intensamente Tristeza Disney Aprox 11 “",
"dimensions": "Aprox. 11 pulgadas",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": true,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-006-intensamente-tristeza.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "17869884192555816",
"capturedAt": "2026-02-19T17:57:56+00:00"
}
},
{
"id": "ari-007-minnie-y-mickey-mouse",
"name": "Minnie y Mickey Mouse",
"category": "Peluches",
"collection": "Mickey & Minnie",
"description": "Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “",
"dimensions": "Aprox. 15 pulgadas",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": true,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-007-minnie-y-mickey-mouse.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18116898613530808",
"capturedAt": "2026-02-19T17:55:57+00:00"
}
},
{
"id": "ari-008-angel-lilo-y-stitch",
"name": "Angel Lilo y Stitch",
"category": "Peluches",
"collection": "Lilo & Stitch",
"description": "Angel Lilo y Stitch Disney Aprox 13 “",
"dimensions": "Aprox. 13 pulgadas",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": true,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-008-angel-lilo-y-stitch.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18161192263375119",
"capturedAt": "2026-02-19T17:52:50+00:00"
}
},
{
"id": "ari-009-mochilas-disney-coleccion-marvel",
"name": "Mochilas Disney colección Marvel",
"category": "Mochilas",
"collection": "Marvel",
"description": "Mochilas Disney colección Marvel",
"dimensions": "",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18137839804491353",
"capturedAt": "2026-01-29T03:07:00+00:00"
}
},
{
"id": "ari-010-mochila-ligera-y-resistente-al-agua-de-dis",
"name": "Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples ",
"category": "Mochilas",
"collection": "Frozen",
"description": "Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples compartimentos y degradado, mochila de poliéster para estudiantes, tamaño pequeño en color rosa y azul celeste",
"dimensions": "",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-dis.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18111649603646835",
"capturedAt": "2026-01-28T22:41:44+00:00"
}
},
{
"id": "ari-011-mochila-escolar-de-spider-man-de-disney-mo",
"name": "Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila lig",
"category": "Mochilas",
"collection": "Marvel",
"description": "Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila ligera, antibacteriana y transpirable, resistente a salpicaduras, Dimensiones 28x18x30",
"dimensions": "28 × 18 × 30 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-mo.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18087568414880256",
"capturedAt": "2026-01-28T22:40:27+00:00"
}
},
{
"id": "ari-012-disney-mochila-de-poliester-ultraligera-y-",
"name": "Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dime",
"category": "Mochilas",
"collection": "Disney",
"description": "Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimensiones 39x16x46",
"dimensions": "39 × 16 × 46 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-y-.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18077075042356897",
"capturedAt": "2026-01-28T22:39:36+00:00"
}
},
{
"id": "ari-013-mochila-pequena-bob-esponja",
"name": "Mochila pequeña Bob Esponja",
"category": "Mochilas",
"collection": "Bob Esponja",
"description": "Mochila pequeña Bob Esponja disponibles en color blanco, negro y verde",
"dimensions": "",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-013-mochila-pequena-bob-esponja.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "17891585106407663",
"capturedAt": "2026-01-26T21:29:12+00:00"
}
},
{
"id": "ari-014-mochila-casual-de-gran-capacidad-con-estam",
"name": "Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos",
"category": "Mochilas",
"collection": "Bob Esponja",
"description": "Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos animados linda, esencial para volver a la escuela Dimensiones 20 cm x 15 cm x 10 cm",
"dimensions": "20 × 15 × 10 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-estam.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18119703688604702",
"capturedAt": "2026-01-26T01:33:29+00:00"
}
},
{
"id": "ari-015-mochila-escolar-estilo-britanico-de-disney",
"name": "Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochil",
"category": "Mochilas",
"collection": "Disney",
"description": "Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de gran capacidad y ultraligera para el inicio del colegio dimensiones 38 cm x 27 cm x 14.5 cm",
"dimensions": "38 × 27 × 14,5 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disney.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "18558512062005705",
"capturedAt": "2026-01-26T01:32:17+00:00"
}
},
{
"id": "ari-016-disney-mochila-iron-man-de-poliester-ultra",
"name": "Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46",
"category": "Mochilas",
"collection": "Marvel",
"description": "Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x 33 cm x 19 cm",
"dimensions": "46 × 33 × 19 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ultra.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "17862794898572444",
"capturedAt": "2026-01-26T01:27:38+00:00"
}
},
{
"id": "ari-017-mochila-de-disney-marvel-capitan-america-d",
"name": "Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras",
"category": "Mochilas",
"collection": "Marvel",
"description": "Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, para estudiantes de secundaria dimensiones 45 cm x 30 cm x 14 cm",
"dimensions": "45 × 30 × 14 cm",
"price": null,
"priceText": "Consultar disponibilidad",
"available": true,
"featured": false,
"new": false,
"stockText": "Disponible para confirmar",
"images": [
"assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america-d.webp"
],
"source": {
"type": "instagram-export",
"account": "ari_shopping1",
"fbid": "17977485617974392",
"capturedAt": "2026-01-26T01:24:48+00:00"
} }
} }
] ]
+9 -5
View File
@@ -1,10 +1,14 @@
{ {
"version": "2.0.0", "version": "2.1.0",
"brand": "Ari Shopping", "brand": "Ari Shopping",
"tagline": "Detalles que enamoran, compras que disfrutas.", "tagline": "Variedad de productos y marcas en un solo lugar.",
"instagramUrl": "https://www.instagram.com/ari_shopping1/", "instagramUrl": "https://www.instagram.com/ari_shopping1/",
"whatsappNumber": "", "facebookUrl": "https://www.facebook.com/arishopping1imp/",
"locale": "es-CO", "whatsappUrl": "https://wa.link/rvcqqc",
"deliveryText": "Envíos seguros",
"paymentText": "Pagos fáciles",
"supportText": "Atención personalizada",
"catalogUrl": "data/products.json",
"currency": "COP", "currency": "COP",
"catalogUrl": "data/products.json" "locale": "es-CO"
} }
+76 -11
View File
@@ -1,11 +1,76 @@
<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ff3f7f"><meta name="description" content="Ari Shopping, productos seleccionados y compras fáciles desde Colombia."><title>Ari Shopping</title><link rel="icon" href="assets/img/brand/favicon.svg"><link rel="stylesheet" href="assets/css/styles.css"><script defer src="assets/js/app.js"></script></head><body> <!doctype html>
<div class="announcement">Envíos nacionales · Atención personalizada · Precios en COP</div> <html lang="es">
<header><div class="shell head"><a href="#inicio"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"></a><label class="search"><span></span><input id="search" type="search" placeholder="Busca productos o categorías"></label><a class="ig" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Instagram</a><button id="cartOpen" class="cart">Carrito <b id="cartCount">0</b></button></div></header> <head>
<main id="inicio"><section class="hero shell"><div><span class="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><div class="heroActions"><a class="btn primary" href="#catalogo">Ver productos</a><a class="btn ghost" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Seguir en Instagram</a></div></div><div class="art"><div><small>Nuevos favoritos</small><strong>Estilo para cada momento</strong><span>Desde $59.900</span></div></div></section> <meta charset="utf-8">
<section class="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> <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<section id="catalogo" class="catalog shell"><div class="sectionTitle"><div><span class="eyebrow">Catálogo dinámico</span><h2>Productos para descubrir</h2><p id="summary">Cargando catálogo...</p></div><select id="sort"><option value="featured">Destacados</option><option value="new">Nuevos</option><option value="asc">Precio: menor</option><option value="desc">Precio: mayor</option></select></div><div id="categories" class="categories"></div><div id="grid" class="grid"></div><div id="empty" class="empty" hidden>No encontramos productos.</div></section> <meta name="theme-color" content="#ff3f86">
<section class="instagram"><div class="shell"><div><span class="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="btn light" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">@ari_shopping1</a></div></section></main> <meta name="description" content="Ari Shopping: juguetes, peluches, mochilas y regalos con atención personalizada.">
<footer><div class="shell foot"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"><p>Detalles que enamoran, compras que disfrutas.</p><span>Frontend v2.0.0</span></div></footer> <title>Ari Shopping</title>
<div id="overlay" class="overlay" hidden></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><div><small>Tu selección</small><h2>Carrito</h2></div><button id="cartClose">×</button></div><div id="cartItems" class="drawerBody"></div><div class="drawerFoot"><div><span>Total estimado</span><strong id="cartTotal">$0</strong></div><button id="checkout" class="btn primary full">Enviar pedido</button><button id="clearCart" class="link">Vaciar carrito</button><small>Precio y disponibilidad se confirman antes del pago.</small></div></aside><div id="toast" class="toast" hidden></div> <link rel="icon" href="assets/img/brand/favicon.svg" type="image/svg+xml">
<template id="card"><article class="card"><div class="media"><div class="badges"></div><button class="wish" aria-label="Favorito"></button><img loading="lazy"></div><div class="body"><small class="category"></small><h3></h3><div class="price"><strong></strong><del></del></div><p></p><button class="btn primary add">Agregar</button></div></article></template> <link rel="stylesheet" href="assets/css/styles.css">
</body></html> <script defer src="assets/js/app.js"></script>
</head>
<body>
<a class="skip-link" href="#productos">Ir a productos</a>
<div class="announcement"><span>Envíos seguros</span><strong>Atención personalizada</strong><span>Pedidos por WhatsApp</span></div>
<header class="site-header">
<div class="header-shell shell">
<a class="brand" href="#inicio"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"></a>
<nav class="main-nav" aria-label="Categorías">
<button type="button" data-nav-category="Todos">Todos</button>
<button type="button" data-nav-category="Figuras">Lo nuevo</button>
<button type="button" data-nav-collection="Toy Story">Toy Story</button>
<button type="button" data-nav-category="Peluches">Peluches</button>
<button type="button" data-nav-category="Mochilas">Mochilas</button>
<button type="button" data-nav-collection="Marvel">Marvel</button>
</nav>
<div class="header-actions">
<button class="search-open" id="searchOpen" type="button" aria-label="Buscar"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg></button>
<button class="cart-button" id="cartButton" type="button"><span>Carrito</span><strong id="cartCount">0</strong></button>
</div>
</div>
<form class="search-panel shell" id="searchPanel" hidden>
<label for="searchInput">¿Qué estás buscando?</label>
<div><input id="searchInput" type="search" placeholder="Rex, Stitch, mochila Marvel..."><button type="button" id="searchClose">Cerrar</button></div>
</form>
</header>
<main id="inicio">
<section class="hero shell">
<div class="hero-copy">
<span class="eyebrow">Nueva colección</span>
<h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1>
<p>Juguetes, personajes, peluches y mochilas seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p>
<div class="hero-actions"><a class="button primary" href="#productos">Explorar productos</a><a class="button text" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Ver Instagram</a></div>
</div>
<div class="hero-image"><img src="assets/img/hero/hero-products.webp" alt="Productos Toy Story de Ari Shopping"><span class="hero-note">Productos reales de Ari Shopping</span></div>
</section>
<section class="service-strip shell">
<article><i></i><div><strong>Envíos seguros</strong><span>Coordina tu entrega con nosotros.</span></div></article>
<article><i></i><div><strong>Pagos fáciles</strong><span>Confirma disponibilidad antes de pagar.</span></div></article>
<article><i></i><div><strong>Atención cercana</strong><span>Te ayudamos a elegir el producto ideal.</span></div></article>
</section>
<section class="category-section shell">
<div class="section-heading"><div><span class="eyebrow">Explora la tienda</span><h2>Compra por categoría</h2><p>Encuentra rápidamente lo que estás buscando.</p></div><a href="#productos">Ver todo →</a></div>
<div class="category-grid">
<button class="category-card" data-category="Figuras" style="--image:url('../img/categories/figuras.webp')"><span>Figuras</span><small>Toy Story y personajes</small></button>
<button class="category-card" data-category="Peluches" style="--image:url('../img/categories/peluches.webp')"><span>Peluches</span><small>Personajes para regalar</small></button>
<button class="category-card" data-category="Mochilas" style="--image:url('../img/categories/mochilas.webp')"><span>Mochilas</span><small>Escolares y casuales</small></button>
<button class="category-card" data-collection="Marvel" style="--image:url('../img/categories/marvel.webp')"><span>Marvel</span><small>Diseños con personalidad</small></button>
</div>
</section>
<section class="products-section shell" id="productos">
<div class="section-heading products-heading"><div><span class="eyebrow">Catálogo real</span><h2>Productos destacados</h2><p id="catalogSummary">Cargando productos...</p></div><a id="availabilityLink" href="https://wa.link/rvcqqc" target="_blank" rel="noopener">Consultar disponibilidad →</a></div>
<div class="product-toolbar"><div class="filter-chips" id="filterChips"></div><select id="sortSelect"><option value="featured">Destacados</option><option value="newest">Más recientes</option><option value="name">Nombre</option></select></div>
<div class="product-grid" id="productGrid" aria-live="polite"></div>
<div class="empty-state" id="emptyState" hidden><strong>No encontramos productos</strong><p>Prueba con otra categoría o búsqueda.</p><button class="button primary" id="resetButton" type="button">Ver todos</button></div>
</section>
<section class="social-band"><div class="shell"><div><span class="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="button white" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">@ari_shopping1</a></div></section>
</main>
<footer><div class="shell footer-main"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"><p>Detalles que emocionan, compras que disfrutas.</p><span>Frontend v2.1.0</span></div></footer>
<div class="overlay" id="overlay" hidden></div>
<aside class="cart-drawer" id="cartDrawer" aria-hidden="true"><header><div><span class="eyebrow">Tu selección</span><h2>Pedido</h2></div><button id="cartClose">×</button></header><div class="cart-items" id="cartItems"></div><footer class="cart-footer"><button class="button primary full" id="checkoutButton">Enviar por WhatsApp</button><button class="clear-cart" id="clearCart">Vaciar selección</button><small>Precio y disponibilidad se confirman directamente con Ari Shopping.</small></footer></aside>
<dialog id="productDialog"><button class="dialog-close" id="dialogClose">×</button><div id="dialogContent"></div></dialog>
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
<template id="productTemplate"><article class="product-card"><button class="product-image product-open" type="button"><img loading="lazy" alt=""></button><div class="product-info"><div class="product-meta"><span class="product-category"></span><span class="product-collection"></span></div><button class="product-name product-open" type="button"></button><p class="product-description"></p><div class="product-bottom"><strong>Consultar</strong><button class="add-button" type="button">Agregar</button></div></div></article></template>
</body>
</html>
+25 -32
View File
@@ -1,36 +1,29 @@
#!/usr/bin/env python3 #!/usr/bin/env python3
from __future__ import annotations from __future__ import annotations
import argparse,csv,hashlib,io,json,re,sys,urllib.request import csv, json
from datetime import datetime,timezone from datetime import datetime, timezone
from pathlib import Path from pathlib import Path
try: ROOT=Path(__file__).resolve().parents[1]
from PIL import Image,ImageOps SOURCE=ROOT/'catalog-source.csv'
except ImportError: OUTPUT=ROOT/'data/products.json'
Image=ImageOps=None def boolean(v:str)->bool:return str(v).strip().lower() in {'1','true','yes','si',''}
ROOT=Path(__file__).resolve().parents[1];OUT=ROOT/'data/products.json';IMG=ROOT/'assets/img/products' def main()->int:
def b(v,d=False): return str(v or '').strip().lower() in {'1','true','yes','si',''} if str(v or '').strip() else d products=[]
def n(v,d=0): with SOURCE.open(newline='',encoding='utf-8-sig') as handle:
try:return int(float(str(v or '').strip())) for row in csv.DictReader(handle):
except:return d raw=(row.get('price') or '').strip()
def slug(v):return re.sub(r'[^a-zA-Z0-9_-]+','-',v.strip()).strip('-').lower() or hashlib.sha256(v.encode()).hexdigest()[:12] price=int(float(raw)) if raw else None
def download(url): products.append({
req=urllib.request.Request(url,headers={'User-Agent':'AriShoppingCatalogSync/2.0'});data=urllib.request.urlopen(req,timeout=25).read(12*1024*1024+1) 'id':row['id'].strip(),'name':row['name'].strip(),
if len(data)>12*1024*1024:raise ValueError('Imagen demasiado grande') 'category':row['category'].strip(),'collection':row['collection'].strip(),
return data 'description':row['description'].strip(),'dimensions':row['dimensions'].strip(),
def image(data,dst): 'price':price,'priceText':'Consultar disponibilidad' if price is None else '',
if Image is None:raise RuntimeError('Instala Pillow') 'available':boolean(row['available']),'featured':boolean(row['featured']),
im=ImageOps.exif_transpose(Image.open(io.BytesIO(data))).convert('RGB');canvas=Image.new('RGB',(1200,1200),'white');im.thumbnail((1080,1080),Image.Resampling.LANCZOS);canvas.paste(im,((1200-im.width)//2,(1200-im.height)//2));canvas.save(dst,'WEBP',quality=86,method=6) 'new':boolean(row['new']),'stockText':'Disponible para confirmar',
def main(): 'images':[row['image'].strip()],
ap=argparse.ArgumentParser();ap.add_argument('--source',type=Path,default=ROOT/'catalog-source.csv');ap.add_argument('--download-images',action='store_true');a=ap.parse_args();items=[] 'source':{'type':'instagram-export','account':'ari_shopping1','fbid':row['source_fbid'].strip()}
with a.source.open(encoding='utf-8-sig') as f: })
for row in csv.DictReader(f): OUTPUT.write_text(json.dumps({'version':'2.1.0','updatedAt':datetime.now(timezone.utc).isoformat(),'currency':'COP','pricingMode':'consult','products':products},ensure_ascii=False,indent=2)+'\n',encoding='utf-8')
pid=slug(row.get('id') or row['name']);imgs=[];urls=[u.strip() for u in row.get('image_urls','').split('|') if u.strip()] print(f'OK: {len(products)} productos escritos en {OUTPUT}')
if a.download_images: return 0
for i,u in enumerate(urls,1):
try:dst=IMG/f'{pid}-{i}.webp';image(download(u),dst);imgs.append(str(dst.relative_to(ROOT)).replace('\\','/'))
except Exception as e:print(f'AVISO {pid}: {e}',file=sys.stderr)
if not imgs:
local=IMG/f'{pid}.svg';imgs=[str(local.relative_to(ROOT)).replace('\\','/')] if local.exists() else urls
items.append({'id':pid,'name':row['name'].strip(),'category':row.get('category','Otros').strip(),'price':n(row.get('price')),'compareAtPrice':n(row.get('compare_at_price')),'featured':b(row.get('featured')),'new':b(row.get('new')),'description':row.get('description','').strip(),'tags':[t.strip() for t in row.get('tags','').split('|') if t.strip()],'images':imgs,'stock':n(row.get('stock')),'available':b(row.get('available'),True),'source':{'type':'authorized-feed','name':row.get('source_name','Fuente autorizada'),'url':row.get('source_url','')}})
OUT.write_text(json.dumps({'version':'2.0.0','updatedAt':datetime.now(timezone.utc).isoformat(),'currency':'COP','products':items},ensure_ascii=False,indent=2)+'\n');print(f'OK: {len(items)} productos')
if __name__=='__main__':raise SystemExit(main()) if __name__=='__main__':raise SystemExit(main())