[object Object]

← back to Designer Wallcoverings

Hue sort: mount into VISIBLE Boost toolbar (skip display:none variant) + select min-width

9b14ef6528fe5b0209a830fde5c0852157ec0c38 · 2026-06-27 11:08:50 -0700 · Steve Abrams

Files touched

Diff

commit 9b14ef6528fe5b0209a830fde5c0852157ec0c38
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jun 27 11:08:50 2026 -0700

    Hue sort: mount into VISIBLE Boost toolbar (skip display:none variant) + select min-width
---
 .../theme-files/snippets/dw-boost-overrides.liquid | 33 ++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/shopify/theme-files/snippets/dw-boost-overrides.liquid b/shopify/theme-files/snippets/dw-boost-overrides.liquid
index a8cedab4..82ad50a8 100644
--- a/shopify/theme-files/snippets/dw-boost-overrides.liquid
+++ b/shopify/theme-files/snippets/dw-boost-overrides.liquid
@@ -677,8 +677,8 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
   background:conic-gradient(#c0392b,#e67e22,#f1c40f,#2ecc71,#1ab6c4,#2e6fd4,#7d4fd4,#c0392b);
   border:1px solid rgba(0,0,0,.15)}
 .dw-colorsort select{border:none;background:transparent;font:inherit;font-weight:700;
-  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0;margin:0;
-  -webkit-appearance:none;appearance:none;color:#1A1A1A}
+  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0 2px 0 0;margin:0;
+  min-width:84px;-webkit-appearance:none;appearance:none;color:#1A1A1A}
 .dw-colorsort.is-busy{opacity:.6}
 @media(max-width:768px){.dw-colorsort{height:34px;margin:5px 6px 0 0}}
 </style>
@@ -799,14 +799,31 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
     else toolbarRow.appendChild(wrap);
   }
 
-  /* mount next to the grid-density pill (same toolbar row) */
+  /* 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;
+  }
   var mountTries=0;
   var mt=setInterval(function(){
-    var slider=document.querySelector('.dw-grid-slider');
-    var count=document.querySelector('.boost-sd__toolbar-item--product-count, .boost-sd__product-count');
-    var row = slider ? slider.parentElement : (count ? count.parentElement : null);
-    if(row){ clearInterval(mt); buildControl(row, count||slider); if(currentMode()!=='default') apply(); }
-    else if(mountTries++>60) clearInterval(mt);
+    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)){
+      clearInterval(mt);
+      buildControl(row, count && count.parentElement===row ? count : (slider||null));
+      if(currentMode()!=='default') apply();
+    } else if(mountTries++>80){ clearInterval(mt); }
   },300);
 
   /* re-apply after Boost re-renders / appends cards */

← f68c7287 Collection grid UX: hue/color sort modes + compact pill unde  ·  back to Designer Wallcoverings  ·  auto-save: 2026-06-27T11:08:52 (9 files) — pending-approval/ a8e8208a →