Your basket is empty.

'; return; } box.innerHTML=items.map(function(i){ var p=BY_ID[i.product_id]; if(!p) return ''; return '

'+ (p.image?'

':'

')+ '

'+p.name+''+ '

'+money(p.price,p.currency)+' each

'+ '

'+ ''+ ''+i.qty+''+ ''+ '

'+ '

'+money(p.price*i.qty,p.currency)+'

'+ ''+ '

'; }).join(''); }); } function say(form,msg,bad){ var s=form.querySelector('[data-astra-status]'); if(!s){ s=document.createElement('p'); s.setAttribute('data-astra-status',''); form.appendChild(s); } s.textContent=msg; s.style.marginTop='12px'; s.style.fontSize='14px'; s.style.color=bad?'#c0392b':'#1f9d55'; } document.addEventListener('click',function(e){ var add=e.target.closest?e.target.closest('[data-astra-add]'):null; if(add){ e.preventDefault(); var id=Number(add.getAttribute('data-astra-add')); if(!id) return; var c=cart(), hit=c.filter(function(i){return i.product_id===id})[0]; if(hit) hit.qty++; else c.push({product_id:id,qty:1}); saveCart(c); var t=add.getAttribute('data-astra-added')||'Added'; var old=add.textContent; add.textContent=t; setTimeout(function(){add.textContent=old},1200); } var clear=e.target.closest?e.target.closest('[data-astra-cart-clear]'):null; if(clear){ e.preventDefault(); saveCart([]); } ['inc','dec','remove'].forEach(function(act){ var el=e.target.closest?e.target.closest('[data-astra-'+act+']'):null; if(!el) return; e.preventDefault(); var pid=Number(el.getAttribute('data-astra-'+act)); var c=cart(), hit=c.filter(function(i){return i.product_id===pid})[0]; if(!hit) return; if(act==='inc') hit.qty++; else if(act==='dec') hit.qty--; else hit.qty=0; saveCart(c.filter(function(i){return i.qty>0})); }); }); document.addEventListener('submit',function(e){ var f=e.target; var isCheckout=f.hasAttribute&&f.hasAttribute('data-astra-checkout'); var formName=f.getAttribute?f.getAttribute('data-astra-form'):null; if(!isCheckout&&!formName) return; e.preventDefault(); var data={}; new FormData(f).forEach(function(v,k){ data[k]=v; }); var btn=f.querySelector('[type=submit]'); var label=btn?btn.textContent:''; if(btn){ btn.disabled=true; btn.textContent='Sending...'; } var url,body; if(isCheckout){ var items=cart(); if(!items.length){ if(btn){btn.disabled=false;btn.textContent=label;} return say(f,'Your basket is empty.',true); } data.items=items; url=API+'/orders'; body=data; } else { url=API+'/forms/'+encodeURIComponent(formName||'contact'); body=data; } fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}) .then(function(r){ return r.json().then(function(j){ return {ok:r.ok,j:j}; }); }) .then(function(res){ if(btn){ btn.disabled=false; btn.textContent=label; } if(!res.ok){ return say(f,(res.j&&res.j.error)||'Something went wrong. Please try again.',true); } if(isCheckout){ saveCart([]); say(f,'Thank you. Your order reference is '+res.j.reference+'.'); } else { say(f,(res.j&&res.j.message)||'Thank you - your message has been received.'); f.reset(); } }) .catch(function(){ if(btn){ btn.disabled=false; btn.textContent=label; } say(f,'Could not reach the server. Please check your connection.',true); }); }); /* Motion. Sections are tagged and observed here rather than in the markup so it works on pages the customer built themselves, and so a template author never has to remember to add an attribute. */ function motion(){ var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(!reduce && 'IntersectionObserver' in window){ var io=new IntersectionObserver(function(entries){ entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('is-in'); io.unobserve(en.target); } }); },{rootMargin:'0px 0px -8% 0px',threshold:.06}); document.querySelectorAll('main > *').forEach(function(sec){ /* The header and anything already on screen at load must not fade in -- a hero that starts invisible reads as a broken page. */ var r=sec.getBoundingClientRect(); if(r.top < window.innerHeight * 0.9){ sec.classList.add('is-in'); return; } sec.setAttribute('data-reveal',''); io.observe(sec); }); document.querySelectorAll('.astra-products .product, .review, .card').forEach(function(el){ var r=el.getBoundingClientRect(); if(r.top < window.innerHeight * 0.9) return; el.setAttribute('data-reveal',''); io.observe(el); }); } var head=document.querySelector('.site-head'); if(head){ var onScroll=function(){ head.classList.toggle('is-stuck', window.scrollY > 4); }; onScroll(); window.addEventListener('scroll',onScroll,{passive:true}); } } /* ------------------------------------------------------------------ LIVE The page is a static file holding the catalogue as it stood at the last publish. This asks the site's own API what is true NOW and reconciles the two, so a price change, a stock change or a whole new product appears on the live shop within seconds without anyone rebuilding anything. Everything here is additive: if the request fails the visitor keeps the published page exactly as it is. That is the point of building static first — the site is never DEPENDENT on this call succeeding. */ function card(p){ var out = p.stock === 0; var sale = p.compare_at && !out; return '

