Bars – Generation H

/* * ============================================================ * SHOPIFY CUSTOM CART DRAWER * Features: * 1. Free shipping progress bar (threshold: 250 AED) * 2. Stock validation with error messages * 3. Frequently Bought Together (random upsell, excludes cart items) * ============================================================ * * INSTALLATION: * 1. Go to Shopify Admin > Online Store > Themes > Edit Code * 2. In layout/theme.liquid, paste the HTML (below) just before

* 3. In assets/, create cart-drawer.js and paste this JS code * 4. In layout/theme.liquid, add this before : * * 5. In assets/cart-drawer.css (create new), paste the CSS from bottom * 6. In layout/theme.liquid , add: * * * ============================================================ */ /* ---- CONFIG ---- */ const FREE_SHIPPING_THRESHOLD = 250; // AED /* ============================================================ CART DRAWER HTML Paste this in layout/theme.liquid just before ============================================================

============================================================ */ class CartDrawer { constructor() { this.threshold = FREE_SHIPPING_THRESHOLD; this.errorTimers = {}; this.upsellIds = []; // All products in store for upsell (fetched from Shopify) this.allProducts = []; this.init(); } async init() { await this.fetchAllProducts(); this.bindEvents(); await this.renderCart(); this.pickUpsell(); } /* ---- SHOPIFY API ---- */ async getCart() { const res = await fetch('/cart.js'); return res.json(); } async fetchAllProducts() { // Fetch all products for upsell — adjust limit as needed try { const res = await fetch('/products.json?limit=20'); const data = await res.json(); this.allProducts = data.products.map(p => ({ id: p.variants[0].id, productId: p.id, name: p.title, price: parseFloat(p.variants[0].price), stock: p.variants[0].inventory_quantity, image: p.images[0]?.src || '', handle: p.handle, })); } catch (e) { console.error('Could not fetch products:', e); } } async addToCartAPI(variantId, qty = 1) { const res = await fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: variantId, quantity: qty }), }); if (!res.ok) { const err = await res.json(); throw new Error(err.description || 'Could not add item'); } return res.json(); } async changeQtyAPI(variantId, qty) { const res = await fetch('/cart/change.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: variantId, quantity: qty }), }); return res.json(); } async removeFromCartAPI(variantId) { return this.changeQtyAPI(variantId, 0); } /* ---- OPEN / CLOSE ---- */ bindEvents() { document.getElementById('cd-close')?.addEventListener('click', () => this.close()); document.getElementById('cart-overlay')?.addEventListener('click', () => this.close()); // Open drawer when any add-to-cart button on the page is clicked document.querySelectorAll('[data-open-cart], .cart-icon, #cart-icon, .header__cart').forEach(el => { el.addEventListener('click', e => { e.preventDefault(); this.open(); }); }); } open() { document.getElementById('cart-drawer')?.classList.add('cd-open'); document.getElementById('cart-overlay')?.classList.add('cd-open'); document.getElementById('cart-drawer')?.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; this.renderCart(); } close() { document.getElementById('cart-drawer')?.classList.remove('cd-open'); document.getElementById('cart-overlay')?.classList.remove('cd-open'); document.getElementById('cart-drawer')?.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } /* ---- RENDER CART ---- */ async renderCart() { const cart = await this.getCart(); const itemsEl = document.getElementById('cd-items'); if (!itemsEl) return; if (cart.items.length === 0) { itemsEl.innerHTML = `

Your cart is empty

`; this.updateShipping(0); this.updateTotal(0); this.updateBadge(0); return; } const total = cart.total_price / 100; itemsEl.innerHTML = cart.items.map(item => `

$${item.product_title}$

${item.product_title}${item.variant_title !== 'Default Title' ? ' - ' + item.variant_title : ''}

${(item.final_line_price / 100).toFixed(2)}AED

${item.quantity}

`).join(''); // Bind qty and remove events itemsEl.querySelectorAll('.cd-qty-btn').forEach(btn => { btn.addEventListener('click', () => this.handleQtyChange(btn)); }); itemsEl.querySelectorAll('.cd-remove').forEach(btn => { btn.addEventListener('click', () => this.handleRemove(btn.dataset.id)); }); this.updateShipping(total); this.updateTotal(total); this.updateBadge(cart.item_count); this.pickUpsell(cart.items.map(i => i.product_id)); } /* ---- QTY CHANGE & STOCK VALIDATION ---- */ async handleQtyChange(btn) { const id = btn.dataset.id; const action = btn.dataset.action; const max = parseInt(btn.dataset.max) || 99; const valEl = btn.closest('.cd-qty-ctrl').querySelector('.cd-qty-val'); let current = parseInt(valEl.textContent); if (action === 'inc') { if (current >= max) { // Show stock error, do NOT increase this.showItemError(id, `Only ${max} item${max !== 1 ? 's' : ''} was added to your cart due to availability.`); return; } current++; } else { current = Math.max(0, current - 1); } if (current === 0) { await this.handleRemove(id); return; } valEl.textContent = current; await this.changeQtyAPI(id, current); await this.renderCart(); } async handleRemove(variantId) { await this.removeFromCartAPI(variantId); await this.renderCart(); } showItemError(id, msg) { const el = document.getElementById('cd-err-' + id); if (!el) return; el.textContent = msg; el.classList.add('visible'); clearTimeout(this.errorTimers[id]); this.errorTimers[id] = setTimeout(() => { el.classList.remove('visible'); el.textContent = ''; }, 3000); } /* ---- SHIPPING PROGRESS ---- */ updateShipping(total) { const bar = document.getElementById('cd-progress-bar'); const txt = document.getElementById('cd-ship-text'); const emoji = document.querySelector('.cd-ship-emoji'); if (!bar || !txt) return; const remaining = this.threshold - total; const pct = Math.min(100, (total / this.threshold) * 100); if (remaining > 0) { txt.innerHTML = `Add ${remaining.toFixed(2)}AED to get free shipping`; if (emoji) emoji.textContent = '👉'; bar.style.width = pct + '%'; bar.style.background = 'linear-gradient(90deg, #111 0%, #555 100%)'; } else { txt.innerHTML = `🎉 You've unlocked Free shipping!`; if (emoji) emoji.textContent = ''; bar.style.width = '100%'; bar.style.background = '#4CAF50'; } } updateTotal(total) { const el = document.getElementById('cd-total'); if (el) el.textContent = total.toFixed(2); } updateBadge(count) { document.querySelectorAll('.cart-count, .cart-badge, [data-cart-count]').forEach(el => { el.textContent = count; }); } /* ---- UPSELL / FREQUENTLY BOUGHT TOGETHER ---- */ pickUpsell(cartProductIds = []) { const available = this.allProducts.filter(p => !cartProductIds.includes(p.productId)); const shuffled = available.sort(() => Math.random() - 0.5); this.upsellIds = shuffled.slice(0, 3).map(p => p.id); this.renderUpsell(); } renderUpsell() { const el = document.getElementById('cd-upsell-list'); if (!el) return; const products = this.upsellIds .map(id => this.allProducts.find(p => p.id === id)) .filter(Boolean); if (products.length === 0) { el.innerHTML = '

No suggestions available

'; return; } el.innerHTML = products.map(p => `

${p.name}

${p.stock <= 3 ? 'Low Stock' : ''}

${p.name}

${p.price.toFixed(2)}AED

`).join(''); } async upsellAdd(variantId, btn) { const product = this.allProducts.find(p => p.id === variantId); if (!product) return; try { btn.textContent = '...'; btn.disabled = true; await this.addToCartAPI(variantId, 1); btn.textContent = '✓ Added'; btn.classList.add('cd-added'); await this.renderCart(); } catch (err) { btn.textContent = 'Add To Cart'; btn.disabled = false; this.showItemError(variantId, err.message); } } } /* ---- INIT ---- */ const cartDrawer = new CartDrawer(); // Expose open function globally for theme buttons window.openCartDrawer = () => cartDrawer.open(); /* ============================================================ CSS — Save as assets/cart-drawer.css ============================================================ .cd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .cd-overlay.cd-open { opacity: 1; pointer-events: all; } .cd-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 380px; max-width: 100vw; background: #fff; z-index: 1000; transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -6px 0 30px rgba(0,0,0,0.12); } .cd-drawer.cd-open { transform: translateX(0); } .cd-header { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .cd-title { font-size: 18px; font-weight: 700; } .cd-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #333; padding: 4px 8px; border-radius: 4px; } .cd-close:hover { background: #f5f5f5; } .cd-shipping-banner { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .cd-shipping-msg { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .cd-progress-track { height: 5px; background: #e8e8e8; border-radius: 10px; overflow: hidden; } .cd-progress-bar { height: 100%; border-radius: 10px; transition: width 0.5s ease, background 0.5s ease; width: 0%; } .cd-items { flex: 1; overflow-y: auto; padding: 12px 20px; } .cd-empty { text-align: center; color: #aaa; padding: 40px 0; font-size: 14px; } .cd-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .cd-item:last-child { border-bottom: none; } .cd-item-img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid #e8e8e8; flex-shrink: 0; background: #f5f5f5; } .cd-item-info { flex: 1; } .cd-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; } .cd-item-price { font-size: 14px; font-weight: 700; margin-bottom: 8px; } .cd-item-actions { display: flex; align-items: center; gap: 10px; } .cd-qty-ctrl { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; } .cd-qty-btn { width: 30px; height: 30px; background: none; border: none; cursor: pointer; font-size: 16px; color: #333; display: flex; align-items: center; justify-content: center; } .cd-qty-btn:hover { background: #f5f5f5; } .cd-qty-val { width: 32px; text-align: center; font-size: 13px; font-weight: 600; } .cd-remove { background: none; border: none; cursor: pointer; color: #bbb; font-size: 15px; margin-left: auto; } .cd-remove:hover { color: #e44; } .cd-stock-err { font-size: 12px; color: #e44; font-weight: 500; margin-top: 5px; display: none; animation: cdFade 0.3s ease; } .cd-stock-err.visible { display: block; } @keyframes cdFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .cd-upsell { padding: 14px 20px; background: #f9f9f9; border-top: 1px solid #efefef; flex-shrink: 0; max-height: 260px; overflow-y: auto; } .cd-upsell-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 8px 12px; background: #111; color: #fff; border-radius: 6px; margin-bottom: 12px; } .cd-upsell-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; } .cd-upsell-item:last-child { border-bottom: none; } .cd-upsell-img { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; border: 1px solid #ddd; flex-shrink: 0; background: #f0ece4; } .cd-upsell-info { flex: 1; } .cd-upsell-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; } .cd-upsell-price { font-size: 12px; color: #555; margin-top: 2px; } .cd-low-stock { font-size: 10px; font-weight: 700; color: #fff; background: #e44; padding: 2px 6px; border-radius: 4px; margin-bottom: 3px; display: inline-block; } .cd-add-btn { background: #111; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s, opacity 0.2s; } .cd-add-btn:hover { background: #333; } .cd-add-btn.cd-added { background: #4CAF50; } .cd-add-btn:disabled { opacity: 0.6; cursor: default; } .cd-footer { padding: 14px 20px; border-top: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; } .cd-checkout-btn { width: 100%; padding: 14px; background: #111; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; transition: background 0.2s; } .cd-checkout-btn:hover { background: #222; } .cd-guarantee { text-align: center; font-size: 11px; color: #999; margin-top: 8px; letter-spacing: 0.5px; } ============================================================ */

FREE Delivery on Orders above AED250

Same day delivery for orders before 10am

Bars

Babies & Kids

Baking, Flour & Mixes

Breakfast Food

Drinks & Beverages

Health & Sports

Pantry Staples

Snacks, Bars & Treats

UAE Born

Babies & Kids

Baking, Flour & Mixes

Breakfast Food

Drinks & Beverages

Health & Sports

Pantry Staples

Snacks, Bars & Treats

UAE Born

‹

›