feat(ecommerce): release Ari Shopping Frontend v2.1 real catalog
Build and Push Frontend / build (push) Successful in 2m30s
@@ -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
|
|
||||||
```
|
|
||||||
|
|||||||
|
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 |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 308 KiB |
|
After Width: | Height: | Size: 321 KiB |
|
After Width: | Height: | Size: 305 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 457 KiB |
|
After Width: | Height: | Size: 390 KiB |
|
After Width: | Height: | Size: 521 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 69 KiB |
@@ -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
|
||||||
|
|||||||
|
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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','sí'}
|
||||||
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','sí'} 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())
|
||||||
|
|||||||