document.addEventListener("DOMContentLoaded", function () { let selectedProducts = []; let MAX_ITEMS = 0; let hamperPrice = 0; const hamperSelect = document.getElementById('hamper-select'); const buttons = document.querySelectorAll('.add-to-box-btn'); const continueBtn = document.getElementById('continue-btn'); const bar = document.getElementById('selected-bar'); const text = document.getElementById('selected-count-text'); const progress = document.getElementById('progress-text'); // 🧠 HANDLE HAMPER CHANGE hamperSelect.addEventListener('change', function () { const selectedOption = this.options[this.selectedIndex]; MAX_ITEMS = parseInt(selectedOption.dataset.max); hamperPrice = this.value; selectedProducts = []; // Reset UI buttons.forEach(btn => { btn.innerText = "Add to Box"; btn.classList.remove('added'); btn.disabled = false; }); bar.style.display = "none"; continueBtn.disabled = true; progress.innerText = `Select ${MAX_ITEMS} items to continue`; text.innerText = "0 items selected"; }); // 🛒 ADD PRODUCT buttons.forEach(btn => { btn.addEventListener('click', function () { if (!MAX_ITEMS) { alert("Please select a hamper first"); return; } const id = this.dataset.id; if (selectedProducts.includes(id)) return; if (selectedProducts.length >= MAX_ITEMS) { alert(`Only ${MAX_ITEMS} items allowed`); return; } selectedProducts.push(id); this.innerText = "Added ✓"; this.classList.add('added'); this.disabled = true; updateUI(); }); }); function updateUI() { const count = selectedProducts.length; text.innerText = count + " items selected"; const remaining = MAX_ITEMS - count; progress.innerText = remaining > 0 ? `Only ${remaining} items left 🎁` : "Ready to checkout 🎉"; if (count > 0) bar.style.display = "flex"; if (count === MAX_ITEMS) { continueBtn.disabled = false; } } // 🚀 CONTINUE BUTTON continueBtn.addEventListener('click', function () { if (selectedProducts.length !== MAX_ITEMS) { alert(`Select exactly ${MAX_ITEMS} items`); return; } fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: selectedProducts.map(id => ({ id: id, quantity: 1 })) }) }) .then(() => { // Save hamper price (important trick) localStorage.setItem("hamperPrice", hamperPrice); window.location.href = '/cart'; }); }); });