Surface for Business

Product cheatsheet

MSRP (CAD)to

Loading catalog...

'+f[1]+'

'+v.map(function(x){return'"}).join("")+"

"; f[2]?a+=h:b+=h}); $("facets").innerHTML=a+(b?'":""); S.pills=[].map.call(R().querySelectorAll(".pl"),function(el){return{el:el,i:el.querySelector("i"),k:el.dataset.k,v:el.dataset.v}}); S.fg={};[].forEach.call(R().querySelectorAll(".fg"),function(d){S.fg[d.dataset.k]={d:d,em:d.querySelector("em")}}); } function buildSeg(){ var rk={ok:0,warn:1,nu:2,off:3},v=uniq("stock").sort(function(a,b){return rk[sc(a)]-rk[sc(b)]}),el=$("seg");el.hidden=v.length<2; el.innerHTML=v.length<2?"":''+v.map(function(x){return'"}).join(""); } function apply(){S.n=C.PAGE_SIZE;compute();paint();renderGrid()} function paint(){ S.pills.forEach(function(p){var on=S.f[p.k].has(p.v),n=S.cnt[p.k][p.v]||0;p.i.textContent=n;p.el.classList.toggle("on",on);p.el.setAttribute("aria-pressed",on);p.el.disabled=!n&&!on}); Object.keys(S.fg).forEach(function(k){var n=S.f[k].size;S.fg[k].em.textContent=n||"";S.fg[k].d.classList.toggle("has",n>0)}); var tot=0;Object.keys(S.cnt.stock).forEach(function(v){tot+=S.cnt.stock[v]}); [].forEach.call($("seg").children,function(b){var v=b.dataset.st;b.classList.toggle("on",v?S.f.stock.has(v):!S.f.stock.size);b.querySelector("i").textContent=v?S.cnt.stock[v]||0:tot}); var ch=[]; FAC.forEach(function(f){S.f[f[0]].forEach(function(v){ch.push([f[0],v,f[1]+": "+v])})}); if(S.q)ch.push(["q","",'Search: "'+S.q+'"']); if(S.min!=="")ch.push(["min","","Min "+fmt0.format(S.min)]); if(S.max!=="")ch.push(["max","","Max "+fmt0.format(S.max)]); $("chips").innerHTML=ch.map(function(x){return'"}).join(""); var n=S.res.length,a=S.all.length; $("clear").hidden=!ch.length&&!S.f.stock.size; $("count").textContent=(n===a?a:n+" of "+a)+" SKU"+(a===1?"":"s"); $("copyall").hidden=!n;$("copyall").textContent="Copy "+n+" SKU"+(n===1?"":"s"); $("sort").value=S.sk?S.sk+":"+S.dir:""; } /* ---------- 7. Table ---------- */ function cell(s,k){ if(k==="sku")return""+esc(s.sku)+'"; if(k==="desc")return''+esc(s.line+(s.edition?", "+s.edition:""))+''+esc(s.desc||brief(s))+""; if(k==="stock")return s.stock?''+esc(s.stock)+"":""; if(k==="price")return s.price?fmt.format(s.price):""; return esc(s[k]); } function row(s){ var h='-1?" checked":"")+' aria-label="Compare '+esc(s.sku)+'">'; S.cols.forEach(function(c){var k=c[0];h+=''+cell(s,k)+""}); return h+""; } function renderGrid(){ var n=S.res.length; $("th").innerHTML=''+S.cols.map(function(c){var k=c[0],on=S.sk===k; return'"+c[1]+""}).join("")+""; $("grid").innerHTML=S.res.slice(0,S.n).map(row).join(""); $("tw").hidden=!n; if(!n)showMsg("No SKUs match these filters","Remove a filter or change your search to see more.","Clear all filters","data-clear");else $("msg").hidden=true; var m=$("more");m.hidden=n<=S.n;m.textContent="Showing the first "+S.n+" of "+n+" SKUs. Narrow your search or filters to see the rest."; } function showMsg(t,b,a,attr){ $("skl").hidden=true;if(attr!=="data-clear")$("count").textContent="Catalog unavailable";var m=$("msg");m.hidden=false; m.innerHTML=""+esc(t)+""+esc(b)+""+(a?'

":""); } function toast(m){var t=$("toast");t.textContent=m;t.classList.add("on");clearTimeout(tt);tt=setTimeout(function(){t.classList.remove("on")},2200)} function copy(t,msg){ var ok=function(){toast(msg||"Copied "+t)}; function fb(){var a=D.createElement("textarea");a.value=t;a.style.cssText="position:fixed;opacity:0";D.body.appendChild(a);a.select();try{D.execCommand("copy");ok()}catch(e){toast("Copy failed. Select the text manually.")}a.remove()} navigator.clipboard?navigator.clipboard.writeText(t).then(ok,fb):fb(); } function openMod(k){ var s=S.map[k];if(!s)return;lastFocus=D.activeElement; var inC=S.cmp.indexOf(k)>-1; $("modB").innerHTML='

'+esc(s.line+(s.edition?", "+s.edition:""))+''+esc(s.sku)+"

"+esc(brief(s))+'

'+ '

'+(s.price?""+fmt.format(s.price)+"":"")+(s.stock?''+esc(s.stock)+"":"")+"

"+ '

"+x[0]+": "+esc(val(s,x[1]))+"
"+esc(e[0])+": "+esc(e[1])+"

"+ (s.desc?'

Full description'+esc(s.desc)+"

":"")+ '

"; $("mod").classList.add("on");setTimeout(function(){var x=$("modB").querySelector(".x");if(x)x.focus()},60); } function closeMod(){$("mod").classList.remove("on");if(lastFocus&&lastFocus.focus)lastFocus.focus()} function renderCmp(){ var L=S.cmp.map(function(k){return S.map[k]}).filter(Boolean),d=$("drw"); d.classList.toggle("on",!!L.length);if(!L.length){R().style.setProperty("--drh","0px");return} d.innerHTML='

Compare ('+L.length+' of 3)

'+ L.map(function(s){return''}).join("")+""+ SPEC.filter(function(x){return L.some(function(s){return has(s,x[1])})}).map(function(x){ var v=L.map(function(s){return has(s,x[1])?val(s,x[1]):"\u2014"}),df=v.some(function(a){return a!==v[0]}); return""+v.map(function(a){return""}).join("")+""}).join("")+"

	'+esc(s.sku)+'
'+x[0]+"	"+esc(a)+"

"; R().style.setProperty("--drh",d.offsetHeight+"px"); } function setCmp(k,on){ if(on&&S.cmp.indexOf(k)<0&&S.cmp.length>=3){toast("You can compare up to 3 SKUs");return false} S.cmp=S.cmp.filter(function(x){return x!==k});if(on)S.cmp.push(k);renderCmp();return true; } function syncBoxes(){[].forEach.call(R().querySelectorAll("[data-cmp]"),function(b){b.checked=S.cmp.indexOf(b.dataset.cmp)>-1})} X.r={reset:reset,setData:setData,apply:apply,renderGrid:renderGrid,showMsg:showMsg,openMod:openMod,closeMod:closeMod,setCmp:setCmp,renderCmp:renderCmp,syncBoxes:syncBoxes,copy:copy,line:line}; } function go(){var X=(window.SFB||{}).x;if(X){main(X);return 1}} if(!go()){var n=0,iv=setInterval(function(){if(go()||++n>40)clearInterval(iv)},100)} })();(function(){ "use strict"; window.SFB=window.SFB||{};window.SFB.c=true; function main(X){ var D=document,C=X.C,S=X.S,FAC=X.FAC,FK=X.FK,esc=X.esc,log=X.log,readCfg=X.readCfg,cacheGet=X.cacheGet,cacheSet=X.cacheSet,parseRows=X.parseRows,r=X.r,root; var reset=r.reset,setData=r.setData,apply=r.apply,renderGrid=r.renderGrid,showMsg=r.showMsg,openMod=r.openMod,closeMod=r.closeMod,setCmp=r.setCmp,renderCmp=r.renderCmp,syncBoxes=r.syncBoxes,copy=r.copy,line=r.line; var $=function(i){return D.getElementById("sfb-"+i)}; function bleed(){var e=root.parentElement;while(e&&e!==D.body&&e!==D.documentElement){var s=e.style;s.padding="0";s.margin="0";s.maxWidth="none";s.width="100%";s.minHeight="0";e=e.parentElement}root.style.width="100%";root.style.marginLeft="0"} function note(m){$("src").textContent=(m?m+" ":"")+C.FOOTER_NOTE} function boot(){ var cached=cacheGet(),shown=false; if(cached){try{setData(parseRows(cached),false);shown=true}catch(e){}} if(!X.cfg()||!C.CSV_URL){if(!shown)showMsg("Catalog not connected","Paste your published Google Sheet CSV link into CSV_URL in Embed 3.");return} if(!X.net)X.net=X.download(); X.net.then(function(text){ if(shown&&text===cached){note("");return} var rows=parseRows(text);cacheSet(text);setData(rows,shown);shown=true;note("");log("loaded "+rows.length+" SKUs"); }).catch(function(e){ var m=e&&e.message?e.message:"";log("load failed: "+(m||e)); if(/failed to fetch|load failed|networkerror|abort|network/i.test(m)||!m)m="The browser could not reach Google Sheets (offline, blocked, or the sheet is no longer published to the web). Open the CSV link in a new tab to check it."; if(shown)note("Showing the last saved copy. The live sheet could not be reached."); else showMsg("Couldn't load the catalog",m,"Try again","data-retry"); }); } function fatal(msg){ var c=$("count"),k=$("skl");if(c)c.textContent="Catalog unavailable";if(k)k.hidden=true; root.insertAdjacentHTML("afterbegin",'

Catalog setup problem'+esc(msg)+"

"); log("setup problem: "+msg); } function init(){ root=D.getElementById("sfb"); if(!root){if((init.n=(init.n||0)+1)<40)setTimeout(init,100);else log("#sfb not found. Is Embed 2 on this page?");return} try{start()}catch(e){log("error: "+(e&&e.stack||e));fatal("Script error: "+(e&&e.message||e)+". Press F12 and open the Console tab for details.")} } function start(){ readCfg(); var miss="ann annT annX ttl sub nav top q pr min max facets count seg chips clear sort copyall skl tw th grid msg more src mod modB drw toast".split(" ").filter(function(i){return!$(i)}); if(miss.length){fatal("Embed 2 does not match this version of Embed 4 (missing: "+miss.join(", ")+"). Re-paste the latest Embed 2 and Embed 1.");return} window.SFB=window.SFB||{};window.SFB.ready=true;log("page ready"); if(C.FULL_BLEED!==false)bleed(); if(!X.cfg()){showMsg("Settings missing","Embed 3 is not on the page or did not run. Add it as a hidden Body End code embed.");return} if(C.TITLE)$("ttl").textContent=C.TITLE;if(C.SUBTITLE)$("sub").textContent=C.SUBTITLE; var a=$("ann"); if(C.ANNOUNCEMENT&&!sessionStorageGet("sfb:ann")){ $("annT").textContent=C.ANNOUNCEMENT;a.hidden=false; var hide=function(){a.classList.add("out");try{sessionStorage.setItem("sfb:ann","1")}catch(e){}setTimeout(function(){a.remove()},450)}; $("annX").onclick=hide;if(C.ANNOUNCE_SECONDS>0)setTimeout(hide,C.ANNOUNCE_SECONDS*1000); }else a.remove(); $("nav").innerHTML=(C.LINKS||[]).map(function(l){return''+esc(l[0])+""}).join(""); var nt=$("note");if(nt&&C.HELP_NOTE){$("noteT").textContent=C.HELP_NOTE;nt.hidden=false} note(""); root.addEventListener("click",function(e){ var t=e.target,c=function(s){return t.closest(s)},b; if(b=c(".pl")){var set=S.f[b.dataset.k],v=b.dataset.v;set.has(v)?set.delete(v):set.add(v);apply()} else if(b=c("[data-st]")){S.f.stock.clear();if(b.dataset.st)S.f.stock.add(b.dataset.st);apply()} else if(b=c("[data-c]")){var k=b.dataset.c;if(k==="q"){S.q="";$("q").value=""}else if(k==="min"){S.min="";$("min").value=""}else if(k==="max"){S.max="";$("max").value=""}else S.f[k].delete(b.dataset.v);apply()} else if(c("[data-more]")){var s=root.querySelector(".fgs.sec"),h=!s.hidden;s.hidden=h;c("[data-more]").setAttribute("aria-expanded",!h);c("[data-more]").textContent=h?"More filters":"Fewer filters"} else if(b=c("[data-copy]"))copy(b.dataset.copy); else if(b=c("[data-cl]"))copy(line(S.map[b.dataset.cl]),"Copied spec line"); else if(b=c("[data-ct]")){var on=S.cmp.indexOf(b.dataset.ct)<0;if(setCmp(b.dataset.ct,on)){syncBoxes();b.textContent=on?"Remove from compare":"Add to compare"}} else if(b=c("[data-rm]")){setCmp(b.dataset.rm,false);syncBoxes()} else if(c("[data-ck]"))copy(S.cmp.join("\n"),"Copied "+S.cmp.length+" SKUs"); else if(c("[data-cc]")){S.cmp=[];renderCmp();syncBoxes()} else if(c("[data-x]")||t===$("mod"))closeMod(); else if(c("[data-clear]")||t===$("clear")){reset();apply()} else if(c("[data-retry]")){$("msg").hidden=true;$("skl").hidden=false;X.net=null;boot()} else if(b=c("th[data-s]")){var sk=b.dataset.s;S.dir=S.sk===sk?-S.dir:1;S.sk=sk;apply()} else if(c("input")||c(".dr")){} else if(b=c("tr[data-o]"))openMod(b.dataset.o); }); root.addEventListener("keydown",function(e){var th=e.target.closest&&e.target.closest("th[data-s]");if(th&&(e.key==="Enter"||e.key===" ")){e.preventDefault();th.click()}}); root.addEventListener("change",function(e){var k=e.target.dataset.cmp;if(!k)return;if(!setCmp(k,e.target.checked))e.target.checked=false}); root.addEventListener("toggle",function(e){ var d=e.target;if(!d.classList||!d.classList.contains("fg")||!d.open)return; [].forEach.call(root.querySelectorAll(".fg[open]"),function(o){if(o!==d)o.open=false}); var sub=d.querySelector(".sub");sub.classList.remove("r");if(sub.getBoundingClientRect().right>window.innerWidth-8)sub.classList.add("r"); },true); D.addEventListener("click",function(e){[].forEach.call(root.querySelectorAll(".fg[open]"),function(d){if(!d.contains(e.target))d.open=false})}); D.addEventListener("keydown",function(e){ var open=$("mod").classList.contains("on"); if(e.key==="Escape"){if(open)closeMod();else[].forEach.call(root.querySelectorAll(".fg[open]"),function(d){d.open=false})} if(e.key==="Tab"&&open){ var f=[].filter.call($("modB").querySelectorAll("button,input,[href]"),function(x){return!x.disabled}),first=f[0],last=f[f.length-1]; if(!f.length)return; if(!$("modB").contains(D.activeElement)||(e.shiftKey&&D.activeElement===first)){e.preventDefault();last.focus()} else if(!e.shiftKey&&D.activeElement===last){e.preventDefault();first.focus()} } }); var qt; $("q").addEventListener("input",function(e){clearTimeout(qt);qt=setTimeout(function(){S.q=e.target.value.trim();apply()},120)}); ["min","max"].forEach(function(k){$(k).addEventListener("input",function(e){clearTimeout(qt);qt=setTimeout(function(){var n=parseFloat(e.target.value);S[k]=isNaN(n)?"":n;apply()},250)})}); $("sort").addEventListener("change",function(e){var p=e.target.value.split(":");S.sk=p[0]||"";S.dir=+p[1]||1;apply()}); $("copyall").onclick=function(){copy(S.res.map(function(s){return s.sku}).join("\n"),"Copied "+S.res.length+" SKUs")}; boot(); } function sessionStorageGet(k){try{return sessionStorage.getItem(k)}catch(e){return null}} D.readyState==="loading"?D.addEventListener("DOMContentLoaded",init):init(); } function go(){var X=(window.SFB||{}).x;if(X&&X.r){main(X);return 1}} if(!go()){var n=0,iv=setInterval(function(){if(go()||++n>40)clearInterval(iv)},100)} })();