feat(ecommerce): release Ari Shopping Frontend v2
Build and Push Frontend / build (push) Successful in 1m57s
Build and Push Frontend / build (push) Successful in 1m57s
This commit is contained in:
devops committed
1 parent
9f25b17468
commit
54d2f208ae
25 files changed
+376
-566
No files matched your search
@@ -0,0 +1,4 @@
|
||||
.git
|
||||
tools/
|
||||
catalog-source.csv
|
||||
README.md
|
||||
@@ -1,13 +1,5 @@
|
||||
# Usamos una imagen de Nginx basada en Alpine para que sea extremadamente ligera
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copiamos tus archivos estáticos (o el build de tu frontend) a la carpeta que sirve Nginx
|
||||
# Asumimos que tus archivos están en una carpeta llamada 'dist' o 'build' tras compilar.
|
||||
# Si solo son archivos HTML/CSS/JS, puedes copiar el contenido directamente desde '.'
|
||||
FROM nginx:1.27-alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY . /usr/share/nginx/html
|
||||
|
||||
# Exponemos el puerto 80 por defecto
|
||||
EXPOSE 80
|
||||
|
||||
# Comando para ejecutar Nginx en modo 'daemon off' para que el contenedor no se detenga
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/healthz || exit 1
|
||||
@@ -1,17 +1,52 @@
|
||||
# Ari Shopping Front v1
|
||||
# Ari Shopping Frontend v2
|
||||
|
||||
Frontend estático responsive para la primera etapa de la tienda online.
|
||||
Frontend profesional y dinámico para `apps-registry/workloads/ecommerce/`.
|
||||
|
||||
## Incluye
|
||||
- Home profesional y responsive
|
||||
- Buscador y filtros por categoría
|
||||
- Catálogo demostrativo
|
||||
- Carrito lateral en el navegador
|
||||
- Integración inicial con Instagram
|
||||
- Base preparada para consumir APIs de microservicios
|
||||
- Home responsive.
|
||||
- Catálogo JSON con búsqueda, categorías y ordenamiento.
|
||||
- Favoritos y carrito persistentes.
|
||||
- Pedido por WhatsApp o fallback a Instagram.
|
||||
- Nginx con `/healthz`.
|
||||
- CSV -> JSON -> WebP automático.
|
||||
- Workflow diario opcional para Gitea Actions.
|
||||
|
||||
## Despliegue en el laboratorio
|
||||
Reemplaza `workloads/ecommerce/index.html` con el `index.html` incluido. El pipeline actual construirá la imagen, actualizará el manifiesto GitOps y validará el tag desplegado.
|
||||
## Configuración
|
||||
Edita `workloads/ecommerce/data/store.json` y configura:
|
||||
```json
|
||||
"whatsappNumber": "57XXXXXXXXXX"
|
||||
```
|
||||
|
||||
## Antes de producción
|
||||
Se deben incorporar logo oficial, fotos y precios reales, inventario, número de WhatsApp, políticas comerciales y servicios de catálogo, inventario, carrito, pedidos, pagos y clientes.
|
||||
## 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
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
:root{--ink:#241b2d;--muted:#746a7a;--pink:#ff3f7f;--purple:#7c3aed;--soft:#f8f4f8;--line:#e9e1eb;--shadow:0 20px 55px rgba(47,28,55,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}body.lock{overflow:hidden}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.shell{width:min(calc(100% - 32px),1240px);margin:auto}.announcement{padding:9px;text-align:center;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));font-size:13px}header{position:sticky;top:0;z-index:20;background:#ffffffed;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.head{min-height:84px;display:grid;grid-template-columns:190px 1fr auto auto;gap:18px;align-items:center}.head img{width:175px}.search{display:flex;align-items:center;gap:9px;padding:0 16px;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--soft)}.search input{width:100%;border:0;outline:0;background:transparent}.ig,.cart{padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:#fff}.cart{cursor:pointer}.cart b{display:inline-grid;place-items:center;min-width:23px;height:23px;margin-left:6px;border-radius:50%;color:#fff;background:var(--ink)}.hero{min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:70px 0}.eyebrow{color:#d91f60;font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:15px 0 20px;font-size:clamp(48px,6.4vw,82px);line-height:.98;letter-spacing:-.055em}.hero p{max-width:650px;color:var(--muted);font-size:18px;line-height:1.7}.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:0 20px;border:0;border-radius:999px;font-weight:800;cursor:pointer}.primary{color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 12px 27px #ff3f7f38}.ghost{background:var(--soft);border:1px solid var(--line)}.light{background:#fff}.art{min-height:480px;display:grid;place-items:center;border-radius:42px;background:radial-gradient(circle at 75% 18%,#fff,transparent 25%),linear-gradient(135deg,#ffd8e7,#e8ddff 55%,#cef6ed);box-shadow:var(--shadow)}.art>div{width:70%;padding:38px;border:1px solid #ffffffb0;border-radius:32px;background:#ffffffb5;transform:rotate(-6deg);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.art small,.art span{display:block;color:var(--muted)}.art strong{display:block;margin:12px 0 28px;font-size:42px;line-height:1.02}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:100px}.benefits article{display:flex;gap:14px;padding:24px;border:1px solid var(--line);border-radius:22px}.benefits b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--ink)}.benefits span strong,.benefits span small{display:block}.benefits span small{margin-top:5px;color:var(--muted)}.catalog{padding-bottom:110px}.sectionTitle{display:flex;justify-content:space-between;align-items:end;gap:24px}.sectionTitle h2,.instagram h2{margin:8px 0;font-size:clamp(34px,4vw,52px);letter-spacing:-.04em}.sectionTitle p{color:var(--muted)}.sectionTitle select{min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff}.categories{display:flex;gap:9px;overflow:auto;padding:18px 0 24px}.chip{flex:0 0 auto;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.chip.active{color:#fff;background:var(--ink)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.media{position:relative;aspect-ratio:1;background:var(--soft);overflow:hidden}.media img{width:100%;height:100%;object-fit:cover}.badges{position:absolute;z-index:2;top:12px;left:12px;display:flex;gap:5px}.badge{padding:6px 9px;border-radius:999px;color:#fff;background:var(--purple);font-size:10px;font-weight:850}.badge.sale{background:var(--pink)}.wish{position:absolute;z-index:2;right:12px;top:12px;width:40px;height:40px;border:1px solid #fff;border-radius:50%;background:#ffffffd9;font-size:23px;cursor:pointer}.wish.active{color:var(--pink)}.body{padding:18px}.body>.category{color:var(--muted);font-weight:700}.body h3{margin:8px 0;font-size:17px}.body p{min-height:42px;color:var(--muted);font-size:13px;line-height:1.55}.price{display:flex;align-items:baseline;gap:8px}.price strong{font-size:20px}.price del{color:#9e929f;font-size:13px}.body .add{width:100%;margin-top:15px}.empty{padding:60px;text-align:center;border:1px dashed var(--line);border-radius:22px;background:var(--soft)}.instagram{padding:80px 0;color:#fff;background:linear-gradient(110deg,#24152b,#6d1a55,#4a2b85)}.instagram>.shell{display:flex;Line truncated
|
||||
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr 1fr}.head{grid-template-columns:160px 1fr auto}.ig{display:none}.benefits{grid-template-columns:1fr}}
|
||||
@media(max-width:760px){.head{grid-template-columns:1fr auto;padding:10px 0}.head img{width:150px}.search{grid-column:1/-1;grid-row:2}.hero{grid-template-columns:1fr;padding:50px 0}.art{min-height:360px}.grid{grid-template-columns:repeat(2,1fr)}.sectionTitle{align-items:stretch;flex-direction:column}.instagram>.shell,.foot{align-items:flex-start;flex-direction:column}}
|
||||
@media(max-width:480px){.shell{width:min(calc(100% - 22px),1240px)}.hero h1{font-size:48px}.art>div{width:80%;padding:26px}.art strong{font-size:34px}.grid{gap:10px}.body{padding:13px}.body h3{font-size:14px}.body p{display:none}.price strong{font-size:16px}.foot img{width:150px}}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="g"><stop stop-color="#ff3f7f"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs><rect width="64" height="64" rx="18" fill="url(#g)"/><path d="M15 48 28 16h8l14 32H39l-3-8H27l-3 8Zm15-17h4l-2-6Z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 314 B |
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 565 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#f8b4c8"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#7c3aed" opacity=".1"/><g fill="none" stroke="#7c3aed" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M135 130h130l15 140H120l15-140Zm25 10c0-42 80-42 80 0"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Bolso Crossbody Aura</text></svg>
|
||||
|
After Width: | Height: | Size: 619 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#f7d6bf"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#ff3f7f" opacity=".1"/><g fill="none" stroke="#ff3f7f" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M155 105h90v175h-90zM175 105V72h50v33M175 175h50"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Set Glow Skincare</text></svg>
|
||||
|
After Width: | Height: | Size: 611 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#f1d2d9"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#9f1239" opacity=".1"/><g fill="none" stroke="#9f1239" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M145 110h110v150H145zM200 185v-25m0 25 22 16"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Reloj Minimal Rose</text></svg>
|
||||
|
After Width: | Height: | Size: 608 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#d7ddff"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#4f46e5" opacity=".1"/><g fill="none" stroke="#4f46e5" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M126 155h148v115H126zM155 125v66m90-66v66"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Audífonos Mini Pods</text></svg>
|
||||
|
After Width: | Height: | Size: 607 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#d8f3ea"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#0f766e" opacity=".1"/><g fill="none" stroke="#0f766e" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M115 125h170v150H115zM115 180h170M170 125v150M230 125v150"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Organizador Vanity</text></svg>
|
||||
|
After Width: | Height: | Size: 621 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#ffe0ef"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#be185d" opacity=".1"/><g fill="none" stroke="#be185d" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M145 275 205 110m-15 165 70-165"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Kit Brochas Essential</text></svg>
|
||||
|
After Width: | Height: | Size: 598 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#d7f4ff"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#0369a1" opacity=".1"/><g fill="none" stroke="#0369a1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M145 105h110l-15 175h-80zM165 105V75h90"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Termo Trend 1.2L</text></svg>
|
||||
|
After Width: | Height: | Size: 601 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><linearGradient id="b" x2="1" y2="1"><stop stop-color="#dfe7ef"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><rect width="400" height="400" rx="42" fill="url(#b)"/><circle cx="320" cy="80" r="90" fill="#334155" opacity=".1"/><g fill="none" stroke="#334155" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"> <path d="M165 68h70v264h-70zM150 122h100v156H150z"/></g><text x="200" y="352" text-anchor="middle" font-family="Arial" font-size="19" font-weight="700" fill="#2b2131">Smart Band Active</text></svg>
|
||||
|
After Width: | Height: | Size: 603 B |
@@ -0,0 +1 @@
|
||||
(()=>{"use strict";const $=(s,r=document)=>r.querySelector(s),$$=(s,r=document)=>[...r.querySelectorAll(s)];const S={products:[],store:null,category:"Todos",query:"",sort:"featured",cart:JSON.parse(localStorage.getItem("ari-cart-v2")||"{}"),wish:JSON.parse(localStorage.getItem("ari-wish-v2")||"[]")};const E={grid:$("#grid"),cat:$("#categories"),search:$("#search"),sort:$("#sort"),summary:$("#summary"),empty:$("#empty"),drawer:$("#drawer"),overlay:$("#overlay"),items:$("#cartItems"),count:$("#cartCount"),total:$("#cartTotal"),toast:$("#toast"),card:$("#card")};const money=v=>new Intl.NumberFormat(S.store?.locale||"es-CO",{style:"currency",currency:S.store?.currency||"COP",maximumFractionDigits:0}).format(v);const norm=v=>String(v||"").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");const p=id=>S.products.find(x=>x.id===id);function save(){localStorage.setItem("ari-cart-v2",JSON.stringify(S.cart));localStorage.setItem("ari-wish-v2",JSON.stringify(S.wish))}function toast(m){E.toast.textContent=m;E.toast.hidden=false;setTimeout(()=>E.toast.hidden=true,2600)}function categories(){E.cat.innerHTML=["Todos",...new Set(S.products.map(x=>x.category))].map(x=>`<button class="chip ${S.category===x?"active":""}" data-c="${x}">${x}</button>`).join("")}function list(){let q=norm(S.query),a=S.products.filter(x=>x.available!==false&&(S.category==="Todos"||x.category===S.category)&&(!q||norm([x.name,x.category,x.description,...(x.tags||[])].join(" ")).includes(q)));a.sort((x,y)=>S.sort==="asc"?x.price-y.price:S.sort==="desc"?y.price-x.price:S.sort==="new"?Number(y.new)-Number(x.new):Number(y.featured)-Number(x.featured));return a}function render(){let a=list();E.grid.innerHTML="";E.summary.textContent=`${a.length} producto${a.length===1?"":"s"} disponible${a.length===1?"":"s"}`;E.empty.hidden=!!a.length;a.forEach(x=>{let f=E.card.content.cloneNode(true),c=$(".card",f),img=$("img",f),w=$(".wish",f);img.src=x.images?.[0]||"assets/img/brand/favicon.svg";img.alt=x.name;$(".category",f).textContent=x.category;$("h3",f).textContent=x.name;$(".price strong",f).textContent=money(x.price);let d=$(".price del",f);x.compareAtPrice>x.price?d.textContent=money(x.compareAtPrice):d.remove();$(".body p",f).textContent=x.description;if(x.new)$(".badges",f).insertAdjacentHTML("beforeend",'<span class="badge">Nuevo</span>');if(x.compareAtPrice>x.price)$(".badges",f).insertAdjacentHTML("beforeend",`<span class="badge sale">-${Math.round((1-x.price/x.compareAtPrice)*100)}%</span>`);w.classList.toggle("active",S.wish.includes(x.id));w.textContent=S.wish.includes(x.id)?"♥":"♡";w.onclick=()=>{S.wish=S.wish.includes(x.id)?S.wish.filter(i=>i!==x.id):[...S.wish,x.id];save();render();toast(S.wish.includes(x.id)?"Guardado en favoritos":"Eliminado de favoritos")};$(".add",f).onclick=()=>add(x.id);E.grid.append(f)});cart()}function add(id){S.cart[id]=(S.cart[id]||0)+1;save();cart();toast(`${p(id).name} agregado`)}function cart(){let a=Object.entries(S.cart).map(([id,q])=>({x:p(id),q})).filter(i=>i.x),n=a.reduce((s,i)=>s+i.q,0),t=a.reduce((s,i)=>s+i.x.price*i.q,0);E.count.textContent=n;E.total.textContent=money(t);E.items.innerHTML=a.length?a.map(i=>`<article class="line" data-id="${i.x.id}"><img src="${i.x.images[0]}" alt=""><div><strong>${i.x.name}</strong><small>${money(i.x.price)}</small><div class="qty"><button data-d="-1">−</button><span>${i.q}</span><button data-d="1">+</button></div></div><button class="remove">×</button></article>`).join(""):'<div class="drawerEmpty">Tu carrito está vacío.</div>';$$('[data-d]',E.items).forEach(b=>b.onclick=()=>{let id=b.closest('[data-id]').dataset.id;S.cart[id]+=Number(b.dataset.d);if(S.cart[id]<=0)delete S.cart[id];save();cart()});$$('.remove',E.items).forEach(b=>b.onclick=()=>{delete S.cart[b.closest('[data-id]').dataset.id];save();cart()})}function open(){E.drawer.classList.add("open");E.overlay.hidden=false;document.body.classList.add("lock")}function close(){E.drawer.classList.remove("open");E.overlay.hidden=true;document.body.classList.remove("lock")}function order(){let a=Object.entries(S.cart).map(([id,q])=>({x:p(id),q})).filter(i=>i.x);if(!a.length)return;let total=a.reduce((s,i)=>s+i.x.price*i.q,0),m=[`Hola ${S.store.brand} 👋`,`Quiero confirmar disponibilidad:`,"",...a.map(i=>`• ${i.q} x ${i.x.name} — ${money(i.x.price*i.q)}`),"",`Total estimado: ${money(total)}`,"","Nombre:","Ciudad:"].join("\n"),num=String(S.store.whatsappNumber||"").replace(/\D/g,"");if(num)window.open(`https://wa.me/${num}?text=${encodeURIComponent(m)}`,"_blank");else navigator.clipboard.writeText(m).then(()=>toast("Pedido copiado. Configura WhatsApp en data/store.json"))}async function init(){let [st,pr]=await Promise.all([fetch("data/store.json",{cache:"no-store"}).then(r=>r.json()),fetch("data/products.json",{cache:"no-store"}).then(r=>r.json())]);S.store=st;S.products=pr.products||[];categories();render()}E.search.oninput=e=>{S.query=e.target.value;render()};E.sort.onchange=e=>{S.sort=e.target.valuLine truncated
|
||||
@@ -0,0 +1,9 @@
|
||||
id,name,category,price,compare_at_price,description,tags,featured,new,available,stock,image_urls,source_name,source_url
|
||||
ari-001,Bolso Crossbody Aura,Accesorios,89900,109900,Bolso compacto de uso diario con correa ajustable.,accesorios|bolso,true,true,true,9,,Catálogo inicial Ari Shopping,
|
||||
ari-002,Set Glow Skincare,Belleza,74900,89900,Rutina esencial de cuidado facial para una apariencia luminosa.,belleza|set,true,false,true,10,,Catálogo inicial Ari Shopping,
|
||||
ari-003,Reloj Minimal Rose,Accesorios,119900,149900,Diseño minimalista con correa suave y detalle metálico.,accesorios|reloj,false,false,true,11,,Catálogo inicial Ari Shopping,
|
||||
ari-004,Audífonos Mini Pods,Tecnología,99900,129900,Audífonos inalámbricos con estuche de carga portátil.,tecnología|audífonos,true,true,true,12,,Catálogo inicial Ari Shopping,
|
||||
ari-005,Organizador Vanity,Hogar,64900,79900,"Organizador para maquillaje, accesorios y artículos personales.",hogar|organizador,false,false,true,13,,Catálogo inicial Ari Shopping,
|
||||
ari-006,Kit Brochas Essential,Belleza,59900,74900,Brochas suaves para una rutina de maquillaje completa.,belleza|kit,false,true,true,14,,Catálogo inicial Ari Shopping,
|
||||
ari-007,Termo Trend 1.2L,Hogar,84900,99900,"Termo de gran capacidad con tapa, pitillo y asa.",hogar|termo,true,false,true,15,,Catálogo inicial Ari Shopping,
|
||||
ari-008,Smart Band Active,Tecnología,109900,139900,Pulsera inteligente para actividad diaria y notificaciones.,tecnología|smart,true,false,true,16,,Catálogo inicial Ari Shopping,
|
||||
|
@@ -0,0 +1,191 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"updatedAt": "2026-07-18T00:00:00-05:00",
|
||||
"currency": "COP",
|
||||
"products": [
|
||||
{
|
||||
"id": "ari-001",
|
||||
"name": "Bolso Crossbody Aura",
|
||||
"category": "Accesorios",
|
||||
"price": 89900,
|
||||
"compareAtPrice": 109900,
|
||||
"featured": true,
|
||||
"new": true,
|
||||
"description": "Bolso compacto de uso diario con correa ajustable.",
|
||||
"tags": [
|
||||
"accesorios",
|
||||
"bolso"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-001.svg"
|
||||
],
|
||||
"stock": 9,
|
||||
"available": true,
|
||||
"source": {
|
||||
"type": "demo",
|
||||
"name": "Catálogo inicial Ari Shopping"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ari-002",
|
||||
"name": "Set Glow Skincare",
|
||||
"category": "Belleza",
|
||||
"price": 74900,
|
||||
"compareAtPrice": 89900,
|
||||
"featured": true,
|
||||
"new": false,
|
||||
"description": "Rutina esencial de cuidado facial para una apariencia luminosa.",
|
||||
"tags": [
|
||||
"belleza",
|
||||
"set"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-002.svg"
|
||||
],
|
||||
"stock": 10,
|
||||
"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,
|
||||
"new": true,
|
||||
"description": "Audífonos inalámbricos con estuche de carga portátil.",
|
||||
"tags": [
|
||||
"tecnología",
|
||||
"audífonos"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-004.svg"
|
||||
],
|
||||
"stock": 12,
|
||||
"available": true,
|
||||
"source": {
|
||||
"type": "demo",
|
||||
"name": "Catálogo inicial Ari Shopping"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ari-005",
|
||||
"name": "Organizador Vanity",
|
||||
"category": "Hogar",
|
||||
"price": 64900,
|
||||
"compareAtPrice": 79900,
|
||||
"featured": false,
|
||||
"new": false,
|
||||
"description": "Organizador para maquillaje, accesorios y artículos personales.",
|
||||
"tags": [
|
||||
"hogar",
|
||||
"organizador"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-005.svg"
|
||||
],
|
||||
"stock": 13,
|
||||
"available": true,
|
||||
"source": {
|
||||
"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,
|
||||
"description": "Brochas suaves para una rutina de maquillaje completa.",
|
||||
"tags": [
|
||||
"belleza",
|
||||
"kit"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-006.svg"
|
||||
],
|
||||
"stock": 14,
|
||||
"available": true,
|
||||
"source": {
|
||||
"type": "demo",
|
||||
"name": "Catálogo inicial Ari Shopping"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ari-007",
|
||||
"name": "Termo Trend 1.2L",
|
||||
"category": "Hogar",
|
||||
"price": 84900,
|
||||
"compareAtPrice": 99900,
|
||||
"featured": true,
|
||||
"new": false,
|
||||
"description": "Termo de gran capacidad con tapa, pitillo y asa.",
|
||||
"tags": [
|
||||
"hogar",
|
||||
"termo"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-007.svg"
|
||||
],
|
||||
"stock": 15,
|
||||
"available": true,
|
||||
"source": {
|
||||
"type": "demo",
|
||||
"name": "Catálogo inicial Ari Shopping"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ari-008",
|
||||
"name": "Smart Band Active",
|
||||
"category": "Tecnología",
|
||||
"price": 109900,
|
||||
"compareAtPrice": 139900,
|
||||
"featured": true,
|
||||
"new": false,
|
||||
"description": "Pulsera inteligente para actividad diaria y notificaciones.",
|
||||
"tags": [
|
||||
"tecnología",
|
||||
"smart"
|
||||
],
|
||||
"images": [
|
||||
"assets/img/products/ari-008.svg"
|
||||
],
|
||||
"stock": 16,
|
||||
"available": true,
|
||||
"source": {
|
||||
"type": "demo",
|
||||
"name": "Catálogo inicial Ari Shopping"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"brand": "Ari Shopping",
|
||||
"tagline": "Detalles que enamoran, compras que disfrutas.",
|
||||
"instagramUrl": "https://www.instagram.com/ari_shopping1/",
|
||||
"whatsappNumber": "",
|
||||
"locale": "es-CO",
|
||||
"currency": "COP",
|
||||
"catalogUrl": "data/products.json"
|
||||
}
|
||||
@@ -1,87 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="description" content="Ari Shopping: juguetes, minifiguras, bolsos y regalos en un solo lugar.">
|
||||
<meta name="theme-color" content="#121318">
|
||||
<title>Ari Shopping | Tu tienda online</title>
|
||||
<style>
|
||||
:root{--ink:#17181d;--muted:#6c6e75;--line:#e9e6e1;--soft:#f7f5f2;--brand:#cc2b63;--brand2:#a31f4c;--gold:#f3b33f;--ok:#168252;--shadow:0 18px 55px rgba(20,20,24,.12);--r:22px;--max:1220px}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff}button,input{font:inherit}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}
|
||||
.top{padding:9px 15px;color:#fff;background:var(--ink);font-size:.85rem;text-align:center}.top b{color:#ffd582}
|
||||
header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(233,230,225,.9);background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
|
||||
.head{min-height:76px;display:grid;grid-template-columns:auto minmax(250px,1fr) auto;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.logo{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#111 20%,var(--brand));font:italic 700 1.2rem Georgia;box-shadow:0 8px 22px rgba(204,43,99,.25)}.brand strong{display:block}.brand small{display:block;color:var(--muted)}
|
||||
.search{position:relative}.search span{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--muted)}.search input{width:100%;height:48px;padding:0 18px 0 46px;border:1px solid var(--line);border-radius:999px;outline:none;background:var(--soft)}.search input:focus{border-color:#dc86a6;box-shadow:0 0 0 4px rgba(204,43,99,.1);background:#fff}
|
||||
.actions{display:flex;gap:9px}.btn,.icon{border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.btn{height:44px;padding:0 18px}.btn.primary{border-color:var(--brand);color:#fff;background:var(--brand)}.icon{position:relative;width:44px;height:44px;display:grid;place-items:center}.count{position:absolute;right:-3px;top:-5px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border:2px solid #fff;border-radius:99px;color:#fff;background:var(--brand);font-size:.67rem}
|
||||
nav{border-top:1px solid var(--line)}.nav{min-height:46px;display:flex;align-items:center;gap:7px;overflow:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{padding:8px 14px;border:0;border-radius:999px;color:#555861;background:transparent;white-space:nowrap;cursor:pointer;font-weight:700}.nav button:hover,.nav button.active{color:var(--brand2);background:#fff0f5}
|
||||
.hero{padding:42px 0 18px}.heroGrid{min-height:510px;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#fff7fa,#f0dbe4);box-shadow:var(--shadow)}.heroCopy{align-self:center;padding:clamp(34px,6vw,72px)}.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(204,43,99,.2);border-radius:999px;color:var(--brand2);background:rgba(255,255,255,.7);font-size:.78rem;font-weight:850;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}h1{max-width:680px;margin:22px 0 0;font-size:clamp(2.7rem,5.2vw,5rem);line-height:.97;letter-spacing:-.065em}h1 em{color:var(--brand);font-family:Georgia;font-weight:500}.hero p{max-width:590px;margin:23px 0 29px;color:#555861;font-size:1.08rem;line-height:1.65}.heroActions{display:flex;flex-wrap:wrap;gap:11px}.cta{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(23,24,29,.12);border-radius:999px;background:rgba(255,255,255,.78);font-weight:850}.cta.primary{border-color:var(--brand);color:#fff;background:var(--brand);box-shadow:0 12px 28px rgba(204,43,99,.24)}.heroMedia{position:relative;min-height:480px}.heroMedia img{height:100%;min-height:480px}.heroMedia:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#efdfe5 0%,transparent 25%)}.float{position:absolute;right:24px;bottom:24px;z-index:2;max-width:250px;padding:18px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.91);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.float strong{display:block;margin-bottom:5px}.float span{color:var(--muted);font-size:.85rem;line-height:1.45}
|
||||
.trust{padding:18px 0 24px}.trustGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trustCard{padding:18px;display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:15px}.trustIcon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--brand2);background:#fff0f5;font-size:1.2rem}.trustCard strong{display:block;font-size:.93rem}.trustCard small{color:var(--muted)}
|
||||
section.block{padding:72px 0}.soft{background:var(--soft)}.heading{margin-bottom:28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.heading h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}.heading p{max-width:520px;margin:8px 0 0;color:var(--muted);line-height:1.55}.link{color:var(--brand2);font-weight:850;white-space:nowrap}
|
||||
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cat{position:relative;min-height:300px;overflow:hidden;border-radius:var(--r);cursor:pointer;box-shadow:0 8px 28px rgba(20,20,24,.07)}.cat img{height:100%;min-height:300px;transition:.35s}.cat:hover img{transform:scale(1.045)}.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,9,11,.82))}.catText{position:absolute;left:20px;right:20px;bottom:19px;z-index:2;color:#fff}.catText strong{display:block;font-size:1.2rem}.catText small{color:rgba(255,255,255,.78)}
|
||||
.filters{margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px}.filter{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.filter.active{border-color:var(--ink);color:#fff;background:var(--ink)}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.pic{position:relative;aspect-ratio:1/1.05;overflow:hidden;background:#eee}.pic img{height:100%;transition:.32s}.card:hover .pic img{transform:scale(1.035)}.badge{position:absolute;left:13px;top:13px;padding:7px 10px;border-radius:99px;color:#fff;background:var(--ink);font-size:.7rem;font-weight:850}.badge.sale{background:var(--brand)}.body{padding:16px}.kicker{color:var(--brand2);font-size:.72rem;font-weight:850;text-transform:uppercase}.body h3{min-height:47px;margin:8px 0 10px;font-size:1rem;line-height:1.4}.rating{margin-bottom:12px;color:#e29a1a;font-size:.82rem}.rating span{color:var(--muted)}.foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.price{font-size:1.15rem;font-weight:900}.price del{display:block;color:#9a9ba0;font-size:.75rem;font-weight:600}.add{width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:var(--brand);cursor:pointer;font-size:1.3rem}.empty{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted);border:1px dashed #d4d0ca;border-radius:var(--r);background:#fff}
|
||||
.insta{padding:80px 0;color:#fff;background:radial-gradient(circle at 15% 0%,rgba(204,43,99,.6),transparent 36%),linear-gradient(135deg,#15161b,#28262d)}.instaGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}.insta h2{margin:20px 0 16px;font-size:clamp(2.3rem,4.5vw,4.1rem);line-height:1;letter-spacing:-.055em}.insta p{max-width:520px;margin:0 0 25px;color:rgba(255,255,255,.75);line-height:1.65}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tile{aspect-ratio:1;overflow:hidden;border-radius:16px}.tile img{height:100%;transition:.3s}.tile:hover img{transform:scale(1.05)}
|
||||
footer{padding:50px 0 24px;color:rgba(255,255,255,.74);background:#121318}.footerGrid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:35px}.footerGrid h3{margin:0 0 15px;color:#fff;font-size:.95rem}.links{display:grid;gap:10px;font-size:.87rem}.about{max-width:350px;line-height:1.6}.bottom{margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
|
||||
.overlay{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;background:rgba(8,9,11,.55);transition:.2s}.overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;right:0;top:0;z-index:90;width:min(430px,100%);height:100%;padding:24px;display:flex;flex-direction:column;transform:translateX(100%);background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.2);transition:.24s}.drawer.open{transform:none}.drawerHead{padding-bottom:17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawerHead h2{margin:0}.close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:1.2rem}.cartList{flex:1;overflow:auto}.cartEmpty{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}.cartItem{padding:14px 0;display:grid;grid-template-columns:68px 1fr auto;gap:11px;align-items:center;border-bottom:1px solid var(--line)}.cartItem img{width:68px;height:68px;border-radius:11px}.cartItem strong{display:block;font-size:.88rem}.cartItem small{color:var(--brand2);font-weight:800}.remove{border:0;color:#9f2929;background:none;cursor:pointer}.drawerFoot{padding-top:16px;border-top:1px solid var(--line)}.total{margin-bottom:14px;display:flex;justify-content:space-between;font-weight:900}.drawerFoot .cta{width:100%}.toast{position:fixed;left:50%;bottom:24px;z-index:100;padding:12px 17px;opacity:0;transform:translate(-50%,15px);border-radius:99px;color:#fff;background:var(--ink);box-shadow:var(--shadow);transition:.18s;pointer-events:none;font-weight:750}.toast.show{opacity:1;transform:translate(-50%,0)}
|
||||
@media(max-width:1000px){.head{grid-template-columns:auto 1fr auto;gap:13px}.brandText{display:none}.actions .btn{display:none}.heroGrid,.instaGrid{grid-template-columns:1fr}.heroMedia,.heroMedia img{min-height:380px}.heroMedia:after{background:linear-gradient(180deg,#efdfe5 0%,transparent 22%)}.cats,.products{grid-template-columns:repeat(2,1fr)}.footerGrid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:680px){.wrap{width:min(calc(100% - 20px),var(--max))}.head{padding:11px 0}.logo{width:41px;height:41px}.search input{height:42px;font-size:.85rem}.hero{padding-top:20px}.heroCopy{padding:34px 23px}.heroMedia,.heroMedia img{min-height:315px}.float{left:15px;right:15px;bottom:15px;max-width:none}.trustGrid{grid-template-columns:1fr}section.block{padding:52px 0}.heading{align-items:flex-start;flex-direction:column}.cats{display:flex;overflow:auto;scroll-snap-type:x mandatory}.cat{min-width:78vw;scroll-snap-align:start}.products{gap:12px}.body{padding:13px}.body h3{min-height:58px;font-size:.92rem}.footerGrid{grid-template-columns:1fr}.bottom{flex-direction:column}}
|
||||
@media(max-width:430px){.products{grid-template-columns:1fr}.body h3{min-height:0}.heroActions .cta{width:100%}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top"><b>Envíos Seguros</b> · Pagos fáciles · Atención personalizada</div>
|
||||
<header>
|
||||
<div class="wrap head">
|
||||
<a class="brand" href="#inicio"><span class="logo">ARI</span><span class="brandText"><strong>Ari Shopping</strong><small>Detalles que te encantan</small></span></a>
|
||||
<label class="search"><span>⌕</span><input id="search" type="search" placeholder="Buscar juguetes, bolsos, regalos..."></label>
|
||||
<div class="actions"><a class="btn primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Escríbenos</a><button id="cartBtn" class="icon" aria-label="Abrir carrito">🛒<span id="count" class="count">0</span></button></div>
|
||||
</div>
|
||||
<nav><div class="wrap nav" id="nav"></div></nav>
|
||||
</header>
|
||||
|
||||
<main id="inicio">
|
||||
<section class="hero"><div class="wrap"><div class="heroGrid">
|
||||
<div class="heroCopy"><span class="tag"><span class="dot"></span>Nueva colección</span><h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1><p>Juguetes, minifiguras, bolsos y regalos seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p><div class="heroActions"><a class="cta primary" href="#productos">Explorar productos</a><a class="cta" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Ver Instagram</a></div></div>
|
||||
<div class="heroMedia"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=1200&q=85" alt="Juguetes coloridos"><div class="float"><strong>Compra con acompañamiento</strong><span>Te ayudamos a elegir, confirmar disponibilidad y coordinar tu envío.</span></div></div>
|
||||
</div></div></section>
|
||||
|
||||
<section class="trust"><div class="wrap trustGrid"><article class="trustCard"><span class="trustIcon">🚚</span><div><strong>Envíos seguros</strong><small>Coordinación y seguimiento.</small></div></article><article class="trustCard"><span class="trustIcon">💳</span><div><strong>Pagos fáciles</strong><small>Opciones claras para comprar.</small></div></article><article class="trustCard"><span class="trustIcon">💗</span><div><strong>Atención cercana</strong><small>Antes y después de tu compra.</small></div></article></div></section>
|
||||
|
||||
<section class="block"><div class="wrap"><div class="heading"><div><h2>Compra por categoría</h2><p>Encuentra rápido el regalo, juguete o accesorio ideal.</p></div><a class="link" href="#productos">Ver todo →</a></div><div class="cats">
|
||||
<article class="cat" data-cat="juguetes"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82" alt="Juguetes"><div class="catText"><strong>Juguetes</strong><small>Diversión para todas las edades</small></div></article>
|
||||
<article class="cat" data-cat="minifiguras"><img src="https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82" alt="Minifiguras"><div class="catText"><strong>Minifiguras</strong><small>Personajes para coleccionar</small></div></article>
|
||||
<article class="cat" data-cat="bolsos"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82" alt="Mochilas"><div class="catText"><strong>Bolsos y mochilas</strong><small>Estilo para cada aventura</small></div></article>
|
||||
<article class="cat" data-cat="regalos"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82" alt="Regalos"><div class="catText"><strong>Regalos</strong><small>Detalles que emocionan</small></div></article>
|
||||
</div></div></section>
|
||||
|
||||
<section id="productos" class="block soft"><div class="wrap"><div class="heading"><div><h2>Productos destacados</h2><p>Catálogo demostrativo listo para conectarse después con el microservicio de productos.</p></div><a class="link" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Consultar disponibilidad →</a></div><div id="filters" class="filters"></div><div id="products" class="products"></div></div></section>
|
||||
|
||||
<section class="insta"><div class="wrap instaGrid"><div><span class="tag"><span class="dot"></span>@ari_shopping1</span><h2>Descubre novedades todos los días.</h2><p>Sigue la cuenta para conocer productos recién llegados, promociones y disponibilidad. La tienda online transformará esa comunidad en una experiencia de compra completa.</p><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Seguir en Instagram</a></div><div class="tiles"><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=500&q=80" alt="Producto"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=500&q=80" alt="Mochila"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=500&q=80" alt="Regalo"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=500&q=80" alt="Regalos"></a></div></div></section>
|
||||
</main>
|
||||
|
||||
<footer><div class="wrap"><div class="footerGrid"><div><a class="brand" href="#inicio"><span class="logo">ARI</span><span><strong style="color:#fff">Ari Shopping</strong><small style="display:block;color:#aaa">Tu tienda virtual</small></span></a><p class="about">Variedad de productos y marcas en un solo lugar, con atención personalizada y una experiencia de compra cada vez más completa.</p></div><div><h3>Comprar</h3><div class="links"><a href="#productos">Productos</a><a href="#productos">Novedades</a><a href="#productos">Ofertas</a></div></div><div><h3>Ayuda</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Contacto</a><a href="#">Envíos</a><a href="#">Cambios y devoluciones</a></div></div><div><h3>Síguenos</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Instagram @ari_shopping1</a><a href="#">WhatsApp próximamente</a></div></div></div><div class="bottom"><span>© <span id="year"></span> Ari Shopping.</span><span>Front MVP listo para evolución a microservicios.</span></div></div></footer>
|
||||
|
||||
<div id="overlay" class="overlay"></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><h2>Tu carrito</h2><button id="close" class="close">×</button></div><div id="cartList" class="cartList"></div><div class="drawerFoot"><div class="total"><span>Total estimado</span><span id="total">$0</span></div><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Finalizar por Instagram</a></div></aside><div id="toast" class="toast"></div>
|
||||
|
||||
<script>
|
||||
const data=[
|
||||
{id:1,n:'Figura coleccionable edición especial',c:'minifiguras',tag:'Nuevo',p:79000,old:0,img:'https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:2,n:'Set creativo de bloques y personajes',c:'juguetes',tag:'Favorito',p:119000,old:139000,img:'https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:3,n:'Mochila urbana compacta',c:'bolsos',tag:'Nuevo',p:89000,old:0,img:'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:4,n:'Caja sorpresa para regalo',c:'regalos',tag:'Oferta',p:59000,old:69000,img:'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:5,n:'Vehículo de juguete colección',c:'juguetes',tag:'Nuevo',p:69000,old:0,img:'https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:6,n:'Kit de arte y creatividad',c:'regalos',tag:'Favorito',p:74000,old:0,img:'https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:7,n:'Figura decorativa de colección',c:'minifiguras',tag:'Oferta',p:65000,old:79000,img:'https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=800&q=82'},
|
||||
{id:8,n:'Bolso casual de uso diario',c:'bolsos',tag:'Nuevo',p:99000,old:0,img:'https://images.unsplash.com/photo-1559563458-527698bf5295?auto=format&fit=crop&w=800&q=82'}
|
||||
];
|
||||
const labels={todos:'Todos',nuevo:'Lo nuevo',juguetes:'Juguetes',minifiguras:'Minifiguras',bolsos:'Bolsos',regalos:'Regalos',ofertas:'Ofertas'},state={f:'todos',q:'',cart:[]},money=new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',maximumFractionDigits:0});
|
||||
const $=s=>document.querySelector(s), nav=$('#nav'),filters=$('#filters'),grid=$('#products'),search=$('#search'),drawer=$('#drawer'),overlay=$('#overlay'),cartList=$('#cartList');
|
||||
function match(x,f){return f==='todos'||f==='nuevo'&&x.tag==='Nuevo'||f==='ofertas'&&x.old||x.c===f}function renderNav(){nav.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="${state.f===k?'active':''}">${v}</button>`).join('');filters.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="filter ${state.f===k?'active':''}">${v}</button>`).join('')}
|
||||
function render(){renderNav();const q=state.q.trim().toLowerCase(),rows=data.filter(x=>match(x,state.f)&&(!q||(x.n+' '+x.c).toLowerCase().includes(q)));grid.innerHTML=rows.length?rows.map(x=>`<article class="card"><div class="pic"><img loading="lazy" src="${x.img}" alt="${x.n}"><span class="badge ${x.old?'sale':''}">${x.tag}</span></div><div class="body"><span class="kicker">${labels[x.c]}</span><h3>${x.n}</h3><div class="rating">★★★★★ <span>4.8</span></div><div class="foot"><div class="price">${money.format(x.p)}${x.old?`<del>${money.format(x.old)}</del>`:''}</div><button class="add" data-add="${x.id}" aria-label="Agregar">+</button></div></div></article>`).join(''):'<div class="empty"><strong>No encontramos productos.</strong><br>Prueba otra búsqueda o categoría.</div>'}
|
||||
function toast(t){const el=$('#toast');el.textContent=t;el.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>el.classList.remove('show'),2000)}function add(id){const x=data.find(p=>p.id===id),e=state.cart.find(p=>p.id===id);e?e.qty++:state.cart.push({...x,qty:1});renderCart();toast('Producto agregado al carrito')}function remove(id){state.cart=state.cart.filter(x=>x.id!==id);renderCart()}
|
||||
function renderCart(){const n=state.cart.reduce((s,x)=>s+x.qty,0),t=state.cart.reduce((s,x)=>s+x.p*x.qty,0);$('#count').textContent=n;$('#total').textContent=money.format(t);cartList.innerHTML=state.cart.length?state.cart.map(x=>`<div class="cartItem"><img src="${x.img}" alt="${x.n}"><div><strong>${x.n}</strong><small>${money.format(x.p)} · Cant. ${x.qty}</small></div><button class="remove" data-remove="${x.id}">Eliminar</button></div>`).join(''):'<div class="cartEmpty"><div><strong>Tu carrito está vacío</strong><br><small>Agrega productos para comenzar.</small></div></div>'}
|
||||
function openCart(){drawer.classList.add('open');overlay.classList.add('open');drawer.setAttribute('aria-hidden','false')}function closeCart(){drawer.classList.remove('open');overlay.classList.remove('open');drawer.setAttribute('aria-hidden','true')}
|
||||
document.addEventListener('click',e=>{const f=e.target.closest('[data-filter]'),cat=e.target.closest('[data-cat]'),a=e.target.closest('[data-add]'),r=e.target.closest('[data-remove]');if(f||cat){state.f=(f?.dataset.filter||cat.dataset.cat);render();$('#productos').scrollIntoView({behavior:'smooth'})}if(a)add(+a.dataset.add);if(r)remove(+r.dataset.remove)});search.addEventListener('input',e=>{state.q=e.target.value;render()});$('#cartBtn').onclick=openCart;$('#close').onclick=closeCart;overlay.onclick=closeCart;document.addEventListener('keydown',e=>{if(e.key==='Escape')closeCart()});$('#year').textContent=new Date().getFullYear();render();renderCart();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!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>
|
||||
<div class="announcement">Envíos nacionales · Atención personalizada · Precios en COP</div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</body></html>
|
||||
@@ -0,0 +1 @@
|
||||
server { listen 80; server_name _; root /usr/share/nginx/html; index index.html; charset utf-8; server_tokens off; location = /healthz { access_log off; default_type text/plain; return 200 "ok\n"; } location ~* \.(css|js|svg|png|jpg|jpeg|webp|ico)$ { expires 7d; add_header Cache-Control "public, max-age=604800"; try_files $uri =404; } location ~* \.json$ { expires -1; add_header Cache-Control "no-store"; try_files $uri =404; } location / { try_files $uri $uri/ /index.html; } add_header X-Content-Type-Options nosniff always; add_header Referrer-Policy strict-origin-when-cross-origin always; }
|
||||
@@ -0,0 +1,36 @@
|
||||
#!/usr/bin/env python3
|
||||
from __future__ import annotations
|
||||
import argparse,csv,hashlib,io,json,re,sys,urllib.request
|
||||
from datetime import datetime,timezone
|
||||
from pathlib import Path
|
||||
try:
|
||||
from PIL import Image,ImageOps
|
||||
except ImportError:
|
||||
Image=ImageOps=None
|
||||
ROOT=Path(__file__).resolve().parents[1];OUT=ROOT/'data/products.json';IMG=ROOT/'assets/img/products'
|
||||
def b(v,d=False): return str(v or '').strip().lower() in {'1','true','yes','si','sí'} if str(v or '').strip() else d
|
||||
def n(v,d=0):
|
||||
try:return int(float(str(v or '').strip()))
|
||||
except:return d
|
||||
def slug(v):return re.sub(r'[^a-zA-Z0-9_-]+','-',v.strip()).strip('-').lower() or hashlib.sha256(v.encode()).hexdigest()[:12]
|
||||
def download(url):
|
||||
req=urllib.request.Request(url,headers={'User-Agent':'AriShoppingCatalogSync/2.0'});data=urllib.request.urlopen(req,timeout=25).read(12*1024*1024+1)
|
||||
if len(data)>12*1024*1024:raise ValueError('Imagen demasiado grande')
|
||||
return data
|
||||
def image(data,dst):
|
||||
if Image is None:raise RuntimeError('Instala Pillow')
|
||||
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)
|
||||
def main():
|
||||
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=[]
|
||||
with a.source.open(encoding='utf-8-sig') as f:
|
||||
for row in csv.DictReader(f):
|
||||
pid=slug(row.get('id') or row['name']);imgs=[];urls=[u.strip() for u in row.get('image_urls','').split('|') if u.strip()]
|
||||
if a.download_images:
|
||||
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())
|
||||
@@ -0,0 +1 @@
|
||||
Pillow==11.3.0
|
||||
Reference in new issue
Block a user