${p.image ? "" : p.emoji}

${p.name}

${p.desc}

${money(p.price)}

`).join("") : `

No products match your search.

`; } function renderCart() { const items = Object.entries(cart).map(([id, qty]) => ({ p: PRODUCTS.find(x => x.id == id), qty })).filter(i => i.p); $("cartItems").innerHTML = items.length ? items.map(({ p, qty }) => `

${p.name}

${qty}

${money(p.price * qty)}

`).join("") : `

Your cart is empty. Add something you like.

`; const total = items.reduce((s, i) => s + i.p.price * i.qty, 0); $("total").textContent = money(total); $("cartCount").textContent = items.reduce((s, i) => s + i.qty, 0); $("checkout").disabled = !items.length; save(); } function change(id, delta) { cart[id] = (cart[id] || 0) + delta; if (cart[id] <= 0) delete cart[id]; renderCart(); } function toggleCart(open) { $("drawer").classList.toggle("open", open); $("overlay").classList.toggle("show", open); $("drawer").setAttribute("aria-hidden", String(!open)); } function checkout() { const lines = Object.entries(cart).map(([id, qty]) => { const p = PRODUCTS.find(x => x.id == id); return `• ${qty} x ${p.name} – ${money(p.price * qty)}`; }); const total = Object.entries(cart).reduce((s, [id, q]) => s + PRODUCTS.find(x => x.id == id).price * q, 0); const msg = `Hello ${SHOP_NAME}, I'd like to order:\n${lines.join("\n")}\nTotal: ${money(total)}`; window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(msg)}`, "_blank"); } // Events $("filters").addEventListener("click", e => { if (e.target.dataset.cat) { category = e.target.dataset.cat; renderFilters(); renderProducts(); } }); $("search").addEventListener("input", e => { query = e.target.value; renderProducts(); }); $("grid").addEventListener("click", e => { if (e.target.dataset.id) { change(e.target.dataset.id, 1); toggleCart(true); } }); $("cartItems").addEventListener("click", e => { if (e.target.dataset.inc) change(e.target.dataset.inc, 1); if (e.target.dataset.dec) change(e.target.dataset.dec, -1); }); $("cartBtn").addEventListener("click", () => toggleCart(true)); $("closeCart").addEventListener("click", () => toggleCart(false)); $("overlay").addEventListener("click", () => toggleCart(false)); document.addEventListener("keydown", e => { if (e.key === "Escape") toggleCart(false); }); $("clear").addEventListener("click", () => { cart = {}; renderCart(); }); $("checkout").addEventListener("click", checkout); $("year").textContent = new Date().getFullYear(); renderFilters(); renderProducts(); renderCart();