[object Object]

← back to Designer Wallcoverings

Hue sort: 3-tier mount (slider-adjacent / visible toolbar-content fallback / late slider) so the pill always lands in the shown toolbar

8146806b3a67c95f134cdeea936e388b998daf2d · 2026-06-27 11:15:49 -0700 · Steve Abrams

Files touched

Diff

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

    Hue sort: 3-tier mount (slider-adjacent / visible toolbar-content fallback / late slider) so the pill always lands in the shown toolbar
---
 .../theme-files/snippets/dw-boost-overrides.liquid | 24 +++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/shopify/theme-files/snippets/dw-boost-overrides.liquid b/shopify/theme-files/snippets/dw-boost-overrides.liquid
index 08f7e050..84c8bbdb 100644
--- a/shopify/theme-files/snippets/dw-boost-overrides.liquid
+++ b/shopify/theme-files/snippets/dw-boost-overrides.liquid
@@ -806,21 +806,35 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
      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). */
+  function isShown(el){ return !!(el && el.offsetParent !== null); }
   var mountTries=0;
   var mt=setInterval(function(){
     if (document.querySelector('.dw-colorsort')) { clearInterval(mt); return; }
     var slider = document.querySelector('.dw-grid-slider');
-    if (slider && slider.parentElement){
+    /* Primary: sit right after the density slider IF its toolbar is actually
+       shown (keeps the two density/color pills together). */
+    if (slider && slider.parentElement && isShown(slider)){
       clearInterval(mt);
-      /* insert immediately AFTER the density slider in the same row */
       buildControl(slider.parentElement, slider.nextSibling);
       if(currentMode()!=='default') apply();
       return;
     }
-    var count = document.querySelector('.boost-sd__toolbar-item--product-count, .boost-sd__product-count');
-    if (count && count.parentElement){
+    /* Fallback: Boost renders several toolbar variants and hides all but one.
+       If the slider's variant is hidden, drop the pill into the VISIBLE
+       toolbar content/inner container so real users always get it. */
+    var content = document.querySelector('.boost-sd__toolbar-content, .boost-sd__toolbar-inner');
+    if (content && isShown(content) && mountTries > 6){
       clearInterval(mt);
-      buildControl(count.parentElement, count);
+      buildControl(content, content.firstChild);
+      if(currentMode()!=='default') apply();
+      return;
+    }
+    /* Last resort after a generous wait: mount next to slider regardless of
+       computed visibility (real users see it even when automation reads 0px —
+       the live shipped density slider behaves identically). */
+    if (slider && slider.parentElement && mountTries > 40){
+      clearInterval(mt);
+      buildControl(slider.parentElement, slider.nextSibling);
       if(currentMode()!=='default') apply();
       return;
     }

← fa276075 Hue sort: anchor mount to grid-density slider (inherits corr  ·  back to Designer Wallcoverings  ·  Hue sort: fix Light->Dark direction (lightest first) + unrea 8f532c58 →