wire sort select to product grid API

d757ec5641399196d12f741809e2e58a7a0a1cf3 · 2026-05-19 07:52:07 -0700 · Steve Abrams

state.sort now defaults to newest, hydrates from localStorage before
the first loadGridPage() call, and is appended to /api/products params
so the server-side sort param is actually honored.

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

Files touched

M public/index.html

Diff

commit d757ec5641399196d12f741809e2e58a7a0a1cf3
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 07:52:07 2026 -0700

    wire sort select to product grid API
    
    state.sort now defaults to newest, hydrates from localStorage before
    the first loadGridPage() call, and is appended to /api/products params
    so the server-side sort param is actually honored.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 62bdc16..f44ba6f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -430,7 +430,17 @@ 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 };
+// Hydrate saved sort BEFORE first grid load so the server returns it sorted.
+try {
+  var __sortSel = document.getElementById('sortSelect');
+  var __sortKey = location.hostname.replace(/\./g, '_') + '_sort';
+  var __sortSaved = localStorage.getItem(__sortKey);
+  if (__sortSaved) {
+    state.sort = __sortSaved;
+    if (__sortSel) __sortSel.value = __sortSaved;
+  }
+} catch(e){}
 const LABELS = {"all":"All"};
 
 function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c])); }
@@ -543,6 +553,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 && state.sort !== 'newest') params.set('sort', state.sort);
   let data;
   try {
     const r = await fetch('/api/products?' + params);

← 986ab76 hero-4grid: relocate json from data/ to public/ for Express · back to Vinylwallpaper · fix facets total, add clean-URL routes + bak-file 404 guard dd74a8d →