diff --git a/workloads/ecommerce/README.md b/workloads/ecommerce/README.md index 677f49e..e276caf 100644 --- a/workloads/ecommerce/README.md +++ b/workloads/ecommerce/README.md @@ -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. diff --git a/workloads/ecommerce/assets/css/styles.css b/workloads/ecommerce/assets/css/styles.css index 7f8ad0f..bd90556 100644 --- a/workloads/ecommerce/assets/css/styles.css +++ b/workloads/ecommerce/assets/css/styles.css @@ -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:0;border-radius:25px;color:#fff;background-image:linear-gradient(180deg,transparent 40%,rgba(16,8,20,.8)),var(--image);background-size:cover;background-position:center;cursor:pointer;text-align:left;transition:.25s ease}.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.category-card span{font-size:23px;font-weight:900}.category-card small{margin-top:4px;color:#eee3f0}.products-heading{margin-bottom:20px}.product-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.filter-chips{display:flex;gap:8px;overflow:auto;padding:4px 0}.filter-chip{flex:0 0 auto;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:12px;font-weight:800}.filter-chip.active{color:#fff;border-color:var(--ink);background:var(--ink)}.product-toolbar select{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:23px;background:#fff;transition:.25s ease}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.product-image{width:100%;aspect-ratio:1/1;overflow:hidden;border:0;padding:0;background:var(--soft);cursor:pointer}.product-image img{width:100%;height:100%;object-fit:cover;transition:.35s ease}.product-card:hover .product-image img{transform:scale(1.025)}.product-info{padding:16px}.product-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.product-name{width:100%;display:block;margin:9px 0 8px;border:0;padding:0;background:transparent;text-align:left;cursor:pointer;font-size:16px;font-weight:900;line-height:1.25}.product-name:hover{color:var(--pink-dark)}.product-description{height:56px;overflow:hidden;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px}.product-bottom>strong{font-size:12px}.add-button{min-width:94px;height:38px;border:0;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));cursor:pointer;font-weight:850;font-size:12px}.empty-state{padding:70px;text-align:center;border:1px dashed var(--line);border-radius:25px;background:var(--soft)}.social-band{padding:78px 0;color:#fff;background:#65195e}.social-band>.shell{display:flex;align-items:center;justify-content:space-between;gap:30px}.social-band .eyebrow{color:#ffb5d0}.social-band h2{max-width:820px;margin:10px 0 0;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.04em}footer{color:#dbd2de;background:#1b1320}.footer-main{min-height:120px;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:25px}.footer-main img{width:190px;filter:brightness(0) invert(1)}.footer-main p{margin:0;text-align:center;font-size:13px}.footer-main span{font-size:11px}.overlay{position:fixed;z-index:100;inset:0;background:rgba(24,14,28,.55);backdrop-filter:blur(4px)}.cart-drawer{position:fixed;z-index:110;top:0;right:0;width:min(430px,100%);height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:#fff;box-shadow:-25px 0 70px rgba(20,10,25,.2);transform:translateX(105%);transition:.25s ease}.cart-drawer.open{transform:none}.cart-drawer>header{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--line)}.cart-drawer h2{margin:5px 0}.cart-drawer header button,.dialog-close{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:24px;cursor:pointer}.cart-items{overflow:auto;padding:12px 22px}.cart-line{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.cart-line img{width:70px;height:70px;border-radius:13px;object-fit:cover}.cart-line strong{display:block;font-size:13px}.cart-line small{display:block;margin-top:5px;color:var(--muted)}.cart-line button{border:0;background:transparent;cursor:pointer}.qty{display:flex;align-items:center;gap:6px;margin-top:9px}.qty button{width:27px;height:27px;border-radius:50%;background:var(--soft)}.cart-footer{padding:20px 22px;border-top:1px solid var(--line)}.cart-footer small{display:block;margin-top:12px;color:var(--muted);text-align:center}.clear-cart{width:100%;margin-top:12px;border:0;background:transparent;color:var(--pink-dark);cursor:pointer}.cart-empty{padding:60px 10px;text-align:center;color:var(--muted)}dialog{width:min(940px,calc(100% - 26px));max-height:92dvh;padding:0;border:0;border-radius:28px;box-shadow:0 35px 100px rgba(25,10,30,.32)}dialog::backdrop{background:rgba(20,10,24,.6);backdrop-filter:blur(4px)}.dialog-close{position:sticky;z-index:4;top:14px;float:right;margin:14px 14px -56px 0}.dialog-layout{display:grid;grid-template-columns:1.05fr .95fr}.dialog-layout>img{width:100%;height:100%;min-height:580px;object-fit:cover}.dialog-copy{padding:60px 45px 45px}.dialog-copy h2{margin:10px 0 16px;font-size:39px;line-height:1.05;letter-spacing:-.04em}.dialog-copy p{color:var(--muted);line-height:1.7}.detail-list{display:grid;gap:9px;margin:22px 0;padding:18px;border-radius:18px;background:var(--soft)}.detail-list span{font-size:13px}.detail-list strong{display:inline-block;min-width:95px}.dialog-actions{display:grid;gap:10px;margin-top:22px}.toast-region{position:fixed;z-index:200;right:18px;bottom:18px;display:grid;gap:8px}.toast{max-width:350px;padding:14px 17px;border-radius:14px;color:#fff;background:var(--ink);box-shadow:var(--shadow)}@media(max-width:1040px){.header-shell{grid-template-columns:180px 1fr auto}.main-nav{gap:15px}.category-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.hero{gap:35px}}@media(max-width:800px){.announcement span{display:none}.header-shell{grid-template-columns:1fr auto}.main-nav{grid-column:1/-1;grid-row:2;justify-content:start;overflow:auto;padding-bottom:10px}.hero{grid-template-columns:1fr;padding-top:50px}.service-strip{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:1fr;text-align:center;padding-block:30px}.footer-main img{margin:auto}.dialog-layout{grid-template-columns:1fr}.dialog-layout>img{min-height:390px}.dialog-copy{padding:30px 25px}}@media(max-width:560px){.shell{width:min(calc(100% - 24px),var(--shell))}.hero h1{font-size:49px}.hero-actions{align-items:flex-start;flex-direction:column}.category-card{min-height:260px;padding:18px}.category-card span{font-size:19px}.product-grid{gap:10px}.product-info{padding:12px}.product-name{font-size:14px}.product-description{display:none}.product-bottom{align-items:stretch;flex-direction:column}.add-button{width:100%}.section-heading,.product-toolbar,.social-band>.shell{align-items:flex-start;flex-direction:column}.social-band{padding:55px 0}.cart-button span{display:none}} \ No newline at end of file +: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; } } diff --git a/workloads/ecommerce/assets/img/brand/favicon.png b/workloads/ecommerce/assets/img/brand/favicon.png new file mode 100644 index 0000000..b5fffbd Binary files /dev/null and b/workloads/ecommerce/assets/img/brand/favicon.png differ diff --git a/workloads/ecommerce/assets/img/brand/logo-ari.png b/workloads/ecommerce/assets/img/brand/logo-ari.png new file mode 100644 index 0000000..63be8bb Binary files /dev/null and b/workloads/ecommerce/assets/img/brand/logo-ari.png differ diff --git a/workloads/ecommerce/assets/img/categories/figuras.webp b/workloads/ecommerce/assets/img/categories/figuras.webp index 7aca683..e2069a7 100644 Binary files a/workloads/ecommerce/assets/img/categories/figuras.webp and b/workloads/ecommerce/assets/img/categories/figuras.webp differ diff --git a/workloads/ecommerce/assets/img/categories/marvel.webp b/workloads/ecommerce/assets/img/categories/marvel.webp index bbe9297..7da1094 100644 Binary files a/workloads/ecommerce/assets/img/categories/marvel.webp and b/workloads/ecommerce/assets/img/categories/marvel.webp differ diff --git a/workloads/ecommerce/assets/img/categories/mochilas.webp b/workloads/ecommerce/assets/img/categories/mochilas.webp index bbe9297..7da1094 100644 Binary files a/workloads/ecommerce/assets/img/categories/mochilas.webp and b/workloads/ecommerce/assets/img/categories/mochilas.webp differ diff --git a/workloads/ecommerce/assets/img/categories/peluches.webp b/workloads/ecommerce/assets/img/categories/peluches.webp index 6e6e6e7..a3f6df4 100644 Binary files a/workloads/ecommerce/assets/img/categories/peluches.webp and b/workloads/ecommerce/assets/img/categories/peluches.webp differ diff --git a/workloads/ecommerce/assets/img/hero/hero-real.webp b/workloads/ecommerce/assets/img/hero/hero-real.webp new file mode 100644 index 0000000..229caa1 Binary files /dev/null and b/workloads/ecommerce/assets/img/hero/hero-real.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-001-toy-story-5-rex.webp b/workloads/ecommerce/assets/img/products/ari-001-toy-story-5-rex.webp index fd0c3d3..3915fc9 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-001-toy-story-5-rex.webp and b/workloads/ecommerce/assets/img/products/ari-001-toy-story-5-rex.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp b/workloads/ecommerce/assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp index 7f6f78a..144a916 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp and b/workloads/ecommerce/assets/img/products/ari-002-toy-story-5-buzz-lightyear.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-003-toy-story-5-jessie.webp b/workloads/ecommerce/assets/img/products/ari-003-toy-story-5-jessie.webp index dccb33b..bfeb455 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-003-toy-story-5-jessie.webp and b/workloads/ecommerce/assets/img/products/ari-003-toy-story-5-jessie.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-004-toy-story-5-woody.webp b/workloads/ecommerce/assets/img/products/ari-004-toy-story-5-woody.webp index 75e59f7..b87fe96 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-004-toy-story-5-woody.webp and b/workloads/ecommerce/assets/img/products/ari-004-toy-story-5-woody.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-005-intensamente-furia.webp b/workloads/ecommerce/assets/img/products/ari-005-intensamente-furia.webp index 46164b1..dcafeaf 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-005-intensamente-furia.webp and b/workloads/ecommerce/assets/img/products/ari-005-intensamente-furia.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-006-intensamente-tristeza.webp b/workloads/ecommerce/assets/img/products/ari-006-intensamente-tristeza.webp index a86b6fd..b766137 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-006-intensamente-tristeza.webp and b/workloads/ecommerce/assets/img/products/ari-006-intensamente-tristeza.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-007-minnie-y-mickey-mouse.webp b/workloads/ecommerce/assets/img/products/ari-007-minnie-y-mickey-mouse.webp index 6ad2c7f..737bb28 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-007-minnie-y-mickey-mouse.webp and b/workloads/ecommerce/assets/img/products/ari-007-minnie-y-mickey-mouse.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-008-angel-lilo-y-stitch.webp b/workloads/ecommerce/assets/img/products/ari-008-angel-lilo-y-stitch.webp index 9631bc9..473d15c 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-008-angel-lilo-y-stitch.webp and b/workloads/ecommerce/assets/img/products/ari-008-angel-lilo-y-stitch.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp b/workloads/ecommerce/assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp index da427a8..520dbe2 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp and b/workloads/ecommerce/assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp b/workloads/ecommerce/assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp new file mode 100644 index 0000000..2fdcbc8 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp b/workloads/ecommerce/assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp new file mode 100644 index 0000000..5996742 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-.webp b/workloads/ecommerce/assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-.webp new file mode 100644 index 0000000..47c5870 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-012-disney-mochila-de-poliester-ultraligera-.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-013-mochila-pequena-bob-esponja.webp b/workloads/ecommerce/assets/img/products/ari-013-mochila-pequena-bob-esponja.webp index 56eec13..4ab189f 100644 Binary files a/workloads/ecommerce/assets/img/products/ari-013-mochila-pequena-bob-esponja.webp and b/workloads/ecommerce/assets/img/products/ari-013-mochila-pequena-bob-esponja.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-est.webp b/workloads/ecommerce/assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-est.webp new file mode 100644 index 0000000..8c71e95 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-est.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disn.webp b/workloads/ecommerce/assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disn.webp new file mode 100644 index 0000000..c251ccb Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disn.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp b/workloads/ecommerce/assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp new file mode 100644 index 0000000..ec9f278 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp differ diff --git a/workloads/ecommerce/assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america.webp b/workloads/ecommerce/assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america.webp new file mode 100644 index 0000000..8424057 Binary files /dev/null and b/workloads/ecommerce/assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america.webp differ diff --git a/workloads/ecommerce/assets/js/app.js b/workloads/ecommerce/assets/js/app.js index 77a5f57..955db45 100644 --- a/workloads/ecommerce/assets/js/app.js +++ b/workloads/ecommerce/assets/js/app.js @@ -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,"'")}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=>``).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='
Tu selección está vacía

