T
TrueScene Clay Studio
STUDIO PLANS

Your cart

Review selected workshops, adjust quantities, and request your preferred dates.

Estimated total
$0
Ask about availability →
This is a non-payment inquiry cart. We will contact you within 48 hours to confirm dates and availability.
`; const footerHTML = ` `; headerContainer.innerHTML = headerHTML; footerContainer.innerHTML = footerHTML; // Attach header/footer functionality attachHeaderListeners(); attachFooterListeners(); } function attachHeaderListeners() { // Mobile menu const mobileToggle = document.getElementById('mobile-menu-toggle'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileToggle && mobileMenu) { mobileToggle.addEventListener('click', () => mobileMenu.classList.toggle('hidden')); } // Theme toggle const themeBtn = document.getElementById('theme-toggle'); const themeIcon = document.getElementById('theme-icon'); if (themeBtn) { const currentTheme = localStorage.getItem('ts-theme') || 'light'; if (currentTheme === 'dark') document.documentElement.classList.add('dark'); themeBtn.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); const isDark = document.documentElement.classList.contains('dark'); localStorage.setItem('ts-theme', isDark ? 'dark' : 'light'); }); } // Auth modals (simplified) const loginBtns = document.querySelectorAll('#login-trigger, #mobile-login-trigger'); const registerBtns = document.querySelectorAll('#register-trigger, #mobile-register-trigger'); loginBtns.forEach(btn => btn.addEventListener('click', () => { alert('Sign in modal would open here (demo)'); })); registerBtns.forEach(btn => btn.addEventListener('click', () => { alert('Register modal would open here (demo)'); })); } function attachFooterListeners() { const cookieBanner = document.getElementById('cookie-banner'); const acceptBtn = document.getElementById('accept-cookies'); const closeBtn = document.getElementById('close-cookie'); if (cookieBanner && !localStorage.getItem('ts-cookie-consent')) { cookieBanner.classList.remove('hidden'); } if (acceptBtn) acceptBtn.onclick = () => { localStorage.setItem('ts-cookie-consent', 'accepted'); cookieBanner.classList.add('hidden'); }; if (closeBtn) closeBtn.onclick = () => { localStorage.setItem('ts-cookie-consent', 'accepted'); cookieBanner.classList.add('hidden'); }; } // Cart functionality let catalogData = []; async function fetchCatalog() { try { const res = await fetch('./catalog.json'); if (!res.ok) throw new Error('No catalog'); catalogData = await res.json(); } catch (e) { catalogData = [ {id:1,title:"Wheel Throwing Fundamentals",price:185,category:"Beginner"}, {id:2,title:"Handbuilding Sculptures",price:210,category:"Intermediate"}, {id:3,title:"Glazing & Surface Design",price:165,category:"All Levels"} ]; } } function renderCart() { const container = document.getElementById('cart-lines'); const emptyState = document.getElementById('empty-state'); const totalEl = document.getElementById('cart-total'); const checkoutBtn = document.getElementById('checkout-btn'); const cart = JSON.parse(localStorage.getItem('ts-cart') || '{}'); const items = catalogData.filter(x => cart[x.id]); if (items.length === 0) { container.innerHTML = ''; emptyState.classList.remove('hidden'); totalEl.textContent = '$0'; checkoutBtn.disabled = true; checkoutBtn.classList.add('opacity-50', 'cursor-not-allowed'); return; } emptyState.classList.add('hidden'); checkoutBtn.disabled = false; checkoutBtn.classList.remove('opacity-50', 'cursor-not-allowed'); let total = 0; container.innerHTML = items.map(item => { const qty = cart[item.id]; const lineTotal = item.price * qty; total += lineTotal; return `
${item.title}
$${item.price} × ${qty}
${qty}
$${lineTotal}
`; }).join(''); totalEl.textContent = '$' + total; // Attach quantity and remove listeners attachCartListeners(); } function attachCartListeners() { document.querySelectorAll('[data-qty-inc]').forEach(btn => { btn.onclick = () => updateQuantity(parseInt(btn.dataset.qtyInc), 1); }); document.querySelectorAll('[data-qty-dec]').forEach(btn => { btn.onclick = () => updateQuantity(parseInt(btn.dataset.qtyDec), -1); }); document.querySelectorAll('[data-remove]').forEach(btn => { btn.onclick = () => removeFromCart(parseInt(btn.dataset.remove)); }); } function updateQuantity(id, delta) { const cart = JSON.parse(localStorage.getItem('ts-cart') || '{}'); cart[id] = Math.max(1, (cart[id] || 1) + delta); localStorage.setItem('ts-cart', JSON.stringify(cart)); renderCart(); } function removeFromCart(id) { const cart = JSON.parse(localStorage.getItem('ts-cart') || '{}'); delete cart[id]; localStorage.setItem('ts-cart', JSON.stringify(cart)); renderCart(); } function initCheckout() { const checkoutBtn = document.getElementById('checkout-btn'); const modal = document.getElementById('confirm-modal'); const closeBtn = document.getElementById('close-confirm'); checkoutBtn.addEventListener('click', () => { modal.classList.remove('hidden'); modal.classList.add('flex'); localStorage.removeItem('ts-cart'); }); closeBtn.addEventListener('click', () => { modal.classList.remove('flex'); modal.classList.add('hidden'); window.location.href = './catalog.html'; }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('flex'); modal.classList.add('hidden'); } }); } async function init() { initTailwind(); await loadHeaderFooter(); await fetchCatalog(); renderCart(); initCheckout(); } window.onload = init;