← back to Designer Wallcoverings
grouped grid: two-tier drill-down chips (Color/Style/Sort → value sub-row) + feed hue/style filters
ec2481948453220a983b24f872d31f53647e7564 · 2026-06-26 07:56:07 -0700 · Steve
Files touched
M shopify/_cwGRID/sections/collection-grouped.liquid
Diff
commit ec2481948453220a983b24f872d31f53647e7564
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Jun 26 07:56:07 2026 -0700
grouped grid: two-tier drill-down chips (Color/Style/Sort → value sub-row) + feed hue/style filters
---
shopify/_cwGRID/sections/collection-grouped.liquid | 69 ++++++++++++++--------
1 file changed, 44 insertions(+), 25 deletions(-)
diff --git a/shopify/_cwGRID/sections/collection-grouped.liquid b/shopify/_cwGRID/sections/collection-grouped.liquid
index a9dc0d15..21771efe 100644
--- a/shopify/_cwGRID/sections/collection-grouped.liquid
+++ b/shopify/_cwGRID/sections/collection-grouped.liquid
@@ -78,13 +78,10 @@
<div class="dw-grouped__toolbar">
<div class="dw-grouped__count" id="dw-grouped-count"></div>
<div class="dw-grouped__controls">
- <div class="dw-grouped__sortchips" id="dw-grouped-sort" role="tablist" aria-label="Sort patterns">
- <button type="button" class="dw-grouped__chipbtn is-active" data-sort="colors_desc">Most Colors</button>
- <button type="button" class="dw-grouped__chipbtn" data-sort="hue">Color</button>
- <button type="button" class="dw-grouped__chipbtn" data-sort="style">Style</button>
- <button type="button" class="dw-grouped__chipbtn" data-sort="newest">Newest</button>
- <button type="button" class="dw-grouped__chipbtn" data-sort="pattern_az">Pattern A–Z</button>
- <button type="button" class="dw-grouped__chipbtn" data-sort="vendor_az">Vendor A–Z</button>
+ <div class="dw-grouped__cats" id="dw-grouped-cats" role="tablist" aria-label="Filter and sort">
+ <button type="button" class="dw-grouped__chipbtn" data-cat="color">Color</button>
+ <button type="button" class="dw-grouped__chipbtn" data-cat="style">Style</button>
+ <button type="button" class="dw-grouped__chipbtn is-active" data-cat="sort">Sort</button>
</div>
<label class="dw-grouped__ctl">
<span>Density</span>
@@ -93,6 +90,7 @@
</label>
</div>
</div>
+ <div class="dw-grouped__subbar" id="dw-grouped-sub" aria-label="Options"></div>
<div id="dw-grouped-grid" class="dw-grouped__grid" role="list"></div>
@@ -137,6 +135,10 @@
}
.dw-grouped__chipbtn:hover { border-color: #1a1a1a; color: #1a1a1a; }
.dw-grouped__chipbtn.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
+ /* level-2 (drill-down) row — revealed below the category chips */
+ .dw-grouped__subbar { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 22px; padding-bottom: 14px; }
+ .dw-grouped__subbtn { font-size: 11px; padding: 6px 12px; }
+ .dw-grouped__subbtn.is-active { background: #8b7355; border-color: #8b7355; } /* value selection = warm accent, distinct from category black */
.dw-grouped__ctl input[type=range] { width: 130px; accent-color: #1a1a1a; }
.dw-grouped__density-val { font-variant-numeric: tabular-nums; color: #1a1a1a; font-weight: 600; min-width: 1em; }
@@ -186,8 +188,10 @@
var sentinel = document.getElementById('dw-grouped-sentinel');
var statusEl = document.getElementById('dw-grouped-status');
var countEl = document.getElementById('dw-grouped-count');
- var sortWrap = document.getElementById('dw-grouped-sort');
+ var catsWrap = document.getElementById('dw-grouped-cats');
+ var subWrap = document.getElementById('dw-grouped-sub');
var currentSort = 'colors_desc'; // default → grouping is visible on load
+ var hueFilter = '', styleFilter = '';
var densEl = document.getElementById('dw-grouped-density');
var densVal = document.getElementById('dw-grouped-density-val');
@@ -209,26 +213,39 @@
try { var s = parseInt(localStorage.getItem('dwg.cols'), 10); if (s >= 2 && s <= 7) densEl.value = s; } catch (_) {}
densEl.addEventListener('input', apply); apply();
}
- function setActiveChip(val) {
- var btns = sortWrap.querySelectorAll('.dw-grouped__chipbtn');
- var found = false;
- btns.forEach(function (b) {
- var on = b.getAttribute('data-sort') === val;
- b.classList.toggle('is-active', on); b.setAttribute('aria-selected', on ? 'true' : 'false');
- if (on) found = true;
+ // Two-tier controls: a category chip (Color/Style/Sort) reveals its values on the next line.
+ var VALUES = {
+ color: [['','All'],['red','Red'],['orange','Orange'],['yellow','Yellow'],['green','Green'],['teal','Teal'],['blue','Blue'],['purple','Purple'],['pink','Pink'],['neutral','Neutral']],
+ style: [['','All'],['floral','Floral'],['geometric','Geometric'],['damask','Damask'],['stripe','Stripe'],['toile','Toile'],['trellis','Trellis'],['tropical','Tropical'],['textured','Textured'],['grasscloth','Grasscloth'],['solid','Solid']],
+ sort: [['colors_desc','Most Colors'],['newest','Newest'],['pattern_az','Pattern A–Z'],['vendor_az','Vendor A–Z']]
+ };
+ var activeCat = 'sort';
+ function currentValFor(cat) { return cat === 'color' ? hueFilter : cat === 'style' ? styleFilter : currentSort; }
+ function renderSub(cat) {
+ activeCat = cat;
+ catsWrap.querySelectorAll('.dw-grouped__chipbtn').forEach(function (b) {
+ b.classList.toggle('is-active', b.getAttribute('data-cat') === cat);
});
- if (found) currentSort = val;
+ var cur = currentValFor(cat);
+ subWrap.innerHTML = VALUES[cat].map(function (v) {
+ return '<button type="button" class="dw-grouped__chipbtn dw-grouped__subbtn' + (v[0] === cur ? ' is-active' : '') + '" data-val="' + v[0] + '">' + v[1] + '</button>';
+ }).join('');
}
- function wireSort() {
- var stored; try { stored = localStorage.getItem('dwg.sort'); } catch (_) {}
- setActiveChip(stored || currentSort);
- sortWrap.addEventListener('click', function (e) {
+ function wireControls() {
+ catsWrap.addEventListener('click', function (e) {
var b = e.target.closest('.dw-grouped__chipbtn'); if (!b) return;
- var val = b.getAttribute('data-sort'); if (val === currentSort) return;
- setActiveChip(val);
- try { localStorage.setItem('dwg.sort', currentSort); } catch (_) {}
+ renderSub(b.getAttribute('data-cat')); // just reveal the layer; don't reload
+ });
+ subWrap.addEventListener('click', function (e) {
+ var b = e.target.closest('.dw-grouped__subbtn'); if (!b) return;
+ var val = b.getAttribute('data-val');
+ if (activeCat === 'color') hueFilter = val;
+ else if (activeCat === 'style') styleFilter = val;
+ else currentSort = val || 'colors_desc';
+ renderSub(activeCat); // refresh active highlight
reset(); loadNext();
});
+ renderSub('sort'); // default layer on load
}
function feedUrl(p) {
@@ -239,7 +256,9 @@
if (HANDLE) qs.push('collection_handle=' + encodeURIComponent(HANDLE));
if (!VENDOR && !HANDLE) qs.push('all=1');
qs.push('page=' + p); qs.push('per=' + PER);
- if (currentSort) qs.push('sort=' + encodeURIComponent(currentSort));
+ if (currentSort) qs.push('sort=' + encodeURIComponent(currentSort));
+ if (hueFilter) qs.push('hue=' + encodeURIComponent(hueFilter));
+ if (styleFilter) qs.push('style=' + encodeURIComponent(styleFilter));
return FEED + '?' + qs.join('&');
}
@@ -335,7 +354,7 @@
});
}
- wireDensity(); wireSort();
+ wireDensity(); wireControls();
// Own the page immediately (we're the grid now) — toolbar + skeletons show on load,
// not after the feed responds.
document.body.classList.add('dw-grouped--active');
← 4544b52b grouped grid: sort as visible chips/tabs (default Most Color
·
back to Designer Wallcoverings
·
PDP: shrink Design Coordinate CTA to a compact pill (was ful cdaabdc2 →