Agrega productos para preparar el pedido.

';e.checkout.disabled=true;return}e.checkout.disabled=false;e.cartItems.innerHTML=list.map(({product:p,quantity:q})=>`
${esc(p.name)}${esc(p.collection)} · Consultar precio
${q}
`).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:","Ciudad:","Forma de entrega:"].join("\n")}async function checkout(){const list=entries();if(!list.length)return;try{await navigator.clipboard.writeText(orderText(list));toast("Pedido copiado. Se abrirá WhatsApp.")}catch{toast("Se abrirá WhatsApp para continuar.")}window.open(state.store.whatsappUrl,"_blank","noopener")}function openProduct(id){const p=byId(id);if(!p)return;e.dialogContent.innerHTML=`
${esc(p.name)}
${esc(p.category)} · ${esc(p.collection)}

${esc(p.name)}

${esc(p.description)}

Precio Consultar disponibilidadEntrega Coordinar con Ari Shopping${p.dimensions?`Medidas ${esc(p.dimensions)}`:""}
Consultar por WhatsApp
`;$("[data-dialog-add]",e.dialogContent).addEventListener("click",()=>{add(id);e.dialog.close();openCart()});e.dialog.showModal()}function filter(category="Todos",collection=""){state.category=category;state.collection=collection;renderFilters();renderProducts();$("#productos").scrollIntoView({behavior:"smooth"})}function reset(){state.category="Todos";state.collection="";state.query="";e.searchInput.value="";renderFilters();renderProducts()}function openCart(){e.drawer.classList.add("open");e.drawer.setAttribute("aria-hidden","false");e.overlay.hidden=false;document.body.classList.add("locked")}function closeCart(){e.drawer.classList.remove("open");e.drawer.setAttribute("aria-hidden","true");e.overlay.hidden=true;document.body.classList.remove("locked")}function toast(m){const n=document.createElement("div");n.className="toast";n.textContent=m;e.toast.appendChild(n);setTimeout(()=>n.remove(),3200)}function renderAll(){renderProducts();renderCart()}e.chips.addEventListener("click",ev=>{const b=ev.target.closest("[data-filter-category]");if(b)filter(b.dataset.filterCategory)});$$("[data-category]").forEach(b=>b.addEventListener("click",()=>filter(b.dataset.category)));$$("[data-collection]").forEach(b=>b.addEventListener("click",()=>filter("Todos",b.dataset.collection)));$$("[data-nav-category]").forEach(b=>b.addEventListener("click",()=>filter(b.dataset.navCategory)));$$("[data-nav-collection]").forEach(b=>b.addEventListener("click",()=>filter("Todos",b.dataset.navCollection)));e.sort.addEventListener("change",ev=>{state.sort=ev.target.value;renderProducts()});e.reset.addEventListener("click",reset);e.searchOpen.addEventListener("click",()=>{e.searchPanel.hidden=false;e.searchInput.focus()});e.searchClose.addEventListener("click",()=>e.searchPanel.hidden=true);e.searchInput.addEventListener("input",ev=>{state.query=ev.target.value;renderProducts()});e.cartBtn.addEventListener("click",openCart);e.cartClose.addEventListener("click",closeCart);e.overlay.addEventListener("click",closeCart);e.checkout.addEventListener("click",checkout);e.clear.addEventListener("click",()=>{state.cart={};save();renderCart()});e.dialogClose.addEventListener("click",()=>e.dialog.close());document.addEventListener("keydown",ev=>{if(ev.key==="Escape")closeCart()});load()})(); \ No newline at end of file +(() => { + 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) => ``).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 = '
Tu pedido está vacío

Agrega productos para consultarlos por WhatsApp.

'; return; } els.cartItems.innerHTML = entries.map(({ product, qty }) => `
${product.name}
${product.name}${product.collection} · Consultar disponibilidad
${qty}
`).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 = `
${p.name}
${p.category} · ${p.collection}

