fix: wire sort select to server — send sort param + hydrate before first grid load

81662dd61f8d7a0f7f1449a0f1c59b76ecf44fc8 · 2026-05-19 08:22:06 -0700 · SteveStudio2

The sort <select> was decorative: loadGridPage() never appended the sort
param, and the hydration IIFE ran after the initial loadGridPage() call.
Now state.sort is added to the API params and hydrated from localStorage
before the first load.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit 81662dd61f8d7a0f7f1449a0f1c59b76ecf44fc8
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 08:22:06 2026 -0700

    fix: wire sort select to server — send sort param + hydrate before first grid load
    
    The sort <select> was decorative: loadGridPage() never appended the sort
    param, and the hydration IIFE ran after the initial loadGridPage() call.
    Now state.sort is added to the API params and hydrated from localStorage
    before the first load.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index bb2b0b9..5ec63b9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -430,7 +430,7 @@ textarea:focus-visible,
 </script>
 
 <script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
+const state = { q:'', facet:'all', sort:'newest', page:1, pages:1, total:0, loading:false, exhausted:false };
 const LABELS = {"all":"All"};
 
 function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c])); }
@@ -543,6 +543,7 @@ async function loadGridPage() {
   const params = new URLSearchParams({ page:state.page, limit:24 });
   if (state.q) params.set('q', state.q);
   if (state.facet !== 'all') params.set('aesthetic', state.facet);
+  if (state.sort) params.set('sort', state.sort);
   let data;
   try {
     const r = await fetch('/api/products?' + params);
@@ -600,6 +601,16 @@ function setTheme(t){ document.documentElement.dataset.theme = t; try { localSto
 setTheme(document.documentElement.dataset.theme || 'light');
 tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
 
+// Hydrate saved sort value into state BEFORE the first grid load.
+(function(){
+  const sortSel = document.getElementById('sortSelect');
+  if (!sortSel) return;
+  const KEY = location.hostname.replace(/\./g, '_') + '_sort';
+  const saved = localStorage.getItem(KEY);
+  if (saved) { try { sortSel.value = saved; } catch(e){} }
+  state.sort = sortSel.value || 'newest';
+})();
+
 loadFacets();
 loadGridPage();
 </script>
@@ -900,14 +911,11 @@ loadGridPage();
 })();
 
 
-// DW STANDARD sort-select wire-up (added by fleet patcher)
+// DW STANDARD sort-select change handler (hydration runs earlier, before first grid load)
 (function(){
   const sortSel = document.getElementById('sortSelect');
   if (!sortSel) return;
   const KEY = location.hostname.replace(/\./g, '_') + '_sort';
-  const saved = localStorage.getItem(KEY);
-  if (saved) { try { sortSel.value = saved; } catch(e){} }
-  if (typeof state !== 'undefined') state.sort = sortSel.value;
   sortSel.addEventListener('change', e => {
     const v = e.target.value;
     try { localStorage.setItem(KEY, v); } catch(e){}

← 8c9791b hero-4grid: relocate json from data/ to public/ for Express · back to 1920swallpaper · fix: /api/facets total counts niche-filtered list, not raw c c57ed2b →