[object Object]

← back to Designer Wallcoverings

Fix grid selector in toolbar updateGridDensity function

7fe21a33548df12675847a7fba0cf0b5300a6bfe · 2026-06-23 07:26:43 -0700 · Steve Abrams

ISSUE: Slider value changes but grid doesn't respond because updateGridDensity()
can't find the grid element. The selectors weren't matching .collection-products.

FIX: Add .collection-products and [data-collection-grid] to the selector chain
BEFORE the generic fallbacks. These are the actual grid classes used in _cwGRID theme.

Selector chain now: .collection-products → [data-collection-grid] → [role="list"] → [data-product-grid]

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Files touched

Diff

commit 7fe21a33548df12675847a7fba0cf0b5300a6bfe
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 23 07:26:43 2026 -0700

    Fix grid selector in toolbar updateGridDensity function
    
    ISSUE: Slider value changes but grid doesn't respond because updateGridDensity()
    can't find the grid element. The selectors weren't matching .collection-products.
    
    FIX: Add .collection-products and [data-collection-grid] to the selector chain
    BEFORE the generic fallbacks. These are the actual grid classes used in _cwGRID theme.
    
    Selector chain now: .collection-products → [data-collection-grid] → [role="list"] → [data-product-grid]
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 shopify/_cwGRID/snippets/collection-toolbar.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shopify/_cwGRID/snippets/collection-toolbar.liquid b/shopify/_cwGRID/snippets/collection-toolbar.liquid
index 28f13cbc..38d004fd 100644
--- a/shopify/_cwGRID/snippets/collection-toolbar.liquid
+++ b/shopify/_cwGRID/snippets/collection-toolbar.liquid
@@ -258,7 +258,7 @@
   }, 300));
 
   function updateGridDensity(cols) {
-    const productGrid = document.querySelector('[role="list"]') || document.querySelector('.grid') || document.querySelector('[data-product-grid]');
+    const productGrid = document.querySelector('.collection-products') || document.querySelector('[data-collection-grid]') || document.querySelector('[role="list"]') || document.querySelector('[data-product-grid]');
     if (productGrid) {
       productGrid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
       productGrid.setAttribute('data-cols', cols);

← ad572a33 Fix toolbar CSS: prevent sort dropdown text cutoff + make sl  ·  back to Designer Wallcoverings  ·  Upgrade all Gemini text calls from deprecated gemini-2.0-fla bfe782d2 →