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.
Reconstrucción completa de la tienda. CSS y JavaScript están integrados en `index.html` para impedir que el sitio vuelva a desplegarse sin estilos o sin interacción.
functionrenderProducts(){constlist=filtered();els.summary.textContent=`${list.length} productos disponibles para consultar.`;els.empty.hidden=list.length>0;els.productGrid.innerHTML='';list.forEach((product)=>{constfrag=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);});}
functionrenderCart(){constentries=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)));}
functionopenDialog(id){constp=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();}
functionbuildWhatsAppMessage(){constentries=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');}
<title>Ari Shopping</title><metaname="description"content="Tienda online Ari Shopping"><linkrel="icon"href="assets/img/brand/favicon.png"type="image/png">
<metaname="theme-color"content="#ff4f98">
<style>
<title>Ari Shopping</title>
:root{
<metaname="description"content="Ari Shopping · juguetes, peluches, mochilas y regalos con atención personalizada.">
<aclass="brand"href="#inicio"><imgsrc="assets/img/brand/logo-ari.png"alt="Ari Shopping"><div><strong>Ari Shopping</strong><span>Detalles que hacen tu día más especial</span></div></a>
</div><divclass="wrap search"id="searchRow"hidden><inputid="searchInput"type="search"placeholder="Buscar producto o colección…"><buttonid="searchClose"class="ghost">Cerrar</button></div></header>
<strong>Ari Shopping</strong>
<span>Detalles que hacen tu día más especial</span>
<sectionclass="wrap hero"><div><spanclass="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><divclass="hero-actions"><aclass="cta"href="#productos">Explorar productos</a><aclass="white"href="https://www.instagram.com/ari_shopping1/"target="_blank"rel="noopener">Ver Instagram</a></div></div><divclass="hero-media"><imgsrc="assets/img/hero/hero-real.webp"alt="Productos Ari Shopping"><spanclass="hero-badge">Productos reales de Ari Shopping</span></div></section>
<divclass="hero-copy">
<sectionclass="wrap trust"><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>
<spanclass="eyebrow">Nueva colección</span>
<sectionclass="wrap section"><divclass="section-head"><div><spanclass="eyebrow">Explora la tienda</span><h2>Compra por categoría</h2><p>Encuentra rápidamente lo que estás buscando.</p></div><ahref="#productos">Ver todo →</a></div><divclass="category-grid">
<h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1>
<buttonclass="category-card"data-cat="Figuras"><imgsrc="assets/img/categories/figuras.webp"alt="Juguetes"><div><strong>Juguetes</strong><span>Toy Story y personajes</span></div></button>
<p>Juguetes, personajes, peluches y mochilas seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p>
<divclass="hero-visual"><divclass="hero-card"><imgsrc="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>
<sectionclass="benefits container">
<article><divclass="icon-dot">↗</div><div><strong>Envíos seguros</strong><span>Coordina tu entrega con nosotros.</span></div></article>
<article><divclass="icon-dot">▣</div><div><strong>Pagos fáciles</strong><span>Confirma disponibilidad antes de pagar.</span></div></article>
<article><divclass="icon-dot">♥</div><div><strong>Atención cercana</strong><span>Te ayudamos a elegir el producto ideal.</span></div></article>
</section>
<sectionclass="categories container">
<divclass="section-head"><div><spanclass="eyebrow">Explora la tienda</span><h2>Compra por categoría</h2><p>Encuentra rápidamente lo que estás buscando.</p></div><ahref="#productos">Ver todo →</a></div>
<divclass="category-grid">
<buttonclass="category-card"data-cat="Figuras"><imgsrc="assets/img/categories/figuras.webp"alt="Figuras"><div><strong>Juguetes</strong><span>Toy Story y personajes</span></div></button>
<buttonclass="category-card"data-cat="Peluches"><imgsrc="assets/img/categories/peluches.webp"alt="Peluches"><div><strong>Peluches</strong><span>Personajes para regalar</span></div></button>
<buttonclass="category-card"data-cat="Peluches"><imgsrc="assets/img/categories/peluches.webp"alt="Peluches"><div><strong>Peluches</strong><span>Personajes para regalar</span></div></button>
<buttonclass="category-card"data-cat="Mochilas"><imgsrc="assets/img/categories/mochilas.webp"alt="Mochilas"><div><strong>Bolsos y mochilas</strong><span>Escolares y casuales</span></div></button>
<buttonclass="category-card"data-cat="Mochilas"><imgsrc="assets/img/categories/mochilas.webp"alt="Mochilas"><div><strong>Bolsos y mochilas</strong><span>Escolares y casuales</span></div></button>
<buttonclass="category-card"data-col="Marvel"><imgsrc="assets/img/categories/marvel.webp"alt="Marvel"><div><strong>Marvel</strong><span>Diseños con personalidad</span></div></button>
<buttonclass="category-card"data-col="Marvel"><imgsrc="assets/img/categories/marvel.webp"alt="Marvel"><div><strong>Marvel</strong><span>Diseños con personalidad</span></div></button></div></section>
</div>
<sectionclass="wrap section"id="productos"><divclass="section-head"><div><spanclass="eyebrow">Catálogo real</span><h2>Productos destacados</h2><pid="summary">Cargando productos…</p></div><atarget="_blank"rel="noopener"href="https://wa.link/rvcqqc">Consultar disponibilidad →</a></div><divclass="toolbar"><divid="chips"class="chips"></div><selectid="sort"><optionvalue="featured">Destacados</option><optionvalue="new">Más recientes</option><optionvalue="name">Nombre</option></select></div><divid="productGrid"class="product-grid"></div><divid="empty"class="empty"hidden><strong>No encontramos productos</strong><p>Prueba con otra categoría.</p><buttonid="reset"class="cta">Ver todos</button></div></section>
</section>
<sectionclass="social"><divclass="wrap social-inner"><div><spanclass="eyebrow"style="color:#ffbad9">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><aclass="white"href="https://www.instagram.com/ari_shopping1/"target="_blank"rel="noopener">@ari_shopping1</a></div></section>
<divclass="empty-state"id="emptyState"hidden><strong>No encontramos productos</strong><p>Intenta con otra categoría o restablece el catálogo.</p><buttonid="resetFilters"class="primary-btn"type="button">Ver todos</button></div>
</section>
<sectionclass="social-band"><divclass="container social-inner"><div><spanclass="eyebrow light">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><aclass="white-btn"target="_blank"rel="noopener"href="https://www.instagram.com/ari_shopping1/">@ari_shopping1</a></div></section>
</main>
</main>
<footerclass="site-footer"><divclass="container footer-grid"><divclass="footer-brand"><imgsrc="assets/img/brand/logo-ari.png"alt="Ari Shopping"><div><strong>Ari Shopping</strong><span>Detalles que emocionan, compras que disfrutas.</span></div></div><divclass="footer-meta">Frontend v2.2.0</div></div></footer>
<footerclass="footer"><divclass="wrap footer-inner"><divclass="footer-brand"><imgsrc="assets/img/brand/logo-ari.png"alt="Ari Shopping"><div><strong>Ari Shopping</strong><span>Detalles que emocionan, compras que disfrutas.</span></div></div><small>Frontend v3.0.0</small></div></footer>
<asideid="cartDrawer"class="drawer"aria-hidden="true"><divclass="drawer-header"><div><spanclass="eyebrow">Tu pedido</span><h3>Carrito</h3></div><buttonid="cartClose"class="ghost-btn"type="button">Cerrar</button></div><divid="cartItems"class="drawer-body"></div><divclass="drawer-footer"><buttonid="checkoutBtn"class="primary-btn full"type="button">Enviar por WhatsApp</button><buttonid="clearCart"class="ghost-btn full"type="button">Vaciar pedido</button><small>Precio y disponibilidad se confirman directamente con Ari Shopping.</small></div></aside>
<divid="backdrop"class="backdrop"hidden></div><asideid="drawer"class="drawer"><divclass="drawer-head"><div><spanclass="eyebrow">Tu pedido</span><h3>Carrito</h3></div><buttonid="drawerClose"class="ghost">Cerrar</button></div><divid="cartItems"class="drawer-body"></div><divclass="drawer-foot"><buttonid="checkout"class="cta full">Enviar por WhatsApp</button><buttonid="clearCart"class="ghost full">Vaciar pedido</button><small>Precio y disponibilidad se confirman directamente con Ari Shopping.</small></div></aside>
functionrenderProducts(){constlist=filtered();el.summary.textContent=`${list.length} productos disponibles para consultar.`;el.empty.hidden=list.length>0;el.grid.innerHTML='';list.forEach(p=>{constf=el.tpl.content.cloneNode(true);$('img',f).src=p.image;$('img',f).alt=p.name;$('.cat',f).textContent=p.category;$('.col',f).textContent=p.collection;$('.product-title',f).textContent=p.name;$('.product-desc',f).textContent=p.description;$$('.open-product',f).forEach(b=>b.addEventListener('click',()=>openDialog(p.id)));$('.add',f).addEventListener('click',()=>add(p.id));el.grid.appendChild(f)})}
functionopenDialog(id){constp=product(id);if(!p)return;el.dialogContent.innerHTML=`<div class="dialog-grid"><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="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="cta">Agregar al pedido</button><a class="ghost" target="_blank" rel="noopener" href="${state.store.whatsappUrl}">Consultar por WhatsApp</a></div></div></div>`;$('#dialogAdd',el.dialogContent).addEventListener('click',()=>{add(id);el.dialog.close()});el.dialog.showModal()}
functioncheckout(){constlist=cartEntries();constmsg=['Hola Ari Shopping 👋','Quiero consultar disponibilidad para:','',...list.map(x=>`• ${x.qty} x ${x.p.name}`),'','Nombre:','Ciudad:','Forma de entrega:'].join('\n');window.open(`${state.store.whatsappUrl}?text=${encodeURIComponent(msg)}`,'_blank','noopener')}
init().catch(err=>{console.error(err);el.summary.textContent='No se pudo cargar el catálogo.';el.empty.hidden=false});
})();
</script>
</body></html>
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