${p.name}

${p.description}

PrecioConsultar disponibilidad
EntregaCoordinar con Ari Shopping
${p.dimensions ? `
Medidas${p.dimensions}
` : ''}
Consultar por WhatsApp
`; $('#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; }); +})(); \ No newline at end of file diff --git a/workloads/ecommerce/catalog-source.csv b/workloads/ecommerce/catalog-source.csv index 9497761..a065bf8 100644 --- a/workloads/ecommerce/catalog-source.csv +++ b/workloads/ecommerce/catalog-source.csv @@ -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 diff --git a/workloads/ecommerce/data/products.json b/workloads/ecommerce/data/products.json index aa8a6fc..d00a5d2 100644 --- a/workloads/ecommerce/data/products.json +++ b/workloads/ecommerce/data/products.json @@ -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,135 +60,87 @@ "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", "name": "Intensamente Furia", "category": "Peluches", "collection": "Intensamente", - "description": "Intensamente Furia Disney Aprox 11 “", - "dimensions": "Aprox. 11 pulgadas", + "description": "Intensamente Furia Disney Aprox 11 “ ", + "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", "name": "Intensamente Tristeza", "category": "Peluches", "collection": "Intensamente", - "description": "Intensamente Tristeza Disney Aprox 11 “", - "dimensions": "Aprox. 11 pulgadas", + "description": "Intensamente Tristeza Disney Aprox 11 “ ", + "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", "name": "Minnie y Mickey Mouse", "category": "Peluches", "collection": "Mickey & Minnie", - "description": "Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “", - "dimensions": "Aprox. 15 pulgadas", + "description": "Minnie y Mickey Mouse Disney 🧸 Edición especial Aprox 15 “ ", + "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", "name": "Angel Lilo y Stitch", "category": "Peluches", "collection": "Lilo & Stitch", - "description": "Angel Lilo y Stitch Disney Aprox 13 “", - "dimensions": "Aprox. 13 pulgadas", + "description": "Angel Lilo y Stitch Disney Aprox 13 “ ", + "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", "name": "Mochilas Disney colección Marvel", "category": "Mochilas", "collection": "Marvel", - "description": "Mochilas Disney colección Marvel", + "description": "Mochilas Disney colección Marvel ", "dimensions": "", "price": null, "priceText": "Consultar disponibilidad", "available": true, "featured": false, "new": false, - "stockText": "Disponible para confirmar", - "images": [ - "assets/img/products/ari-009-mochilas-disney-coleccion-marvel.webp" - ], - "source": { - "type": "instagram-export", - "account": "ari_shopping1", - "fbid": "18137839804491353", - "capturedAt": "2026-01-29T03:07:00+00:00" - } + "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,108 +195,68 @@ "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", + "description": "Mochila casual de gran capacidad con estampado de Bob Esponja, unisex, bolsa escolar de dibujos animados linda, esencial para volver a la escuela Dimensiones 20 cm x 15 cm x 10 cm ", "dimensions": "20 × 15 × 10 cm", "price": null, "priceText": "Consultar disponibilidad", "available": true, "featured": false, "new": false, - "stockText": "Disponible para confirmar", - "images": [ - "assets/img/products/ari-014-mochila-casual-de-gran-capacidad-con-estam.webp" - ], - "source": { - "type": "instagram-export", - "account": "ari_shopping1", - "fbid": "18119703688604702", - "capturedAt": "2026-01-26T01:33:29+00:00" - } + "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", + "description": "Mochila escolar estilo britanico de Disney con protección de la columna vertebral, nueva mochila de gran capacidad y ultraligera para el inicio del colegio dimensiones 38 cm x 27 cm x 14.5 cm ", "dimensions": "38 × 27 × 14,5 cm", "price": null, "priceText": "Consultar disponibilidad", "available": true, "featured": false, "new": false, - "stockText": "Disponible para confirmar", - "images": [ - "assets/img/products/ari-015-mochila-escolar-estilo-britanico-de-disney.webp" - ], - "source": { - "type": "instagram-export", - "account": "ari_shopping1", - "fbid": "18558512062005705", - "capturedAt": "2026-01-26T01:32:17+00:00" - } + "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", + "description": "Disney Mochila Iron Man, de poliéster ultraligera y transpirable, de gran tamaño dimensiones 46 cm x 33 cm x 19 cm ", "dimensions": "46 × 33 × 19 cm", "price": null, "priceText": "Consultar disponibilidad", "available": true, "featured": false, "new": false, - "stockText": "Disponible para confirmar", - "images": [ - "assets/img/products/ari-016-disney-mochila-iron-man-de-poliester-ultra.webp" - ], - "source": { - "type": "instagram-export", - "account": "ari_shopping1", - "fbid": "17862794898572444", - "capturedAt": "2026-01-26T01:27:38+00:00" - } + "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", + "description": "Mochila de Disney Marvel Capitán America, de gran capacidad, ligera y resistente a salpicaduras, para estudiantes de secundaria dimensiones 45 cm x 30 cm x 14 cm ", "dimensions": "45 × 30 × 14 cm", "price": null, "priceText": "Consultar disponibilidad", "available": true, "featured": false, "new": false, - "stockText": "Disponible para confirmar", - "images": [ - "assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america-d.webp" - ], - "source": { - "type": "instagram-export", - "account": "ari_shopping1", - "fbid": "17977485617974392", - "capturedAt": "2026-01-26T01:24:48+00:00" - } + "image": "assets/img/products/ari-017-mochila-de-disney-marvel-capitan-america.webp", + "fbid": "17977485617974392" } ] } diff --git a/workloads/ecommerce/data/store.json b/workloads/ecommerce/data/store.json index 33fb01f..b98a839 100644 --- a/workloads/ecommerce/data/store.json +++ b/workloads/ecommerce/data/store.json @@ -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" diff --git a/workloads/ecommerce/index.html b/workloads/ecommerce/index.html index 4af5932..c208f07 100644 --- a/workloads/ecommerce/index.html +++ b/workloads/ecommerce/index.html @@ -2,75 +2,82 @@ - - - + + Ari Shopping - + + - - -
Envíos segurosAtención personalizadaPedidos por WhatsApp
+
Envíos seguros · Atención personalizada · Pedidos por WhatsApp
-
+
Nueva colección

Encuentra ese detalle que hace el día más especial.

Juguetes, personajes, peluches y mochilas seleccionados para sorprender. Compra fácil y recibe atención personalizada.

- +
-
Productos Toy Story de Ari ShoppingProductos reales de Ari Shopping
+
Selección de productos reales de Ari ShoppingProductos reales de Ari Shopping
-
-
Envíos segurosCoordina tu entrega con nosotros.
-
Pagos fácilesConfirma disponibilidad antes de pagar.
-
Atención cercanaTe ayudamos a elegir el producto ideal.
+
+
Envíos segurosCoordina tu entrega con nosotros.
+
Pagos fácilesConfirma disponibilidad antes de pagar.
+
Atención cercanaTe ayudamos a elegir el producto ideal.
-
-
Explora la tienda

Compra por categoría

Encuentra rápidamente lo que estás buscando.

Ver todo →
+
+
Explora la tienda

Compra por categoría

Encuentra rápidamente lo que estás buscando.

Ver todo →
- - - - + + + +
-
-
Catálogo real

Productos destacados

Cargando productos...

Consultar disponibilidad →
-
-
- +
+
Catálogo real

Productos destacados

Cargando productos…

Consultar disponibilidad →
+
+
+
- +
- - - -
-
- + + + +
+ + diff --git a/workloads/ecommerce/tools/__pycache__/catalog_sync.cpython-313.pyc b/workloads/ecommerce/tools/__pycache__/catalog_sync.cpython-313.pyc new file mode 100644 index 0000000..e534ec2 Binary files /dev/null and b/workloads/ecommerce/tools/__pycache__/catalog_sync.cpython-313.pyc differ diff --git a/workloads/ecommerce/tools/catalog_sync.py b/workloads/ecommerce/tools/catalog_sync.py index 365b5fd..c1e618e 100644 --- a/workloads/ecommerce/tools/catalog_sync.py +++ b/workloads/ecommerce/tools/catalog_sync.py @@ -3,27 +3,35 @@ from __future__ import annotations 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í'} -def main()->int: - products=[] - with SOURCE.open(newline='',encoding='utf-8-sig') as handle: +ROOT = Path(__file__).resolve().parents[1] +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 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())