← back to Dw Theme Boost Fix

auto-save: 2026-07-14T13:31:22 (1 files) — snippets/dw-boost-overrides.liquid

8ba422e2bd718f594ccab3b011e25530c4f39ad6 · 2026-07-14 13:31:26 -0700 · Steve Abrams

Files touched

• M snippets/dw-boost-overrides.liquid

Diff

commit 8ba422e2bd718f594ccab3b011e25530c4f39ad6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 14 13:31:26 2026 -0700

    auto-save: 2026-07-14T13:31:22 (1 files) — snippets/dw-boost-overrides.liquid
---
 snippets/dw-boost-overrides.liquid | 59 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/snippets/dw-boost-overrides.liquid b/snippets/dw-boost-overrides.liquid
index c9a6dea..27f6cc7 100644
--- a/snippets/dw-boost-overrides.liquid
+++ b/snippets/dw-boost-overrides.liquid
@@ -212,6 +212,26 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
 @media(max-width:768px){
 .collection-products.rows-of-5 .product-list-item,.collection-products.rows-of-6 .product-list-item,.collection-products.rows-of-7 .product-list-item,.collection-products.rows-of-8 .product-list-item{width:50%}
 }
+
+/* ===== Amazon-style LEFT filter rail (desktop) — DW 2026-07-14 =====
+   Un-suppress Boost's native vertical tree that .dw-filters-collapsed hides
+   (rules ~17-24 above) and lay the collection out as a 2-column rail + grid.
+   Desktop only (>=769px); mobile keeps Boost's native filter drawer untouched.
+   Placed AFTER the collapse rules so it wins at equal specificity — no arms race. */
+@media (min-width:769px){
+  body.dw-filters-collapsed .boost-sd__filter-tree-wrapper,
+  body.dw-filters-collapsed .boost-sd__filter-tree-vertical,
+  body.dw-filters-collapsed .boost-sd__filter-tree-vertical-content,
+  body.dw-filters-collapsed .boost-sd__filter-tree-vertical-refine-by{display:block !important;width:auto !important;visibility:visible !important}
+  .boost-sd-layout--has-filter-vertical{display:flex !important;flex-direction:row !important;align-items:flex-start !important;gap:30px !important}
+  .boost-sd-left{display:block !important;width:264px !important;flex:0 0 264px !important;max-width:264px !important;min-width:264px !important;position:sticky !important;top:14px !important;padding-right:22px !important;border-right:1px solid rgba(0,0,0,.09) !important;overflow:visible !important}
+  body.dw-filters-collapsed .boost-sd-right,
+  .boost-sd-right{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:none !important}
+  body.dw-filters-collapsed .boost-sd__product-list{width:100% !important;max-width:100% !important}
+  .boost-sd-left .dw-rail-dept{margin:2px 0 18px}
+  .boost-sd-left .dw-ptype-bar{display:flex !important;flex-wrap:wrap;gap:8px}
+  .dw-hfilter-bar{display:none !important}
+}
 </style>
 
 <script>
@@ -230,6 +250,31 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
   /* Set CSS var for default 6 cols */
   document.documentElement.style.setProperty('--dw-grid-cols', 6);
 
+  /* === Amazon-style LEFT rail (desktop): move the product-type pill into Boost's
+     native left column and drop the now-redundant Hide-Filters toggle. The CSS
+     above un-hides the native tree + lays out the 2 columns; this only relocates
+     our custom controls. Self-healing poller so it works regardless of Boost's
+     async render timing. Mobile (<=768) is left entirely alone. */
+  if (window.innerWidth > 768) {
+    var __railTries = 0;
+    var __railTimer = setInterval(function(){
+      __railTries++;
+      var left = document.querySelector('.boost-sd-left');
+      var ptype = document.querySelector('.dw-ptype-bar');
+      if (left && ptype && !left.contains(ptype)) {
+        var dept = left.querySelector('.dw-rail-dept');
+        if (!dept) { dept = document.createElement('div'); dept.className = 'dw-rail-dept'; left.insertBefore(dept, left.firstChild); }
+        dept.appendChild(ptype);
+      }
+      var btns = document.querySelectorAll('button, a, label');
+      for (var i = 0; i < btns.length; i++) {
+        var t = (btns[i].textContent || '').trim().toLowerCase();
+        if (t === 'hide filters' || t === 'show filters') btns[i].style.display = 'none';
+      }
+      if ((left && ptype && left.contains(ptype)) || __railTries > 32) clearInterval(__railTimer);
+    }, 250);
+  }
+
   var initialized = false;
 
   /* Re-apply a PERSISTED product-type selection only. Default (no prior choice)
@@ -404,6 +449,20 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
       }
       if (cb.checked) lbl.classList.add('dw-ptype-on');   /* fill active chip */
       cb.addEventListener('change', function(){
+        /* Segmented semantics: "More"/All is mutually exclusive with the
+           specific types. Selecting All clears the specific types; selecting a
+           specific type clears All — so clicking All actually resets to all
+           products instead of leaving a stale type filter applied. */
+        if (this.checked) {
+          var selectingAll = !this.value;
+          ptypeBar.querySelectorAll('input[type=checkbox]').forEach(function(o){
+            if (o === cb) return;
+            if (selectingAll ? !!o.value : !o.value) {
+              o.checked = false;
+              var ol = o.closest('label'); if (ol) ol.classList.remove('dw-ptype-on');
+            }
+          });
+        }
         /* reflect filled/unfilled immediately, then navigate */
         var l = this.closest('label'); if (l) l.classList.toggle('dw-ptype-on', this.checked);
         applyTypeFilter();

← eb55e84 auto-save: 2026-07-14T12:00:58 (1 files) — snippets/dw-boost  ·  back to Dw Theme Boost Fix  ·  auto-save: 2026-07-14T14:01:28 (1 files) — snippets/dw-boost 8a47d6f →