[object Object]

← back to Designer Wallcoverings

hfilter: derive groups from titles (.boost-sd__filter-option via closest), not the singleton .boost-sd__filter-block

d418373a1642e16dba8c687df9475760bd20ed6c · 2026-06-22 18:37:12 -0700 · Steve Abrams

Files touched

Diff

commit d418373a1642e16dba8c687df9475760bd20ed6c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 18:37:12 2026 -0700

    hfilter: derive groups from titles (.boost-sd__filter-option via closest), not the singleton .boost-sd__filter-block
---
 shopify/theme-5.0-duplicate/assets/dw-hfilter.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/shopify/theme-5.0-duplicate/assets/dw-hfilter.js b/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
index 87061b39..9b44487f 100644
--- a/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
+++ b/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
@@ -39,7 +39,7 @@
   if (!/\/(collections|search)/.test(location.pathname)) return;
 
   var TREE = '.boost-sd__filter-tree-vertical';
-  var BLOCK = '.boost-sd__filter-block';
+  var GROUP = '.boost-sd__filter-option';
   var TITLE = '.boost-sd__filter-option-title';
   var OPT_BTN = '.boost-sd__filter-option-item-button';
   var OPT_ITEM = '.boost-sd__filter-option-item';
@@ -119,10 +119,22 @@
 
   /* ---- read the hidden tree into a plain model -------------------------
      Returns: [{ index, title, isPrice, options:[{text, swatch, selected}] }] */
-  function readGroups() {
+  /* The real group containers, derived from their titles (dedup, ordered).
+     The per-group element is .boost-sd__filter-option (one per Color/Style/
+     Brand/Durability/Price); .boost-sd__filter-block does NOT repeat per group. */
+  function getBlocks() {
     var tree = document.querySelector(TREE);
     if (!tree) return [];
-    var blocks = tree.querySelectorAll(BLOCK);
+    var titles = tree.querySelectorAll(TITLE), blocks = [];
+    for (var i = 0; i < titles.length; i++) {
+      var g = titles[i].closest(GROUP);
+      if (g && blocks.indexOf(g) === -1) blocks.push(g);
+    }
+    return blocks;
+  }
+
+  function readGroups() {
+    var blocks = getBlocks();
     var groups = [];
     for (var i = 0; i < blocks.length; i++) {
       var b = blocks[i];
@@ -153,9 +165,7 @@
 
   /* ---- proxy a click into the live hidden native tree ------------------ */
   function proxyClick(groupIndex, optText) {
-    var tree = document.querySelector(TREE);
-    if (!tree) return false;
-    var blocks = tree.querySelectorAll(BLOCK);
+    var blocks = getBlocks();
     var b = blocks[groupIndex];
     if (!b) return false;
     var want = norm(optText);

← 5143d142 Ultra-tight grid: 2px gaps (horizontal + vertical)  ·  back to Designer Wallcoverings  ·  hfilter: Color swatch label from title attr; close all grid d3308dca →