'+ ''+ (p.image_url?' '+String(p.name).replace(/

':'

')+ (out?'Out of stock':'')+ (sale?'Sale':'')+ ''+ '

'+p.name+'

'+ (p.description?'

'+String(p.description).slice(0,92)+'

':'')+ '

'+money(p.price,p.currency)+''+ (p.compare_at?''+money(p.compare_at,p.currency)+'':'')+'

'+ (out?'View details' :'')+ '

'; } function live(){ fetch(API+'/catalogue',{cache:'no-store'}) .then(function(r){ return r.ok?r.json():null; }) .then(function(res){ if(!res||!res.ok||!res.products) return; var live=res.products; /* Keep the basket honest: a product deleted in the panel must not sit in somebody's basket pricing itself from stale data. */ var byId={}; live.forEach(function(p){ byId[p.id]=p; }); CATALOGUE=live; BY_ID=byId; var c=cart().filter(function(i){ return byId[i.product_id]; }); try{ localStorage.setItem(CART_KEY,JSON.stringify(c)); }catch(e){} /* The grid: rebuilt only when the live data actually differs, so a shop whose catalogue has not changed never flickers. */ document.querySelectorAll('[data-astra-grid]').forEach(function(grid){ var current=[].map.call(grid.querySelectorAll('.product'),function(el){ return el.getAttribute('data-live')||el.querySelector('[data-astra-add]')&&el.querySelector('[data-astra-add]').getAttribute('data-astra-add'); }).filter(Boolean).join(','); var next=live.map(function(p){ return String(p.id); }).join(','); var priceSig=live.map(function(p){ return p.id+':'+p.price+':'+(p.stock===0?'0':'1'); }).join(','); if(current===next && grid.getAttribute('data-sig')===priceSig) return; grid.setAttribute('data-sig',priceSig); grid.innerHTML=live.map(card).join(''); }); /* The product page: price, discount and availability, in place. */ var detail=document.querySelector('[data-astra-product]'); if(detail){ var p=byId[Number(detail.getAttribute('data-astra-product'))]; if(p){ var pr=detail.querySelector('.price'); if(pr) pr.textContent=money(p.price,p.currency); var was=detail.querySelector('.was'); if(was){ if(p.compare_at){ was.textContent=money(p.compare_at,p.currency); was.hidden=false; } else was.hidden=true; } detail.querySelectorAll('[data-astra-stock]').forEach(function(el){ el.textContent = p.stock===0?'Out of stock':(p.stock==null?'In stock':p.stock+' in stock'); }); var buy=detail.querySelector('[data-astra-add]'); if(buy && p.stock===0){ buy.disabled=true; buy.textContent='Out of stock'; } } } paint(); shopFilter(); motion(); }) .catch(function(){ /* offline or blocked: the published page stands as built */ }); } /* Shop filtering. The grid is a static file, so this narrows what is already on the page rather than asking a server -- instant, and it still works if the customer has restyled or reordered the cards. */ function shopFilter(){ var grid=document.querySelector('[data-astra-grid]'); if(!grid) return; /* Re-run after a live re-render, but the controls outside the grid keep their listeners -- binding them twice would toggle the filter back off. */ if(grid.getAttribute('data-bound')==='1'){ return; } grid.setAttribute('data-bound','1'); var search=document.querySelector('[data-astra-search]'); var cats=document.querySelectorAll('[data-astra-cat]'); var none=document.querySelector('[data-astra-noresults]'); var cat=''; function apply(){ var q=(search&&search.value||'').trim().toLowerCase(); var shown=0; grid.querySelectorAll('.product').forEach(function(card){ var okCat=!cat||card.getAttribute('data-cat')===cat; var okQ=!q||(card.getAttribute('data-name')||'').indexOf(q)>-1; var show=okCat&&okQ; card.style.display=show?'':'none'; if(show) shown++; }); if(none) none.hidden=shown>0; } if(search) search.addEventListener('input',apply); cats.forEach(function(b){ b.addEventListener('click',function(){ cat=b.getAttribute('data-astra-cat')||''; cats.forEach(function(x){ x.classList.toggle('is-on',x===b); }); apply(); }); }); } function boot(){ paint(); motion(); shopFilter(); live(); } if(document.readyState!=='loading') boot(); else document.addEventListener('DOMContentLoaded',boot); /* App Router keeps the document between pages, so a client-side navigation fires no DOMContentLoaded. Re-running on history changes keeps reveals and the basket count correct after an in-app link. */ window.addEventListener('popstate',function(){ setTimeout(boot,60); }); var _push=history.pushState; history.pushState=function(){ _push.apply(this,arguments); setTimeout(boot,60); }; })();

Your headline here