feat(ecommerce): release Ari Shopping Frontend v2.1 real catalog
Build and Push Frontend / build (push) Successful in 1m22s
Build and Push Frontend / build (push) Successful in 1m22s
This commit is contained in:
devops committed
1 parent
6f853beea9
commit
27d1ad992d
33 files changed
+313
-295
No files matched your search
@@ -1,14 +1,3 @@
|
||||
# Ari Shopping Frontend v2.1
|
||||
# Ari Shopping Frontend v2.2
|
||||
|
||||
Versión basada en 17 productos reales del archivo exportado por `ari_shopping1`.
|
||||
|
||||
- Estética cercana al Frontend v1.
|
||||
- Imágenes propias normalizadas a WebP 1400 × 1400.
|
||||
- Hero y categorías con material real de Ari Shopping.
|
||||
- Pedidos por WhatsApp mediante `https://wa.link/rvcqqc`.
|
||||
- Sin precios inventados: `Consultar disponibilidad`.
|
||||
- Catálogo editable desde `catalog-source.csv`.
|
||||
|
||||
`data/external-image-sources.json` contiene páginas oficiales de Mattel y
|
||||
Disney Store como referencias. Sus imágenes no están incluidas y solo deben
|
||||
usarse con autorización del fabricante o proveedor.
|
||||
Versión corregida del frontend con enfoque en recuperar la estética cercana a la versión 1, usar el logo real de Ari Shopping, corregir CSS/JavaScript y mantener productos reales del export de ari_shopping1.
|
||||
@@ -1 +1,132 @@
|
||||
:root{--ink:#17111c;--muted:#756d78;--pink:#ff3f86;--pink-dark:#e32270;--purple:#9c39ef;--soft:#faf7fb;--line:#ece5ee;--white:#fff;--shadow:0 18px 55px rgba(40,24,48,.10);--shell:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body.locked{overflow:hidden}button,input,select{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.shell{width:min(calc(100% - 36px),var(--shell));margin-inline:auto}.skip-link{position:fixed;z-index:999;left:10px;top:10px;padding:10px 15px;color:#fff;background:#111;transform:translateY(-150%)}.skip-link:focus{transform:none}.announcement{height:34px;display:flex;align-items:center;justify-content:center;gap:34px;padding:0 16px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));font-size:12px}.announcement strong{text-transform:uppercase;letter-spacing:.06em}.site-header{position:sticky;z-index:80;top:0;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-shell{min-height:82px;display:grid;grid-template-columns:205px 1fr auto;align-items:center;gap:28px}.brand img{width:190px}.main-nav{display:flex;justify-content:center;gap:27px}.main-nav button{border:0;padding:10px 0;background:transparent;color:#6f6672;cursor:pointer;font-size:13px}.main-nav button:hover{color:var(--pink-dark)}.header-actions{display:flex;align-items:center;gap:9px}.search-open{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}.search-open svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8}.cart-button{height:43px;display:flex;align-items:center;gap:9px;padding:0 14px;border:0;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));cursor:pointer;font-weight:800}.cart-button strong{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);font-size:11px}.search-panel{padding:0 0 18px}.search-panel label{display:block;margin-bottom:7px;font-size:12px;font-weight:800;color:var(--pink-dark);text-transform:uppercase;letter-spacing:.08em}.search-panel>div{display:flex;gap:8px}.search-panel input{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;outline:0;background:var(--soft)}.search-panel button{padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer}.hero{min-height:650px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:65px;padding-block:70px}.eyebrow{display:inline-block;color:var(--pink-dark);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hero h1{max-width:620px;margin:16px 0 22px;font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.055em}.hero h1 em{display:block;color:var(--pink);font-family:Georgia,serif;font-weight:400}.hero-copy>p{max-width:580px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:30px}.button{min-height:47px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:0;border-radius:999px;cursor:pointer;font-weight:850}.button.primary{color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 12px 30px rgba(255,63,134,.22)}.button.text{padding:0;background:transparent}.button.white{background:#fff}.button.full{width:100%}.hero-image{position:relative}.hero-image img{width:100%;border-radius:34px}.hero-note{position:absolute;right:4%;bottom:7%;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:var(--shadow);font-size:12px;font-weight:800}.service-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:100px}.service-strip article{display:flex;gap:14px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}.service-strip i{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--pink);background:#fff0f6;font-style:normal;font-weight:900}.service-strip strong,.service-strip span{display:block}.service-strip strong{font-size:13px}.service-strip span{margin-top:4px;color:var(--muted);font-size:12px}.category-section,.products-section{padding-bottom:110px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.section-heading h2{margin:8px 0;font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.045em}.section-heading p{margin:0;color:var(--muted)}.section-heading>a{color:var(--pink-dark);font-size:13px;font-weight:800}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.category-card{position:relative;min-height:390px;overflow:hidden;display:flex;flex-direction:column;justify-content:end;align-items:start;padding:25px;border:Line truncated
|
||||
:root {
|
||||
--bg: #fcfafc;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f7f1f7;
|
||||
--line: #ece4ef;
|
||||
--text: #201726;
|
||||
--muted: #746a79;
|
||||
--pink: #ff4f98;
|
||||
--pink-dark: #ec2f80;
|
||||
--purple: #8e46e8;
|
||||
--shadow: 0 18px 48px rgba(39, 22, 49, 0.11);
|
||||
--shadow-soft: 0 10px 28px rgba(37, 20, 46, 0.07);
|
||||
--container: 1200px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input, select { font: inherit; }
|
||||
button { cursor: pointer; color: inherit; }
|
||||
img { display: block; max-width: 100%; }
|
||||
[hidden] { display:none !important; }
|
||||
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
|
||||
.topbar { height:34px; display:flex; align-items:center; justify-content:center; padding:0 14px; color:#fff; font-size:12px; font-weight:700; background:linear-gradient(90deg,var(--pink),var(--purple)); }
|
||||
.site-header { position:sticky; top:0; z-index:50; background:rgba(252,250,252,.94); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
|
||||
.header-grid { min-height:92px; display:grid; grid-template-columns:280px 1fr auto; align-items:center; gap:24px; }
|
||||
.brand { display:inline-flex; align-items:center; gap:16px; }
|
||||
.brand-logo { width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-soft); border:3px solid #fff; }
|
||||
.brand-copy strong { display:block; font-size:22px; line-height:1; }
|
||||
.brand-copy span { display:block; margin-top:6px; color:var(--muted); font-size:12px; }
|
||||
.main-nav { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
|
||||
.main-nav button { border:0; background:transparent; padding:10px 0; color:var(--muted); font-size:14px; }
|
||||
.main-nav button:hover, .main-nav button.active { color:var(--pink-dark); }
|
||||
.header-actions { display:flex; align-items:center; gap:12px; }
|
||||
.ghost-btn,.pill-btn,.primary-btn,.white-btn,.link-btn,.primary-small { border:0; border-radius:999px; transition:transform .15s ease, background .2s ease, color .2s ease; }
|
||||
.ghost-btn { height:44px; padding:0 18px; background:#fff; border:1px solid var(--line); }
|
||||
.ghost-btn:hover { background:#faf7fb; }
|
||||
.pill-btn { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; background:linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; font-weight:700; box-shadow:var(--shadow-soft); }
|
||||
.pill-btn span { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.22); font-size:12px; }
|
||||
.search-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:0 0 16px; }
|
||||
.search-row input { height:48px; border-radius:999px; border:1px solid var(--line); background:#fff; padding:0 16px; outline:none; }
|
||||
.search-row input:focus { border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,79,152,.10); }
|
||||
.hero { display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; padding:64px 0 84px; }
|
||||
.eyebrow { display:inline-block; color:var(--pink-dark); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
|
||||
.eyebrow.light { color:#ffbad9; }
|
||||
.hero h1 { margin:14px 0 18px; font-size:clamp(52px,6vw,78px); line-height:.98; letter-spacing:-.055em; max-width:540px; }
|
||||
.hero h1 em { color:var(--pink); font-style:italic; font-family:Georgia,serif; font-weight:400; }
|
||||
.hero p { max-width:540px; color:var(--muted); font-size:17px; line-height:1.7; }
|
||||
.hero-actions { display:flex; align-items:center; gap:14px; margin-top:28px; }
|
||||
.primary-btn,.white-btn,.link-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; font-weight:800; }
|
||||
.primary-btn,.primary-small { background:linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; box-shadow:var(--shadow-soft); }
|
||||
.link-btn { background:transparent; color:var(--text); }
|
||||
.white-btn { background:#fff; color:var(--text); }
|
||||
.primary-btn:hover,.primary-small:hover,.pill-btn:hover,.white-btn:hover { transform:translateY(-1px); }
|
||||
.hero-card { padding:18px; border-radius:36px; background:linear-gradient(180deg,#f2e6f8,#f3eef7); box-shadow:var(--shadow); }
|
||||
.hero-card img { border-radius:28px; width:100%; }
|
||||
.hero-card small { display:block; margin-top:10px; color:var(--muted); font-size:12px; }
|
||||
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:92px; }
|
||||
.benefits article { display:flex; align-items:center; gap:14px; padding:20px 0; border-top:1px solid var(--line); }
|
||||
.icon-dot { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fff0f7; color:var(--pink); font-weight:900; }
|
||||
.benefits strong,.benefits span { display:block; }
|
||||
.benefits span { color:var(--muted); margin-top:4px; font-size:14px; }
|
||||
.categories,.catalog { padding-bottom:96px; }
|
||||
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
|
||||
.section-head h2 { margin:10px 0 8px; font-size:clamp(34px,4.4vw,54px); line-height:1; letter-spacing:-.05em; }
|
||||
.section-head p { margin:0; color:var(--muted); }
|
||||
.section-head a { color:var(--pink-dark); font-weight:800; }
|
||||
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
|
||||
.category-card { padding:0; border:0; background:var(--surface); border-radius:26px; overflow:hidden; box-shadow:var(--shadow-soft); text-align:left; }
|
||||
.category-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
|
||||
.category-card div { padding:16px 18px 18px; }
|
||||
.category-card strong { display:block; font-size:18px; }
|
||||
.category-card span { display:block; margin-top:6px; color:var(--muted); font-size:14px; }
|
||||
.catalog-head { margin-bottom:22px; }
|
||||
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
|
||||
.chips { display:flex; gap:8px; flex-wrap:wrap; }
|
||||
.chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px; font-size:13px; font-weight:700; }
|
||||
.chip.active { background:var(--text); color:#fff; border-color:var(--text); }
|
||||
.toolbar select { height:44px; border-radius:14px; border:1px solid var(--line); background:#fff; padding:0 12px; }
|
||||
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
|
||||
.product-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; }
|
||||
.product-image { padding:0; border:0; background:#fff; overflow:hidden; }
|
||||
.product-image img { width:100%; aspect-ratio:1/1; object-fit:cover; }
|
||||
.product-content { display:flex; flex-direction:column; gap:12px; padding:18px; }
|
||||
.product-tags { display:flex; gap:8px; flex-wrap:wrap; }
|
||||
.tag { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:#f7f1f7; color:var(--muted); font-size:12px; font-weight:700; }
|
||||
.product-title { border:0; background:transparent; padding:0; text-align:left; color:var(--text); font-size:20px; font-weight:800; line-height:1.15; }
|
||||
.product-description { margin:0; color:var(--muted); font-size:14px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||||
.product-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
|
||||
.primary-small { min-height:42px; padding:0 16px; font-weight:800; }
|
||||
.empty-state { padding:36px; background:#fff; border:1px dashed var(--line); border-radius:24px; text-align:center; }
|
||||
.social-band { padding:72px 0; background:linear-gradient(135deg,#6a165f,#180f23); color:#fff; }
|
||||
.social-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
|
||||
.social-band h2 { margin:10px 0 0; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.04em; max-width:760px; }
|
||||
.site-footer { background:#171120; color:#fff; }
|
||||
.footer-grid { min-height:116px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
|
||||
.footer-brand { display:inline-flex; align-items:center; gap:16px; }
|
||||
.footer-brand img { width:68px; height:68px; border-radius:50%; object-fit:cover; }
|
||||
.footer-brand strong,.footer-brand span { display:block; }
|
||||
.footer-brand span { color:#d8cfdd; font-size:13px; margin-top:6px; }
|
||||
.footer-meta { color:#d8cfdd; font-size:13px; }
|
||||
.backdrop { position:fixed; inset:0; z-index:90; background:rgba(24,12,28,.56); backdrop-filter:blur(4px); }
|
||||
.drawer { position:fixed; top:0; right:0; z-index:95; width:min(420px,100%); height:100dvh; display:grid; grid-template-rows:auto 1fr auto; background:#fff; box-shadow:-24px 0 60px rgba(20,10,25,.18); transform:translateX(105%); transition:transform .22s ease; }
|
||||
.drawer.open { transform:translateX(0); }
|
||||
.drawer-header,.drawer-footer { padding:22px; border-bottom:1px solid var(--line); }
|
||||
.drawer-header { display:flex; justify-content:space-between; align-items:center; }
|
||||
.drawer-header h3 { margin:8px 0 0; font-size:28px; }
|
||||
.drawer-body { padding:18px 22px; overflow:auto; }
|
||||
.drawer-footer { border-top:1px solid var(--line); border-bottom:0; display:grid; gap:12px; }
|
||||
.full { width:100%; }
|
||||
.cart-empty { border:1px dashed var(--line); border-radius:18px; padding:20px; text-align:center; color:var(--muted); }
|
||||
.cart-line { display:grid; grid-template-columns:76px 1fr auto; gap:12px; align-items:start; margin-bottom:14px; }
|
||||
.cart-line img { width:76px; height:76px; border-radius:16px; object-fit:cover; }
|
||||
.cart-line strong,.cart-line span,.cart-line small { display:block; }
|
||||
.cart-line small { color:var(--muted); margin-top:6px; }
|
||||
.qty { display:inline-flex; align-items:center; gap:8px; margin-top:10px; }
|
||||
.qty button { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:#fff; }
|
||||
.remove-btn { border:0; background:transparent; color:var(--pink-dark); font-weight:800; padding:6px 0; }
|
||||
.product-dialog { width:min(920px,calc(100% - 24px)); border:0; border-radius:28px; padding:0; box-shadow:0 30px 90px rgba(20,10,25,.28); }
|
||||
.product-dialog::backdrop { background:rgba(20,10,25,.56); backdrop-filter:blur(4px); }
|
||||
.dialog-close { position:absolute; top:14px; right:14px; width:42px; height:42px; border:0; border-radius:50%; background:#fff; box-shadow:var(--shadow-soft); font-size:28px; line-height:1; }
|
||||
.dialog-layout { display:grid; grid-template-columns:1fr .95fr; }
|
||||
.dialog-layout img { width:100%; height:100%; min-height:520px; object-fit:cover; }
|
||||
.dialog-copy { padding:44px 34px 34px; }
|
||||
.dialog-copy h3 { margin:12px 0 14px; font-size:38px; line-height:1.04; letter-spacing:-.04em; }
|
||||
.dialog-copy p { color:var(--muted); line-height:1.7; }
|
||||
.dialog-details { display:grid; gap:12px; margin:20px 0 24px; }
|
||||
.dialog-details div { padding:14px 16px; border-radius:18px; background:#faf7fb; border:1px solid var(--line); }
|
||||
.dialog-details strong { display:block; font-size:12px; color:var(--pink-dark); text-transform:uppercase; letter-spacing:.1em; }
|
||||
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
|
||||
@media (max-width: 1100px) { .header-grid { grid-template-columns:1fr; padding:18px 0; } .main-nav { justify-content:flex-start; } .hero,.dialog-layout { grid-template-columns:1fr; } .benefits,.category-grid,.product-grid { grid-template-columns:repeat(2,1fr); } .social-inner,.footer-grid,.section-head,.toolbar { flex-direction:column; align-items:flex-start; } }
|
||||
@media (max-width: 640px) { .container { width:min(calc(100% - 24px), var(--container)); } .topbar { font-size:11px; text-align:center; } .brand-copy span { display:none; } .hero { padding-top:42px; } .hero h1 { font-size:46px; } .hero-actions { flex-direction:column; align-items:flex-start; } .benefits,.category-grid,.product-grid { grid-template-columns:1fr; } .product-title { font-size:18px; } .dialog-copy { padding:26px 20px 22px; } .dialog-copy h3 { font-size:30px; } }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 308 KiB After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 457 KiB After Width: | Height: | Size: 294 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 126 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@@ -1 +1,25 @@
|
||||
(()=>{"use strict";const KEY="ari-shopping-cart-v2-1";const state={store:null,products:[],category:"Todos",collection:"",query:"",sort:"featured",cart:read()};const $=(s,r=document)=>r.querySelector(s),$$=(s,r=document)=>[...r.querySelectorAll(s)];const e={grid:$("#productGrid"),tpl:$("#productTemplate"),chips:$("#filterChips"),sort:$("#sortSelect"),summary:$("#catalogSummary"),empty:$("#emptyState"),reset:$("#resetButton"),searchOpen:$("#searchOpen"),searchPanel:$("#searchPanel"),searchInput:$("#searchInput"),searchClose:$("#searchClose"),cartBtn:$("#cartButton"),drawer:$("#cartDrawer"),cartClose:$("#cartClose"),cartItems:$("#cartItems"),cartCount:$("#cartCount"),checkout:$("#checkoutButton"),clear:$("#clearCart"),overlay:$("#overlay"),dialog:$("#productDialog"),dialogClose:$("#dialogClose"),dialogContent:$("#dialogContent"),toast:$("#toastRegion"),availability:$("#availabilityLink")};function read(){try{return JSON.parse(localStorage.getItem(KEY))||{}}catch{return{}}}function save(){localStorage.setItem(KEY,JSON.stringify(state.cart))}function norm(v){return String(v||"").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").trim()}function esc(v){return String(v??"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}async function load(){try{state.store=await(await fetch("data/store.json",{cache:"no-store"})).json();state.products=(await(await fetch(state.store.catalogUrl,{cache:"no-store"})).json()).products||[];e.availability.href=state.store.whatsappUrl;renderFilters();renderAll()}catch(err){console.error(err);e.summary.textContent="No se pudo cargar el catálogo.";e.empty.hidden=false}}function cats(){return["Todos",...new Set(state.products.map(p=>p.category))]}function renderFilters(){e.chips.innerHTML=cats().map(c=>`<button class="filter-chip ${state.category===c&&!state.collection?"active":""}" type="button" data-filter-category="${esc(c)}">${esc(c)}</button>`).join("")}function filtered(){const q=norm(state.query);return state.products.filter(p=>{if(state.category!=="Todos"&&p.category!==state.category)return false;if(state.collection&&p.collection!==state.collection)return false;if(!q)return true;return norm([p.name,p.category,p.collection,p.description,p.dimensions].join(" ")).includes(q)}).sort((a,b)=>state.sort==="name"?a.name.localeCompare(b.name,"es"):state.sort==="newest"?Number(!!b.new)-Number(!!a.new):Number(!!b.featured)-Number(!!a.featured)||Number(!!b.new)-Number(!!a.new)||a.name.localeCompare(b.name,"es"))}function renderProducts(){const list=filtered();e.grid.innerHTML="";e.empty.hidden=!!list.length;e.summary.textContent=`${list.length} producto${list.length===1?"":"s"} reales de Ari Shopping`;list.forEach(p=>{const f=e.tpl.content.cloneNode(true),card=$(".product-card",f);card.dataset.productId=p.id;const img=$("img",f);img.src=p.images[0];img.alt=p.name;$(".product-category",f).textContent=p.category;$(".product-collection",f).textContent=p.collection;$(".product-name",f).textContent=p.name;$(".product-description",f).textContent=p.description;$$(".product-open",f).forEach(b=>b.addEventListener("click",()=>openProduct(p.id)));$(".add-button",f).addEventListener("click",()=>add(p.id));e.grid.appendChild(f)})}function byId(id){return state.products.find(p=>p.id===id)}function add(id){const p=byId(id);if(!p)return;state.cart[id]=Number(state.cart[id]||0)+1;save();renderCart();toast(`${p.name} agregado al pedido.`)}function update(id,q){if(q<=0)delete state.cart[id];else state.cart[id]=q;save();renderCart()}function entries(){return Object.entries(state.cart).map(([id,q])=>({product:byId(id),quantity:Number(q)})).filter(x=>x.product&&x.quantity>0)}function renderCart(){const list=entries();e.cartCount.textContent=String(list.reduce((s,x)=>s+x.quantity,0));if(!list.length){e.cartItems.innerHTML='<div class="cart-empty"><strong>Tu selección está vacía</strong><p>Agrega productos para preparar el pedido.</p></div>';e.checkout.disabled=true;return}e.checkout.disabled=false;e.cartItems.innerHTML=list.map(({product:p,quantity:q})=>`<article class="cart-line" data-product-id="${esc(p.id)}"><img src="${esc(p.images[0])}" alt=""><div><strong>${esc(p.name)}</strong><small>${esc(p.collection)} · Consultar precio</small><div class="qty"><button type="button" data-change="-1">−</button><span>${q}</span><button type="button" data-change="1">+</button></div></div><button type="button" data-remove>×</button></article>`).join("");$$("[data-change]",e.cartItems).forEach(b=>b.addEventListener("click",()=>{const id=b.closest("[data-product-id]").dataset.productId;update(id,Number(state.cart[id])+Number(b.dataset.change))}));$$("[data-remove]",e.cartItems).forEach(b=>b.addEventListener("click",()=>update(b.closest("[data-product-id]").dataset.productId,0)))}function orderText(list){return["Hola Ari Shopping 👋","Quiero consultar disponibilidad para:","",...list.map(({product:p,quantity:q})=>`• ${q} x ${p.name}`),"","Nombre:"Line truncated
|
||||
(() => {
|
||||
const state = { products: [], store: null, category: 'Todos', collection: '', query: '', sort: 'featured', cart: JSON.parse(localStorage.getItem('ari-shopping-cart-v2.2') || '{}') };
|
||||
const $ = (sel, root = document) => root.querySelector(sel);
|
||||
const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
|
||||
const els = { productGrid: $('#productGrid'), template: $('#productTemplate'), summary: $('#catalogSummary'), chips: $('#filterChips'), empty: $('#emptyState'), reset: $('#resetFilters'), sort: $('#sortSelect'), searchToggle: $('#searchToggle'), searchClose: $('#searchClose'), searchRow: $('#searchRow'), searchInput: $('#searchInput'), cartCount: $('#cartCount'), cartOpen: $('#cartOpen'), cartClose: $('#cartClose'), cartDrawer: $('#cartDrawer'), cartItems: $('#cartItems'), clearCart: $('#clearCart'), checkoutBtn: $('#checkoutBtn'), backdrop: $('#backdrop'), dialog: $('#productDialog'), dialogClose: $('#dialogClose'), dialogContent: $('#dialogContent') };
|
||||
const normalize = (v) => String(v || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
||||
const persist = () => localStorage.setItem('ari-shopping-cart-v2.2', JSON.stringify(state.cart));
|
||||
const productById = (id) => state.products.find((p) => p.id === id);
|
||||
async function loadData() { const [storeRes, productsRes] = await Promise.all([fetch('data/store.json', { cache: 'no-store' }), fetch('data/products.json', { cache: 'no-store' })]); state.store = await storeRes.json(); const catalog = await productsRes.json(); state.products = catalog.products || []; buildChips(); render(); }
|
||||
function buildChips() { const cats = ['Todos', ...new Set(state.products.map((p) => p.category))]; els.chips.innerHTML = cats.map((cat) => `<button class="chip ${state.category === cat && !state.collection ? 'active' : ''}" data-chip-cat="${cat}">${cat}</button>`).join(''); }
|
||||
function filtered() { const query = normalize(state.query); return state.products.filter((p) => { if (state.category !== 'Todos' && p.category !== state.category) return false; if (state.collection && p.collection !== state.collection) return false; if (!query) return true; return normalize(`${p.name} ${p.category} ${p.collection} ${p.description}`).includes(query); }).sort((a, b) => { if (state.sort === 'name') return a.name.localeCompare(b.name, 'es'); if (state.sort === 'new') return Number(Boolean(b.new)) - Number(Boolean(a.new)); return Number(Boolean(b.featured)) - Number(Boolean(a.featured)) || a.name.localeCompare(b.name, 'es'); }); }
|
||||
function renderProducts() { const list = filtered(); els.summary.textContent = `${list.length} productos disponibles para consultar.`; els.empty.hidden = list.length > 0; els.productGrid.innerHTML = ''; list.forEach((product) => { const frag = els.template.content.cloneNode(true); $('.product-card', frag).dataset.id = product.id; $('img', frag).src = product.image; $('img', frag).alt = product.name; $('.category', frag).textContent = product.category; $('.collection', frag).textContent = product.collection; $('.product-title', frag).textContent = product.name; $('.product-description', frag).textContent = product.description; $$('.product-open', frag).forEach((btn) => btn.addEventListener('click', () => openDialog(product.id))); $('.add-product', frag).addEventListener('click', () => addToCart(product.id)); els.productGrid.appendChild(frag); }); }
|
||||
function renderCart() { const entries = Object.entries(state.cart).map(([id, qty]) => ({ product: productById(id), qty: Number(qty) })).filter((item) => item.product && item.qty > 0); els.cartCount.textContent = String(entries.reduce((sum, item) => sum + item.qty, 0)); if (!entries.length) { els.cartItems.innerHTML = '<div class="cart-empty"><strong>Tu pedido está vacío</strong><p>Agrega productos para consultarlos por WhatsApp.</p></div>'; return; } els.cartItems.innerHTML = entries.map(({ product, qty }) => `<article class="cart-line" data-id="${product.id}"><img src="${product.image}" alt="${product.name}"><div><strong>${product.name}</strong><small>${product.collection} · Consultar disponibilidad</small><div class="qty"><button type="button" data-minus>−</button><span>${qty}</span><button type="button" data-plus>+</button></div></div><button class="remove-btn" type="button" data-remove>Quitar</button></article>`).join(''); $$('[data-minus]', els.cartItems).forEach((btn) => btn.addEventListener('click', () => changeQty(btn.closest('[data-id]').dataset.id, -1))); $$('[data-plus]', els.cartItems).forEach((btn) => btn.addEventListener('click', () => changeQty(btn.closest('[data-id]').dataset.id, 1))); $$('[data-remove]', els.cartItems).forEach((btn) => btn.addEventListener('click', () => removeFromCart(btn.closest('[data-id]').dataset.id))); }
|
||||
function render() { buildChips(); renderProducts(); renderCart(); }
|
||||
function addToCart(id) { state.cart[id] = Number(state.cart[id] || 0) + 1; persist(); renderCart(); openCart(); }
|
||||
function changeQty(id, delta) { const next = Number(state.cart[id] || 0) + delta; if (next <= 0) delete state.cart[id]; else state.cart[id] = next; persist(); renderCart(); }
|
||||
function removeFromCart(id) { delete state.cart[id]; persist(); renderCart(); }
|
||||
function openCart() { els.cartDrawer.classList.add('open'); els.cartDrawer.setAttribute('aria-hidden', 'false'); els.backdrop.hidden = false; }
|
||||
function closeCart() { els.cartDrawer.classList.remove('open'); els.cartDrawer.setAttribute('aria-hidden', 'true'); els.backdrop.hidden = true; }
|
||||
function openDialog(id) { const p = productById(id); if (!p) return; els.dialogContent.innerHTML = `<div class="dialog-layout"><img src="${p.image}" alt="${p.name}"><div class="dialog-copy"><span class="eyebrow">${p.category} · ${p.collection}</span><h3>${p.name}</h3><p>${p.description}</p><div class="dialog-details"><div><strong>Precio</strong><span>Consultar disponibilidad</span></div><div><strong>Entrega</strong><span>Coordinar con Ari Shopping</span></div>${p.dimensions ? `<div><strong>Medidas</strong><span>${p.dimensions}</span></div>` : ''}</div><div class="dialog-actions"><button id="dialogAdd" class="primary-btn" type="button">Agregar al pedido</button><a class="ghost-btn" target="_blank" rel="noopener" href="${state.store.whatsappUrl}">Consultar por WhatsApp</a></div></div></div>`; $('#dialogAdd', els.dialogContent).addEventListener('click', () => { addToCart(id); els.dialog.close(); }); els.dialog.showModal(); }
|
||||
function buildWhatsAppMessage() { const entries = Object.entries(state.cart).map(([id, qty]) => ({ product: productById(id), qty: Number(qty) })).filter((item) => item.product && item.qty > 0); if (!entries.length) return 'Hola Ari Shopping 👋'; return ['Hola Ari Shopping 👋', 'Quiero consultar disponibilidad para los siguientes productos:', '', ...entries.map((item) => `• ${item.qty} x ${item.product.name}`), '', 'Nombre:', 'Ciudad:', 'Forma de entrega:'].join('\n'); }
|
||||
function checkout() { const text = encodeURIComponent(buildWhatsAppMessage()); window.open(`${state.store.whatsappUrl}?text=${text}`, '_blank', 'noopener'); }
|
||||
function bind() { document.addEventListener('click', (event) => { const nav = event.target.closest('[data-nav]'); if (nav) { state.category = nav.dataset.nav; state.collection = ''; render(); } const col = event.target.closest('[data-col]'); if (col) { state.category = 'Todos'; state.collection = col.dataset.col; render(); } const cat = event.target.closest('[data-cat]'); if (cat) { state.category = cat.dataset.cat; state.collection = ''; render(); } const chip = event.target.closest('[data-chip-cat]'); if (chip) { state.category = chip.dataset.chipCat; state.collection = ''; render(); } }); els.sort.addEventListener('change', () => { state.sort = els.sort.value; renderProducts(); }); els.searchToggle.addEventListener('click', () => { els.searchRow.hidden = false; els.searchInput.focus(); }); els.searchClose.addEventListener('click', () => { els.searchRow.hidden = true; state.query = ''; els.searchInput.value = ''; renderProducts(); }); els.searchInput.addEventListener('input', () => { state.query = els.searchInput.value; renderProducts(); }); els.cartOpen.addEventListener('click', openCart); els.cartClose.addEventListener('click', closeCart); els.backdrop.addEventListener('click', closeCart); els.clearCart.addEventListener('click', () => { state.cart = {}; persist(); renderCart(); }); els.checkoutBtn.addEventListener('click', checkout); els.reset.addEventListener('click', () => { state.category = 'Todos'; state.collection = ''; state.query = ''; render(); }); els.dialogClose.addEventListener('click', () => els.dialog.close()); }
|
||||
bind(); loadData().catch((err) => { console.error(err); els.summary.textContent = 'No se pudo cargar el catálogo.'; els.empty.hidden = false; });
|
||||
})();
|
||||
@@ -1,18 +1,18 @@
|
||||
id,name,category,collection,description,dimensions,price,available,featured,new,image,source_fbid
|
||||
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-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-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-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-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-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-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-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
|
||||
id,name,category,collection,description,dimensions,price,available,featured,new,image,fbid
|
||||
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-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-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-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-intensamente-furia,Intensamente Furia,Peluches,Intensamente,Intensamente Furia Disney Aprox 11 “ ,,,True,True,True,assets/img/products/ari-005-intensamente-furia.webp,17872853505541489
|
||||
ari-006-intensamente-tristeza,Intensamente Tristeza,Peluches,Intensamente,Intensamente Tristeza Disney Aprox 11 “ ,,,True,True,True,assets/img/products/ari-006-intensamente-tristeza.webp,17869884192555816
|
||||
ari-007-minnie-y-mickey-mouse,Minnie y Mickey Mouse,Peluches,Mickey & Minnie,Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “ ,,,True,True,False,assets/img/products/ari-007-minnie-y-mickey-mouse.webp,18116898613530808
|
||||
ari-008-angel-lilo-y-stitch,Angel Lilo y Stitch,Peluches,Lilo & Stitch,Angel Lilo y Stitch Disney Aprox 13 “ ,,,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-d,"Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples compa",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-d.webp,18111649603646835
|
||||
ari-011-mochila-escolar-de-spider-man-de-disney-,"Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila ligera, ",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-.webp,18087568414880256
|
||||
ari-012-disney-mochila-de-poliester-ultraligera-,"Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimension",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-.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-est,"Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos anim",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-est.webp,18119703688604702
|
||||
ari-015-mochila-escolar-estilo-britanico-de-disn,"Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de ",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-disn.webp,18558512062005705
|
||||
ari-016-disney-mochila-iron-man-de-poliester-ult,"Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x",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-ult.webp,17862794898572444
|
||||
ari-017-mochila-de-disney-marvel-capitan-america,"Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, par",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.webp,17977485617974392
|
||||
|
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"version": "2.1.0",
|
||||
"updatedAt": "2026-07-19T18:18:43.430634+00:00",
|
||||
"currency": "COP",
|
||||
"version": "2.2.0",
|
||||
"updatedAt": "2026-07-19T19:39:12.411122+00:00",
|
||||
"pricingMode": "consult",
|
||||
"products": [
|
||||
{
|
||||
@@ -16,16 +15,8 @@
|
||||
"available": true,
|
||||
"featured": true,
|
||||
"new": true,
|
||||
"stockText": "Disponible para confirmar",
|
||||
"images": [
|
||||
"assets/img/products/ari-001-toy-story-5-rex.webp"
|
||||
],
|
||||
"source": {
|
||||
"type": "instagram-export",
|
||||
"account": "ari_shopping1",
|
||||
"fbid": "18085705364648339",
|
||||
"capturedAt": "2026-07-16T15:58:50+00:00"
|
||||
}
|
||||
"image": "assets/img/products/ari-001-toy-story-5-rex.webp",
|
||||
"fbid": "18085705364648339"
|
||||
},
|
||||
{
|
||||
"id": "ari-002-toy-story-5-buzz-lightyear",
|
||||
@@ -39,16 +30,8 @@
|
||||
"available": true,
|
||||
"featured": true,
|
||||
"new": true,
|
||||
"stockText": "Disponible para confirmar",
|
||||
"images": [
|
||||
"assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp"
|
||||
],
|
||||
"source": {
|
||||
"type": "instagram-export",
|
||||
"account": "ari_shopping1",
|
||||
"fbid": "17992282196809499",
|
||||
"capturedAt": "2026-06-25T18:02:24+00:00"
|
||||
}
|
||||
"image": "assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp",
|
||||
"fbid": "17992282196809499"
|
||||
},
|
||||
{
|
||||
"id": "ari-003-toy-story-5-jessie",
|
||||
@@ -62,16 +45,8 @@
|
||||
"available": true,
|
||||
"featured": true,
|
||||
"new": true,
|
||||
"stockText": "Disponible para confirmar",
|
||||
"images": [
|
||||
"assets/img/products/ari-003-toy-story-5-jessie.webp"
|
||||
],
|
||||
"source": {
|
||||
"type": "instagram-export",
|
||||
"account": "ari_shopping1",
|
||||
"fbid": "18095236400246225",
|
||||
"capturedAt": "2026-06-25T18:01:25+00:00"
|
||||
}
|
||||
"image": "assets/img/products/ari-003-toy-story-5-jessie.webp",
|
||||
"fbid": "18095236400246225"
|
||||
},
|
||||
{
|
||||
"id": "ari-004-toy-story-5-woody",
|
||||
@@ -85,16 +60,8 @@
|
||||
"available": true,
|
||||
"featured": true,
|
||||
"new": true,
|
||||
"stockText": "Disponible para confirmar",
|
||||
"images": [
|
||||
"assets/img/products/ari-004-toy-story-5-woody.webp"
|
||||
],
|
||||
"source": {
|
||||
"type": "instagram-export",
|
||||
"account": "ari_shopping1",
|
||||
"fbid": "17928025740357011",
|
||||
"capturedAt": "2026-06-25T17:58:48+00:00"
|
||||
}
|
||||
"image": "assets/img/products/ari-004-toy-story-5-woody.webp",
|
||||
"fbid": "17928025740357011"
|
||||
},
|
||||
{
|
||||
"id": "ari-005-intensamente-furia",
|
||||
@@ -102,22 +69,14 @@
|
||||
"category": "Peluches",
|
||||
"collection": "Intensamente",
|
||||
"description": "Intensamente Furia Disney Aprox 11 “ ",
|
||||
"dimensions": "Aprox. 11 pulgadas",
|
||||
"dimensions": "",
|
||||
"price": null,
|
||||
"priceText": "Consultar disponibilidad",
|
||||
"available": true,
|
||||
"featured": true,
|
||||
"new": false,
|
||||
"stockText": "Disponible para confirmar",
|
||||
"images": [
|
||||
"assets/img/products/ari-005-intensamente-furia.webp"
|
||||
],
|
||||
"source": {
|
||||
"type": "instagram-export",
|
||||
"account": "ari_shopping1",
|
||||
"fbid": "17872853505541489",
|
||||
"capturedAt": "2026-02-19T17:58:49+00:00"
|
||||
}
|
||||
"new": true,
|
||||
"image": "assets/img/products/ari-005-intensamente-furia.webp",
|
||||
"fbid": "17872853505541489"
|
||||
},
|
||||
{
|
||||
"id": "ari-006-intensamente-tristeza",
|
||||
@@ -125,22 +84,14 @@
|
||||
"category": "Peluches",
|
||||
"collection": "Intensamente",
|
||||
"description": "Intensamente Tristeza Disney Aprox 11 “ ",
|
||||
"dimensions": "Aprox. 11 pulgadas",
|
||||
"dimensions": "",
|
||||
"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"
|
||||
}
|
||||
"new": true,
|
||||
"image": "assets/img/products/ari-006-intensamente-tristeza.webp",
|
||||
"fbid": "17869884192555816"
|
||||
},
|
||||
{
|
||||
"id": "ari-007-minnie-y-mickey-mouse",
|
||||
@@ -148,22 +99,14 @@
|
||||
"category": "Peluches",
|
||||
"collection": "Mickey & Minnie",
|
||||
"description": "Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “ ",
|
||||
"dimensions": "Aprox. 15 pulgadas",
|
||||
"dimensions": "",
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-007-minnie-y-mickey-mouse.webp",
|
||||
"fbid": "18116898613530808"
|
||||
},
|
||||
{
|
||||
"id": "ari-008-angel-lilo-y-stitch",
|
||||
@@ -171,22 +114,14 @@
|
||||
"category": "Peluches",
|
||||
"collection": "Lilo & Stitch",
|
||||
"description": "Angel Lilo y Stitch Disney Aprox 13 “ ",
|
||||
"dimensions": "Aprox. 13 pulgadas",
|
||||
"dimensions": "",
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-008-angel-lilo-y-stitch.webp",
|
||||
"fbid": "18161192263375119"
|
||||
},
|
||||
{
|
||||
"id": "ari-009-mochilas-disney-coleccion-marvel",
|
||||
@@ -200,20 +135,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp",
|
||||
"fbid": "18137839804491353"
|
||||
},
|
||||
{
|
||||
"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 ",
|
||||
"id": "ari-010-mochila-ligera-y-resistente-al-agua-de-d",
|
||||
"name": "Mochila ligera y resistente al agua de Disney Frozen, mochila escolar y de viaje con múltiples compa",
|
||||
"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",
|
||||
@@ -223,20 +150,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp",
|
||||
"fbid": "18111649603646835"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-011-mochila-escolar-de-spider-man-de-disney-",
|
||||
"name": "Mochila escolar de Spider-Man de Disney, moda estudiantil, libro de gran capacidad, mochila ligera, ",
|
||||
"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",
|
||||
@@ -246,20 +165,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp",
|
||||
"fbid": "18087568414880256"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-012-disney-mochila-de-poliester-ultraligera-",
|
||||
"name": "Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimension",
|
||||
"category": "Mochilas",
|
||||
"collection": "Disney",
|
||||
"description": "Disney Mochila de poliéster ultraligera y transpirable, de gran tamaño y múltiples colores Dimensiones 39x16x46",
|
||||
@@ -269,16 +180,8 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-.webp",
|
||||
"fbid": "18077075042356897"
|
||||
},
|
||||
{
|
||||
"id": "ari-013-mochila-pequena-bob-esponja",
|
||||
@@ -292,20 +195,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-013-mochila-pequena-bob-esponja.webp",
|
||||
"fbid": "17891585106407663"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-014-mochila-casual-de-gran-capacidad-con-est",
|
||||
"name": "Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos anim",
|
||||
"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 ",
|
||||
@@ -315,20 +210,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-est.webp",
|
||||
"fbid": "18119703688604702"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-015-mochila-escolar-estilo-britanico-de-disn",
|
||||
"name": "Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de ",
|
||||
"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 ",
|
||||
@@ -338,20 +225,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disn.webp",
|
||||
"fbid": "18558512062005705"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-016-disney-mochila-iron-man-de-poliester-ult",
|
||||
"name": "Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x",
|
||||
"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 ",
|
||||
@@ -361,20 +240,12 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp",
|
||||
"fbid": "17862794898572444"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"id": "ari-017-mochila-de-disney-marvel-capitan-america",
|
||||
"name": "Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, par",
|
||||
"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 ",
|
||||
@@ -384,16 +255,8 @@
|
||||
"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"
|
||||
}
|
||||
"image": "assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america.webp",
|
||||
"fbid": "17977485617974392"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
{
|
||||
"version": "2.1.0",
|
||||
"version": "2.2.0",
|
||||
"brand": "Ari Shopping",
|
||||
"tagline": "Variedad de productos y marcas en un solo lugar.",
|
||||
"instagramUrl": "https://www.instagram.com/ari_shopping1/",
|
||||
"facebookUrl": "https://www.facebook.com/arishopping1imp/",
|
||||
"whatsappUrl": "https://wa.link/rvcqqc",
|
||||
"deliveryText": "Envíos seguros",
|
||||
"paymentText": "Pagos fáciles",
|
||||
"supportText": "Atención personalizada",
|
||||
"catalogUrl": "data/products.json",
|
||||
"currency": "COP",
|
||||
"locale": "es-CO"
|
||||
|
||||
@@ -2,75 +2,82 @@
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||||
<meta name="theme-color" content="#ff3f86">
|
||||
<meta name="description" content="Ari Shopping: juguetes, peluches, mochilas y regalos con atención personalizada.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#ff4f98">
|
||||
<title>Ari Shopping</title>
|
||||
<link rel="icon" href="assets/img/brand/favicon.svg" type="image/svg+xml">
|
||||
<meta name="description" content="Ari Shopping · juguetes, peluches, mochilas y regalos con atención personalizada.">
|
||||
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
<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>
|
||||
<div class="topbar">Envíos seguros · Atención personalizada · Pedidos por WhatsApp</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>
|
||||
<div class="container header-grid">
|
||||
<a class="brand" href="#inicio" aria-label="Ari Shopping">
|
||||
<img class="brand-logo" src="assets/img/brand/logo-ari.png" alt="Logo Ari Shopping">
|
||||
<div class="brand-copy">
|
||||
<strong>Ari Shopping</strong>
|
||||
<span>Detalles que hacen tu día más especial</span>
|
||||
</div>
|
||||
</a>
|
||||
<nav class="main-nav" aria-label="Secciones">
|
||||
<button data-nav="Todos">Todos</button>
|
||||
<button data-nav="Figuras">Juguetes</button>
|
||||
<button data-nav="Peluches">Peluches</button>
|
||||
<button data-nav="Mochilas">Mochilas</button>
|
||||
<button data-col="Marvel">Marvel</button>
|
||||
<button data-col="Toy Story">Toy Story</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>
|
||||
<button id="searchToggle" class="ghost-btn" type="button">Buscar</button>
|
||||
<button id="cartOpen" class="pill-btn" type="button">Carrito <span id="cartCount">0</span></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>
|
||||
<div class="container search-row" id="searchRow" hidden>
|
||||
<input id="searchInput" type="search" placeholder="Buscar producto o colección…">
|
||||
<button id="searchClose" class="ghost-btn" type="button">Cerrar</button>
|
||||
</div>
|
||||
</header>
|
||||
<main id="inicio">
|
||||
<section class="hero shell">
|
||||
<section class="hero container">
|
||||
<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 class="hero-actions">
|
||||
<a class="primary-btn" href="#productos">Explorar productos</a>
|
||||
<a class="link-btn" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Ver Instagram</a>
|
||||
</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>
|
||||
</div>
|
||||
<div class="hero-visual"><div class="hero-card"><img src="assets/img/hero/hero-real.webp" alt="Selección de productos reales de Ari Shopping"><small>Productos reales de Ari Shopping</small></div></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 class="benefits container">
|
||||
<article><div class="icon-dot">↗</div><div><strong>Envíos seguros</strong><span>Coordina tu entrega con nosotros.</span></div></article>
|
||||
<article><div class="icon-dot">▣</div><div><strong>Pagos fáciles</strong><span>Confirma disponibilidad antes de pagar.</span></div></article>
|
||||
<article><div class="icon-dot">♥</div><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>
|
||||
<section class="categories container">
|
||||
<div class="section-head"><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>
|
||||
<button class="category-card" data-cat="Figuras"><img src="assets/img/categories/figuras.webp" alt="Figuras"><div><strong>Juguetes</strong><span>Toy Story y personajes</span></div></button>
|
||||
<button class="category-card" data-cat="Peluches"><img src="assets/img/categories/peluches.webp" alt="Peluches"><div><strong>Peluches</strong><span>Personajes para regalar</span></div></button>
|
||||
<button class="category-card" data-cat="Mochilas"><img src="assets/img/categories/mochilas.webp" alt="Mochilas"><div><strong>Bolsos y mochilas</strong><span>Escolares y casuales</span></div></button>
|
||||
<button class="category-card" data-col="Marvel"><img src="assets/img/categories/marvel.webp" alt="Marvel"><div><strong>Marvel</strong><span>Diseños con personalidad</span></div></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 class="catalog container" id="productos">
|
||||
<div class="section-head catalog-head"><div><span class="eyebrow">Catálogo real</span><h2>Productos destacados</h2><p id="catalogSummary">Cargando productos…</p></div><a class="availability-link" target="_blank" rel="noopener" href="https://wa.link/rvcqqc">Consultar disponibilidad →</a></div>
|
||||
<div class="toolbar"><div class="chips" id="filterChips"></div><select id="sortSelect" aria-label="Ordenar productos"><option value="featured">Destacados</option><option value="new">Más recientes</option><option value="name">Nombre</option></select></div>
|
||||
<div class="product-grid" id="productGrid"></div>
|
||||
<div class="empty-state" id="emptyState" hidden><strong>No encontramos productos</strong><p>Intenta con otra categoría o restablece el catálogo.</p><button id="resetFilters" class="primary-btn" 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>
|
||||
<section class="social-band"><div class="container social-inner"><div><span class="eyebrow light">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="white-btn" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">@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>
|
||||
<footer class="site-footer"><div class="container footer-grid"><div class="footer-brand"><img src="assets/img/brand/logo-ari.png" alt="Ari Shopping"><div><strong>Ari Shopping</strong><span>Detalles que emocionan, compras que disfrutas.</span></div></div><div class="footer-meta">Frontend v2.2.0</div></div></footer>
|
||||
<aside id="cartDrawer" class="drawer" aria-hidden="true"><div class="drawer-header"><div><span class="eyebrow">Tu pedido</span><h3>Carrito</h3></div><button id="cartClose" class="ghost-btn" type="button">Cerrar</button></div><div id="cartItems" class="drawer-body"></div><div class="drawer-footer"><button id="checkoutBtn" class="primary-btn full" type="button">Enviar por WhatsApp</button><button id="clearCart" class="ghost-btn full" type="button">Vaciar pedido</button><small>Precio y disponibilidad se confirman directamente con Ari Shopping.</small></div></aside>
|
||||
<div id="backdrop" class="backdrop" hidden></div>
|
||||
<dialog id="productDialog" class="product-dialog"><button id="dialogClose" class="dialog-close" type="button">×</button><div id="dialogContent"></div></dialog>
|
||||
<template id="productTemplate"><article class="product-card"><button class="product-image product-open" type="button"><img alt=""></button><div class="product-content"><div class="product-tags"><span class="tag category"></span><span class="tag collection"></span></div><button class="product-title product-open" type="button"></button><p class="product-description"></p><div class="product-actions"><strong>Consultar</strong><button class="primary-small add-product" type="button">Agregar</button></div></div></article></template>
|
||||
<script src="assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -4,26 +4,34 @@ import csv, json
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
SOURCE=ROOT/'catalog-source.csv'
|
||||
OUTPUT=ROOT/'data/products.json'
|
||||
def boolean(v:str)->bool:return str(v).strip().lower() in {'1','true','yes','si','sí'}
|
||||
SRC = ROOT / 'catalog-source.csv'
|
||||
OUT = ROOT / 'data/products.json'
|
||||
|
||||
def to_bool(v: str) -> bool:
|
||||
return str(v).strip().lower() in {'1','true','yes','si','sí'}
|
||||
|
||||
def main() -> int:
|
||||
products = []
|
||||
with SOURCE.open(newline='',encoding='utf-8-sig') as handle:
|
||||
with SRC.open(newline='', encoding='utf-8-sig') as handle:
|
||||
for row in csv.DictReader(handle):
|
||||
raw=(row.get('price') or '').strip()
|
||||
price=int(float(raw)) if raw else None
|
||||
products.append({
|
||||
'id':row['id'].strip(),'name':row['name'].strip(),
|
||||
'category':row['category'].strip(),'collection':row['collection'].strip(),
|
||||
'description':row['description'].strip(),'dimensions':row['dimensions'].strip(),
|
||||
'price':price,'priceText':'Consultar disponibilidad' if price is None else '',
|
||||
'available':boolean(row['available']),'featured':boolean(row['featured']),
|
||||
'new':boolean(row['new']),'stockText':'Disponible para confirmar',
|
||||
'images':[row['image'].strip()],
|
||||
'source':{'type':'instagram-export','account':'ari_shopping1','fbid':row['source_fbid'].strip()}
|
||||
'id': row['id'].strip(),
|
||||
'name': row['name'].strip(),
|
||||
'category': row['category'].strip(),
|
||||
'collection': row['collection'].strip(),
|
||||
'description': row['description'].strip(),
|
||||
'dimensions': row['dimensions'].strip(),
|
||||
'price': None,
|
||||
'priceText': 'Consultar disponibilidad',
|
||||
'available': to_bool(row['available']),
|
||||
'featured': to_bool(row['featured']),
|
||||
'new': to_bool(row['new']),
|
||||
'image': row['image'].strip(),
|
||||
'fbid': row['fbid'].strip(),
|
||||
})
|
||||
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')
|
||||
print(f'OK: {len(products)} productos escritos en {OUTPUT}')
|
||||
OUT.write_text(json.dumps({'version':'2.2.0','updatedAt':datetime.now(timezone.utc).isoformat(),'pricingMode':'consult','products':products}, ensure_ascii=False, indent=2), encoding='utf-8')
|
||||
print(f'OK: {len(products)} productos escritos en {OUT}')
|
||||
return 0
|
||||
if __name__=='__main__':raise SystemExit(main())
|
||||
|
||||
if __name__ == '__main__':
|
||||
raise SystemExit(main())
|
||||
Reference in new issue
Block a user