PrismSight Clay Studio

Your table plan

A cart for thoughtful choices.

This prototype cart helps you compare classes. It does not process payment, reserve seats, or create a booking.

`; headerContainer.innerHTML = headerHTML; footerContainer.innerHTML = footerHTML; // Mobile menu const menuToggle = document.getElementById('menuToggle'); const mobileNav = document.getElementById('mobileNav'); if (menuToggle && mobileNav) { menuToggle.addEventListener('click', () => { mobileNav.classList.toggle('hidden'); }); } // Cookie banner const banner = document.getElementById('cookieBanner'); const acceptBtn = document.getElementById('acceptCookies'); if (banner && acceptBtn) { if (localStorage.getItem('cookieConsent') !== 'true') { banner.classList.remove('hidden'); banner.classList.add('flex'); } acceptBtn.addEventListener('click', function() { localStorage.setItem('cookieConsent', 'true'); banner.classList.remove('flex'); banner.classList.add('hidden'); }); } // Cart logic let cart = JSON.parse(localStorage.getItem('clayCart') || '{}'); let catalogData = {}; function saveCart() { localStorage.setItem('clayCart', JSON.stringify(cart)); } function calculateTotal() { let total = 0; Object.keys(cart).forEach(id => { if (catalogData[id]) { total += catalogData[id].price * cart[id]; } }); return total; } function updateTotal() { const totalEl = document.getElementById('cartTotal'); totalEl.textContent = '$' + calculateTotal().toFixed(2); } function renderCart() { const container = document.getElementById('cartItems'); container.innerHTML = ''; const ids = Object.keys(cart); if (ids.length === 0) { container.innerHTML = `

Your cart is empty.

Browse classes
`; updateTotal(); return; } ids.forEach(id => { if (!catalogData[id]) return; const item = catalogData[id]; const qty = cart[id]; const lineTotal = (item.price * qty).toFixed(2); const card = document.createElement('div'); card.className = 'rounded-3xl border border-orange-200 bg-white p-6'; card.innerHTML = `

${item.name}

${item.duration} • $${item.price}

${qty}
$${lineTotal}
`; container.appendChild(card); }); // Attach listeners container.querySelectorAll('button[data-action]').forEach(btn => { btn.addEventListener('click', () => { const id = btn.dataset.id; const action = btn.dataset.action; if (action === 'inc') { cart[id] = (cart[id] || 0) + 1; } else if (action === 'dec') { cart[id] = Math.max(1, (cart[id] || 1) - 1); } else if (action === 'remove') { delete cart[id]; } saveCart(); renderCart(); }); }); updateTotal(); } // Fetch catalog fetch('./catalog.json') .then(r => r.json()) .then(data => { data.forEach(item => { catalogData[item.id] = item; }); renderCart(); }) .catch(() => { // Fallback demo data catalogData = { 'c1': {id:'c1', name:'Handbuilding Foundations', price:85, duration:'3 hours'}, 'c2': {id:'c2', name:'Wheel Throwing Intensive', price:120, duration:'4 hours'}, 'c3': {id:'c3', name:'Sculptural Form Studio', price:95, duration:'3.5 hours'} }; renderCart(); }); // Checkout const checkoutBtn = document.getElementById('checkoutButton'); const modal = document.getElementById('checkoutModal'); checkoutBtn.addEventListener('click', () => { if (Object.keys(cart).length > 0) { modal.classList.remove('hidden'); modal.classList.add('grid'); } }); modal.addEventListener('click', (e) => { if (e.target === modal || e.target.hasAttribute('data-close-modal')) { modal.classList.remove('grid'); modal.classList.add('hidden'); } }); })();