← back to Designer Wallcoverings

feat(filter-topbar): replace Boost native toolbar — port product-type tabs + live count into topbar, hide boost-sd__toolbar

f7e9dde13c2668f36135351c453a71cb64545f95 · 2026-06-25 16:37:23 -0700 · Steve

Files touched

• M shopify/sections/dw-boost-filter-topbar.liquid

Diff

commit f7e9dde13c2668f36135351c453a71cb64545f95
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jun 25 16:37:23 2026 -0700

    feat(filter-topbar): replace Boost native toolbar — port product-type tabs + live count into topbar, hide boost-sd__toolbar
---
 shopify/sections/dw-boost-filter-topbar.liquid | 50 ++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/shopify/sections/dw-boost-filter-topbar.liquid b/shopify/sections/dw-boost-filter-topbar.liquid
index 1ca8ee50..65d89f9f 100644
--- a/shopify/sections/dw-boost-filter-topbar.liquid
+++ b/shopify/sections/dw-boost-filter-topbar.liquid
@@ -99,6 +99,18 @@
     .dw-clear{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
       color:var(--dw-acc);background:transparent;border:0;cursor:pointer;white-space:nowrap}
     .dw-clear:disabled{opacity:.35;cursor:default}
+    /* product-type segmented control (ports Boost's Wallcoverings/Fabrics tabs) */
+    .dw-seg{display:inline-flex;border:1px solid var(--border-color,rgba(0,0,0,.14));border-radius:20px;overflow:hidden;height:34px;margin-right:4px}
+    .dw-seg button{border:0;background:transparent;padding:0 14px;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;color:inherit;white-space:nowrap;line-height:1}
+    .dw-seg button+button{border-left:1px solid var(--border-color,rgba(0,0,0,.12))}
+    .dw-seg button:hover{background:var(--bg-hover,rgba(0,0,0,.04))}
+    .dw-seg button[aria-pressed="true"]{background:var(--dw-acc);color:#fff}
+    /* live product count (ports Boost's "N products") */
+    .dw-count{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-muted,rgba(0,0,0,.55));white-space:nowrap;margin-left:2px}
+    /* REPLACE Boost's native toolbar — this topbar is the single control surface.
+       Cosmetic hide ONLY: the node stays in the DOM so Boost's own JS and our
+       read-only count-reader keep working (never removes a Boost hook). */
+    .boost-sd__toolbar{display:none!important}
     /* the "which filters are shown" gear menu (per-field ON/OFF) */
     .dw-gear{position:relative}
     .dw-gear__btn{height:34px;width:34px;display:inline-flex;align-items:center;justify-content:center;
@@ -118,6 +130,13 @@
   </style>
 
   <div class="dw-tbf__row" data-tbf-row>
+    {%- comment -%} product-type segmented control (replaces Boost's native Wallcoverings/Fabrics tabs) {%- endcomment -%}
+    <span class="dw-seg" data-tbf-types role="group" aria-label="Product type">
+      <button type="button" data-ptype="" aria-pressed="false">All</button>
+      <button type="button" data-ptype="Wallcovering" aria-pressed="false">Wallcoverings</button>
+      <button type="button" data-ptype="Fabric" aria-pressed="false">Fabrics</button>
+    </span>
+
     <span class="dw-tbf__label">Filter</span>
     <span data-tbf-fields></span>
 
@@ -148,6 +167,7 @@
     </span>
 
     <button class="dw-clear" data-tbf-clear disabled>Clear all</button>
+    <span class="dw-count" data-tbf-count></span>
 
     {%- comment -%} per-field ON/OFF gear {%- endcomment -%}
     <span class="dw-gear" data-tbf-gear>
@@ -426,12 +446,38 @@
   // Only repopulates OUR dropdowns; never writes to Boost's tree.
   var ro; var target=document.querySelector('.boost-sd__filter-tree')||document.querySelector('.boost-sd__sidebar');
   if(target){
-    var mo=new MutationObserver(function(){ clearTimeout(ro); ro=setTimeout(renderFields,300); });
+    var mo=new MutationObserver(function(){ clearTimeout(ro); ro=setTimeout(function(){ renderFields(); renderCount(); },300); });
     mo.observe(target,{childList:true,subtree:true});
   }
 
+  // ── product-type segmented control (ports Boost's Wallcoverings/Fabrics tabs) ─
+  var typeWrap=root.querySelector('[data-tbf-types]');
+  if(typeWrap){
+    var curType=curParams().get('pf_t_product_type')||'';
+    typeWrap.querySelectorAll('button[data-ptype]').forEach(function(b){
+      if(b.getAttribute('data-ptype')===curType) b.setAttribute('aria-pressed','true');
+      b.addEventListener('click',function(){
+        var p=curParams(); var t=b.getAttribute('data-ptype');
+        if(t) p.set('pf_t_product_type',t); else p.delete('pf_t_product_type');
+        navTo(p);
+      });
+    });
+  }
+
+  // ── live product count (ports Boost's "N products"); STRICTLY read-only ──────
+  function readCount(){
+    var sels=['.boost-sd__total-product','.boost-sd__filter-total-product','.boost-sd__total-product-count','.boost-sd__refine-total'];
+    for(var i=0;i<sels.length;i++){ var el=document.querySelector(sels[i]); if(el){ var m=(el.textContent||'').match(/[\d,]+/); if(m) return m[0]; } }
+    var tb=document.querySelector('.boost-sd__toolbar'); // hidden via CSS but present in DOM
+    if(tb){ var mm=(tb.textContent||'').match(/([\d,]+)\s*(products|results|items)/i); if(mm) return mm[1]; }
+    return null;
+  }
+  function renderCount(){ var c=root.querySelector('[data-tbf-count]'); if(!c) return; var n=readCount(); c.textContent = n ? (n+' products') : ''; }
+
   // ── boot ──────────────────────────────────────────────────────────────────
-  renderFields(); renderGear();
+  renderFields(); renderGear(); renderCount();
+  // Boost loads async — retry the count a few times until it appears.
+  var _ct=0, _ci=setInterval(function(){ renderCount(); if(++_ct>8 || root.querySelector('[data-tbf-count]').textContent) clearInterval(_ci); },500);
 })();
 </script>
 

← 3d5bb06c auto-save: 2026-06-25T16:35:16 (6 files) — pending-approval/  ·  back to Designer Wallcoverings  ·  cadence: ENABLE DW_DOUBLE_ROLL_MOQ=1 — new York/Brewster rol 35fa31e0 →