← back to Designer Wallcoverings
grouped grid: sort as visible chips/tabs (default Most Colors) + preserve preview_theme_id on pattern links
4544b52be5315d0ad9b90869696821d39b428a25 · 2026-06-26 07:51:25 -0700 · Steve
Files touched
M shopify/_cwGRID/sections/collection-grouped.liquid
Diff
commit 4544b52be5315d0ad9b90869696821d39b428a25
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Jun 26 07:51:25 2026 -0700
grouped grid: sort as visible chips/tabs (default Most Colors) + preserve preview_theme_id on pattern links
---
shopify/_cwGRID/sections/collection-grouped.liquid | 58 +++++++++++++++-------
1 file changed, 41 insertions(+), 17 deletions(-)
diff --git a/shopify/_cwGRID/sections/collection-grouped.liquid b/shopify/_cwGRID/sections/collection-grouped.liquid
index 5c6b55b3..a9dc0d15 100644
--- a/shopify/_cwGRID/sections/collection-grouped.liquid
+++ b/shopify/_cwGRID/sections/collection-grouped.liquid
@@ -78,17 +78,14 @@
<div class="dw-grouped__toolbar">
<div class="dw-grouped__count" id="dw-grouped-count"></div>
<div class="dw-grouped__controls">
- <label class="dw-grouped__ctl">
- <span>Sort</span>
- <select id="dw-grouped-sort">
- <option value="newest">Newest</option>
- <option value="hue">Color (Hue)</option>
- <option value="style">Style</option>
- <option value="colors_desc">Most Colorways</option>
- <option value="pattern_az">Pattern A→Z</option>
- <option value="vendor_az">Vendor A→Z</option>
- </select>
- </label>
+ <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>
<label class="dw-grouped__ctl">
<span>Density</span>
<input id="dw-grouped-density" type="range" min="2" max="7" step="1" value="4">
@@ -131,6 +128,15 @@
.dw-grouped__controls { display: flex; gap: 22px; align-items: center; }
.dw-grouped__ctl { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #777; }
.dw-grouped__ctl select { font-size: 13px; padding: 5px 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #1a1a1a; }
+ /* sort as visible chips/tabs — all controls shown on load, no dropdown */
+ .dw-grouped__sortchips { display: flex; flex-wrap: wrap; gap: 8px; }
+ .dw-grouped__chipbtn {
+ font: 500 12px/1 -apple-system, sans-serif; letter-spacing: .04em; text-transform: uppercase;
+ padding: 8px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #555;
+ cursor: pointer; transition: all 140ms ease; white-space: nowrap;
+ }
+ .dw-grouped__chipbtn:hover { border-color: #1a1a1a; color: #1a1a1a; }
+ .dw-grouped__chipbtn.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.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; }
@@ -172,12 +178,16 @@
var VENDOR = root.getAttribute('data-vendor') || '';
var HANDLE = root.getAttribute('data-collection-handle') || '';
var PAGE_BASE = root.getAttribute('data-pattern-page') || '/pages/pattern';
+ // Preserve theme-preview context so clicking a "N Colors" chip stays in THIS
+ // (dev) theme instead of dropping to the live theme where the pattern page is blank.
+ var PREVIEW = (location.search.match(/[?&]preview_theme_id=(\d+)/) || [])[1] || '';
var grid = document.getElementById('dw-grouped-grid');
var sentinel = document.getElementById('dw-grouped-sentinel');
var statusEl = document.getElementById('dw-grouped-status');
var countEl = document.getElementById('dw-grouped-count');
- var sortSel = document.getElementById('dw-grouped-sort');
+ var sortWrap = document.getElementById('dw-grouped-sort');
+ var currentSort = 'colors_desc'; // default → grouping is visible on load
var densEl = document.getElementById('dw-grouped-density');
var densVal = document.getElementById('dw-grouped-density-val');
@@ -199,10 +209,24 @@
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;
+ });
+ if (found) currentSort = val;
+ }
function wireSort() {
- try { var s = localStorage.getItem('dwg.sort'); if (s) sortSel.value = s; } catch (_) {}
- sortSel.addEventListener('change', function () {
- try { localStorage.setItem('dwg.sort', sortSel.value); } catch (_) {}
+ var stored; try { stored = localStorage.getItem('dwg.sort'); } catch (_) {}
+ setActiveChip(stored || currentSort);
+ sortWrap.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 (_) {}
reset(); loadNext();
});
}
@@ -215,7 +239,7 @@
if (HANDLE) qs.push('collection_handle=' + encodeURIComponent(HANDLE));
if (!VENDOR && !HANDLE) qs.push('all=1');
qs.push('page=' + p); qs.push('per=' + PER);
- if (sortSel && sortSel.value) qs.push('sort=' + encodeURIComponent(sortSel.value));
+ if (currentSort) qs.push('sort=' + encodeURIComponent(currentSort));
return FEED + '?' + qs.join('&');
}
@@ -226,7 +250,7 @@
var sw = (t.swatches || []).slice(0,6).map(function (h) {
return '<span class="dw-grouped__swatch" style="background:' + esc(h) + '"></span>';
}).join('');
- var pageHref = PAGE_BASE + '?pattern_id=' + encodeURIComponent(t.pattern_id);
+ var pageHref = PAGE_BASE + '?pattern_id=' + encodeURIComponent(t.pattern_id) + (PREVIEW ? '&preview_theme_id=' + PREVIEW : '');
// single-colorway tile → straight to the product; multi → pattern page
var href = (t.count > 1) ? pageHref : (t.product_url || pageHref);
var chip = (t.count > 1)
← 003b6f72 China Seas image-corruption repair: authoritative re-scrape
·
back to Designer Wallcoverings
·
grouped grid: two-tier drill-down chips (Color/Style/Sort → ec248194 →