[object Object]

← back to Designer Wallcoverings

Hue sort: anchor mount to grid-density slider (inherits correct visible toolbar)

fa27607588b5c718b2e48d97974ad6adadd06a6a · 2026-06-27 11:09:49 -0700 · Steve Abrams

Files touched

Diff

commit fa27607588b5c718b2e48d97974ad6adadd06a6a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jun 27 11:09:49 2026 -0700

    Hue sort: anchor mount to grid-density slider (inherits correct visible toolbar)
---
 .../theme-files/snippets/dw-boost-overrides.liquid | 41 +++++++++++-----------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/shopify/theme-files/snippets/dw-boost-overrides.liquid b/shopify/theme-files/snippets/dw-boost-overrides.liquid
index 82ad50a8..08f7e050 100644
--- a/shopify/theme-files/snippets/dw-boost-overrides.liquid
+++ b/shopify/theme-files/snippets/dw-boost-overrides.liquid
@@ -799,31 +799,32 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
     else toolbarRow.appendChild(wrap);
   }
 
-  /* mount into the VISIBLE Boost toolbar. Boost renders several toolbar
-     variants (.boost-sd__toolbar--3_1 etc.) and hides all but one via
-     display:none depending on layout — so we must pick a node that is actually
-     rendered (offsetParent !== null / width > 0), not just the first match,
-     or the control lands in a hidden toolbar at 0×0. */
-  function visible(el){ return !!(el && el.offsetParent !== null && el.getBoundingClientRect().width > 0); }
-  function pickVisible(sel){
-    var list = document.querySelectorAll(sel);
-    for (var i=0;i<list.length;i++){ if (visible(list[i])) return list[i]; }
-    return null;
-  }
+  /* Mount the color-sort pill RIGHT NEXT TO the grid-density slider. The
+     density slider's own init (in the block above) already resolved the correct
+     (visible) Boost toolbar variant and inserted itself there — so anchoring to
+     it inherits that correctness exactly and the two pills always sit together.
+     This avoids the Boost "several toolbar variants, all-but-one display:none"
+     trap (a guess at the visible toolbar mis-fires headless). Fallback: the
+     product-count toolbar item if the slider never appears (e.g. mobile). */
   var mountTries=0;
   var mt=setInterval(function(){
     if (document.querySelector('.dw-colorsort')) { clearInterval(mt); return; }
-    /* prefer the visible grid-slider's row (keeps controls together); else the
-       visible product-count toolbar item. */
-    var slider = pickVisible('.dw-grid-slider');
-    var count  = pickVisible('.boost-sd__toolbar-item--product-count, .boost-sd__product-count');
-    var anchor = slider || count;
-    var row    = anchor ? anchor.parentElement : null;
-    if (row && visible(row)){
+    var slider = document.querySelector('.dw-grid-slider');
+    if (slider && slider.parentElement){
       clearInterval(mt);
-      buildControl(row, count && count.parentElement===row ? count : (slider||null));
+      /* insert immediately AFTER the density slider in the same row */
+      buildControl(slider.parentElement, slider.nextSibling);
       if(currentMode()!=='default') apply();
-    } else if(mountTries++>80){ clearInterval(mt); }
+      return;
+    }
+    var count = document.querySelector('.boost-sd__toolbar-item--product-count, .boost-sd__product-count');
+    if (count && count.parentElement){
+      clearInterval(mt);
+      buildControl(count.parentElement, count);
+      if(currentMode()!=='default') apply();
+      return;
+    }
+    if(mountTries++>80){ clearInterval(mt); }
   },300);
 
   /* re-apply after Boost re-renders / appends cards */

← a8e8208a auto-save: 2026-06-27T11:08:52 (9 files) — pending-approval/  ·  back to Designer Wallcoverings  ·  Hue sort: 3-tier mount (slider-adjacent / visible toolbar-co 8146806b →