Add Approach B testing checklist + troubleshooting guide

e837c6e61f312c09d9abe803e143da3d9253a8d6 · 2026-06-22 19:09:27 -0700 · Steve Abrams
Files touched

A HORIZONTAL-FILTERS-B-CHECKLIST.md
Diff

commit e837c6e61f312c09d9abe803e143da3d9253a8d6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 19:09:27 2026 -0700

    Add Approach B testing checklist + troubleshooting guide
---
 HORIZONTAL-FILTERS-B-CHECKLIST.md | 146 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)

diff --git a/HORIZONTAL-FILTERS-B-CHECKLIST.md b/HORIZONTAL-FILTERS-B-CHECKLIST.md
new file mode 100644
index 00000000..d885816e
--- /dev/null
+++ b/HORIZONTAL-FILTERS-B-CHECKLIST.md
@@ -0,0 +1,146 @@
+# Approach B Horizontal Filters — Live Testing Checklist
+
+**Status:** ✅ Wired into collection template (commit ab98e857)  
+**Section:** `collection-filters-horizontal.liquid`  
+**Template:** `shopify/_cwGRID/sections/collection.liquid` (lines 84-87)
+
+---
+
+## Quick Start
+
+1. **Push to sandbox theme**:
+   ```bash
+   shopify theme push --development
+   # or use your standard push script
+   ```
+
+2. **Visit a collection** (e.g., wallpaper by color):
+   ```
+   https://designer-laboratory-sandbox.myshopify.com/collections/wallpaper-by-color
+   ```
+
+3. **Look for horizontal chip filter bar** (should appear above product grid)
+
+---
+
+## Desktop Testing (Chrome DevTools, 1024px+)
+
+### ✅ Visual
+
+- [ ] Horizontal chip filter bar is visible above the grid
+- [ ] Chips read: "Color", "Style", "Brand", "Durability", "Price" (or subset based on available filters)
+- [ ] Chips have border, NOT filled (unless active)
+- [ ] "Clear Filters" button appears on the right (grayed out if no filters active)
+- [ ] Boost's vertical sidebar is **completely hidden** (check DOM: `.boost-sd__filter-tree` has `display: none`)
+
+### ✅ Interaction
+
+- [ ] **Click a color chip** → chip highlights (black bg + white text)
+- [ ] **Grid updates** → product count changes, grid re-renders with filtered products
+- [ ] **Click the chip again** → chip unhighlights, grid shows all products again
+- [ ] **Click another filter** (e.g., Style) → both filters apply together, grid shows intersection
+- [ ] **"Clear Filters" button works** → all chips unhighlight, grid shows full collection
+
+### ✅ Page Layout Integrity
+
+- [ ] Header nav stays **horizontal** (no vertical collapse)
+- [ ] Sort By dropdown renders **correctly** (not vertically stacked)
+- [ ] Grid density slider works (if present)
+- [ ] Product cards render **correctly** (images, titles visible)
+- [ ] No console errors (DevTools → Console tab)
+
+---
+
+## Mobile Testing (<720px)
+
+Use Chrome DevTools responsive mode or physical phone.
+
+### ✅ Responsive
+
+- [ ] Filter chips **stack vertically** (flex-wrap working)
+- [ ] Filter **labels hidden** on mobile (except "Filters" header)
+- [ ] "Clear Filters" button goes **full-width** below chips
+- [ ] Clicking chips still filters correctly
+- [ ] Page is **scrollable**, no overflow
+
+---
+
+## Troubleshooting
+
+### Issue: Filter chips don't appear at all
+
+**Possible causes:**
+1. Section file not found (check `shopify/sections/collection-filters-horizontal.liquid` exists)
+2. Collection has no filters enabled (check theme settings → Collections → Show Filters: ON)
+3. Boost filters are empty (collection has no active filter options)
+
+**Fix:** Check browser console for errors. If section-not-found error, ensure file is committed + pushed.
+
+### Issue: Clicking chips doesn't filter
+
+**Possible causes:**
+1. Boost's filter inputs don't have `data-filter-type` attributes (our JS can't find them)
+2. Boost's change event listener isn't firing
+3. Grid doesn't have `data-collection-grid` selector
+
+**Debug:**
+```javascript
+// Open DevTools → Console, run:
+document.querySelectorAll('input[data-filter-type="color"]').length  // Should be > 0
+document.querySelector('[data-collection-grid]')  // Should exist
+```
+
+**Fix:** Check deployment guide Phase 2 (Boost integration). May need to add data attributes to Boost's inputs manually.
+
+### Issue: Header nav or SORT BY renders vertically
+
+**This is the Approach A problem — should NOT happen with Approach B.**
+
+If it does:
+1. Check CSS: `.dw-filters-horizontal .boost-sd__filter-tree` should have `display: none !important`
+2. Verify body class: `document.body.classList.contains('dw-filters-horizontal')` should be `true`
+3. Remove the section, reload, verify nav is normal again
+4. File a bug — this shouldn't occur
+
+---
+
+## Success Criteria (All Must Pass)
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| Chip bar visible above grid | [ ] | Should show ~5 filter options |
+| Clicking chip filters grid | [ ] | Grid updates in real-time |
+| Boost sidebar hidden | [ ] | Check DOM/CSS; should be `display: none` |
+| No layout breakage | [ ] | Header + nav + SORT BY stay horizontal |
+| Mobile responsive | [ ] | Chips stack on <720px |
+| No console errors | [ ] | DevTools → Console should be clean |
+| Clear Filters works | [ ] | Removes all active chips + resets grid |
+
+---
+
+## Sign-Off
+
+Once all criteria pass:
+
+```bash
+git log --oneline -3  # Verify commits present
+git status  # Should be clean
+# Ready to merge to live
+```
+
+---
+
+## Rollback Plan (If Needed)
+
+If anything breaks during testing:
+
+1. **Remove the section from collection template** (delete lines 84-87 from collection.liquid)
+2. **Commit**: `git commit -m "Revert Approach B filters (rollback to native Boost UI)"`
+3. **Push**: `shopify theme push`
+4. **Verify**: Sidebar should re-appear, filtering should still work
+
+No data loss, no risk — purely a template change.
+
+---
+
+**Questions?** Check `HORIZONTAL-FILTERS-B-DEPLOYMENT.md` for full technical context.
← f0734d93 Wire Approach B horizontal filters into collection template · back to Designer Wallcoverings · card-hover: mobile shows ONLY pattern name (always-visible, 3af4a705 →