facets drill-down + noopener: /api/facets + /api/grades now count over the active filtered set via shared filterProducts() (was counting whole niche catalog regardless of q/vendor), /api/products refactored to share the helper, loadFacets() forwards active q; noopener,noreferrer added to sister-site window.open popup

025d47c0b36d9fdf1c5f59121dbc5035f8769917 · 2026-06-01 07:30:42 -0700 · Steve Abrams

Files touched

M public/index.html
M server.js

Diff

commit 025d47c0b36d9fdf1c5f59121dbc5035f8769917
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 1 07:30:42 2026 -0700

    facets drill-down + noopener: /api/facets + /api/grades now count over the active filtered set via shared filterProducts() (was counting whole niche catalog regardless of q/vendor), /api/products refactored to share the helper, loadFacets() forwards active q; noopener,noreferrer added to sister-site window.open popup
---
 public/index.html |  4 ++--
 server.js         | 37 +++++++++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2db509d..443ce02 100644
--- a/public/index.html
+++ b/public/index.html
@@ -743,7 +743,7 @@ textarea:focus-visible,
       const isCurrent = n.dataset.slug === SLUG;
       n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
     });
-    n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
+    n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank', 'noopener,noreferrer'));
   });
 })();
 </script>
@@ -851,7 +851,7 @@ async function loadFacets() {
   // Hydrate total counts + per-grade chip badges from /api/grades.
   let g;
   try {
-    const r = await fetch('/api/grades');
+    const r = await fetch('/api/grades' + (state.q ? '?q=' + encodeURIComponent(state.q) : ''));
     if (!r.ok) throw new Error('HTTP ' + r.status);
     g = await r.json();
   } catch (e) { console.error('loadFacets failed:', e); return; }
diff --git a/server.js b/server.js
index bfd6835..4ba9f53 100644
--- a/server.js
+++ b/server.js
@@ -163,16 +163,24 @@ function matchesGrade(p, gradeKey) {
   return re.test(blob);
 }
 
-app.get('/api/products', (req, res) => {
-  const { q, aesthetic, grade, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
+// Shared filter — applied identically by /api/products and the facet/grade
+// count endpoints so counts always reflect the active filtered set (drill-down),
+// not the unfiltered niche catalog. `skip` excludes the dimension being counted.
+function filterProducts({ q, aesthetic, grade, vendor } = {}, skip = null) {
   let list = PRODUCTS_NICHE;
   if (q) {
-    const needle = q.toLowerCase();
+    const needle = String(q).toLowerCase();
     list = list.filter(p => (p.title || '').toLowerCase().includes(needle) || (p.tags || []).some(t => t.toLowerCase().includes(needle)));
   }
-  if (aesthetic && aesthetic !== 'all') list = list.filter(p => p.aesthetic === aesthetic);
-  if (grade && grade !== 'all' && GRADE_MATCHERS[grade]) list = list.filter(p => matchesGrade(p, grade));
-  if (vendor && vendor !== 'all') list = list.filter(p => p.vendor === vendor);
+  if (skip !== 'aesthetic' && aesthetic && aesthetic !== 'all') list = list.filter(p => p.aesthetic === aesthetic);
+  if (skip !== 'grade' && grade && grade !== 'all' && GRADE_MATCHERS[grade]) list = list.filter(p => matchesGrade(p, grade));
+  if (skip !== 'vendor' && vendor && vendor !== 'all') list = list.filter(p => p.vendor === vendor);
+  return list;
+}
+
+app.get('/api/products', (req, res) => {
+  const { q, aesthetic, grade, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
+  let list = filterProducts({ q, aesthetic, grade, vendor });
   list = sortProducts(list, sort);
   const total = list.length;
   const pageNum = Math.max(1, parseInt(page) || 1);
@@ -191,21 +199,30 @@ app.get('/api/sliders', (req, res) => {
 });
 
 app.get('/api/facets', (req, res) => {
+  const { q, aesthetic, grade, vendor } = req.query;
   const aesthetics = {}; const vendors = {};
-  for (const p of PRODUCTS_NICHE) {
+  // Each dimension counted over the set filtered by the OTHER active facets.
+  for (const p of filterProducts({ q, aesthetic, grade, vendor }, 'aesthetic')) {
     aesthetics[p.aesthetic] = (aesthetics[p.aesthetic] || 0) + 1;
+  }
+  for (const p of filterProducts({ q, aesthetic, grade, vendor }, 'vendor')) {
     vendors[p.vendor] = (vendors[p.vendor] || 0) + 1;
   }
-  res.json({ aesthetics, vendors, total: PRODUCTS_NICHE.length });
+  res.json({ aesthetics, vendors, total: filterProducts({ q, aesthetic, grade, vendor }).length });
 });
 
 // Hospitality-grade facet counts — drives the front-page filter chips.
+// Each grade is counted over the set filtered by the OTHER active facets
+// (q/vendor) so the chip badges reflect the current drill-down, not the
+// whole niche catalog.
 app.get('/api/grades', (req, res) => {
+  const { q, vendor } = req.query;
+  const base = filterProducts({ q, vendor }, 'grade');
   const counts = {};
   for (const key of Object.keys(GRADE_MATCHERS)) {
-    counts[key] = PRODUCTS_NICHE.filter(p => matchesGrade(p, key)).length;
+    counts[key] = base.filter(p => matchesGrade(p, key)).length;
   }
-  res.json({ total: PRODUCTS_NICHE.length, counts });
+  res.json({ total: base.length, counts });
 });
 
 app.get('/api/health', (req, res) => res.json({ status: 'ok', count: PRODUCTS_NICHE.length, dropped: DROPPED }));

← fd7cb1c remove public/index.html.bak-20260526152130 (served by expre · back to Hospitalitywallcoverings · Remove Big Red widget — never UX-worked, collided with Help 50da29f →