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 revealAll(){ document.documentElement.classList.remove('astra-reveal-armed'); document.querySelectorAll('[data-reveal]').forEach(function(el){ el.classList.add('is-in'); }); } function motion(){ var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(reduce || !('IntersectionObserver' in window)){ revealAll(); return; } document.documentElement.classList.add('astra-reveal-armed'); /* Failsafe: whatever happens to the observer -- a re-render, a fast scroll, a browser quirk -- everything is visible within two seconds. */ clearTimeout(window.__astraReveal); window.__astraReveal = setTimeout(revealAll, 2000); /* Backstop while the page is being scrolled. */ if(!window.__astraRevealScroll){ window.__astraRevealScroll = true; window.addEventListener('scroll', function(){ document.querySelectorAll('[data-reveal]:not(.is-in)').forEach(function(el){ if(el.getBoundingClientRect().top < window.innerHeight) el.classList.add('is-in'); }); }, { passive: true }); } if(true){ 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(); carousels(); 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(); }); }); } /* Hero banner slider. Auto-advances, pauses on hover, and stops entirely for anyone who has asked their system to reduce motion. */ function sliders(){ document.querySelectorAll('[data-astra-slider]').forEach(function(box){ var slides=[].slice.call(box.querySelectorAll('.slide')); if(slides.length<2) return; box.classList.add('is-live'); var already=box.getAttribute('data-bound')==='1'; var dots=box.querySelector('[data-slider-dots]'); var i=0, timer=null; var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(dots){ dots.innerHTML=slides.map(function(_,n){ return ''; }).join(''); } function show(n){ i=(n+slides.length)%slides.length; slides.forEach(function(s,k){ s.classList.toggle('is-on',k===i); }); if(dots) [].forEach.call(dots.children,function(d,k){ d.classList.toggle('is-on',k===i); }); } function start(){ if(reduce) return; stop(); timer=setInterval(function(){ show(i+1); },5500); } function stop(){ if(timer) clearInterval(timer); timer=null; } box.addEventListener('click',function(e){ var p=e.target.closest('[data-slider-prev]'), n=e.target.closest('[data-slider-next]'), g=e.target.closest('[data-go]'); if(p){ show(i-1); start(); } if(n){ show(i+1); start(); } if(g){ show(Number(g.getAttribute('data-go'))); start(); } }); if(!already){ box.setAttribute('data-bound','1'); box.addEventListener('click',function(){}); box.addEventListener('mouseenter',stop); box.addEventListener('mouseleave',start); } /* Always re-assert which slide is showing: hydration may have dropped it. */ show(already ? i : 0); start(); }); } /* Product carousels. CSS scroll-snap does the movement; this only wires the arrows and hides them when there is nothing further to scroll to. */ function carousels(){ document.querySelectorAll('[data-astra-carousel]').forEach(function(box){ if(box.getAttribute('data-bound')==='1') return; box.setAttribute('data-bound','1'); /* ProductGrid replaces the placeholder, so the scrollable element is the rendered .astra-products grid, not any class the template put on the div. NO BACKTICKS ANYWHERE IN THIS FUNCTION: it lives inside a JS template literal, and a backtick here silently ends the runtime string. */ var track=box.querySelector('.astra-products'); if(!track) return; var prev=box.querySelector('[data-rail-prev]'), next=box.querySelector('[data-rail-next]'); function step(){ var c=track.querySelector('.product'); return c?c.offsetWidth+22:300; } function sync(){ var max=track.scrollWidth-track.clientWidth-4; if(prev) prev.disabled=track.scrollLeft<=4; if(next) next.disabled=track.scrollLeft>=max; } if(prev) prev.addEventListener('click',function(){ track.scrollBy({left:-step()*2,behavior:'smooth'}); }); if(next) next.addEventListener('click',function(){ track.scrollBy({left:step()*2,behavior:'smooth'}); }); track.addEventListener('scroll',sync,{passive:true}); sync(); }); } function boot(){ paint(); motion(); shopFilter(); sliders(); carousels(); live(); } /* MUST run after React has hydrated, never before. This script touches the DOM React is about to claim -- setting classes, writing the basket count, re-rendering the product grid. Doing any of that between first paint and hydration makes React find markup it did not produce; it throws a hydration error and DISCARDS the entire client tree, which silently kills every listener registered here. The symptom is a page that looks right and does nothing: banners that never rotate, carousels that never scroll, an Add-to-basket button that does not respond. The load event fires after hydration is scheduled, and the extra tick lets it finish. (No backticks in here: this lives inside a template literal.) */ function ready(){ setTimeout(boot, 0); } if(document.readyState==='complete') ready(); else window.addEventListener('load', ready); /* 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); }; })();

TKL Mechanical Keyboard

You might also like

Volt Air Pro Earbuds

20,000mAh Power Bank

7-in-1 USB-C Hub

Volt Track Smartwatch