Wire the Sort select to actually re-sort the grid (newest/color/style/sku/title) and persist across reload + color filter

0f7f065c5fcfb5bb6a81774150c461ecc67ec4d2 · 2026-05-18 20:34:07 -0700 · Steve

Files touched

M index.html

Diff

commit 0f7f065c5fcfb5bb6a81774150c461ecc67ec4d2
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon May 18 20:34:07 2026 -0700

    Wire the Sort select to actually re-sort the grid (newest/color/style/sku/title) and persist across reload + color filter
---
 index.html | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7d80b25..685b9f1 100644
--- a/index.html
+++ b/index.html
@@ -277,7 +277,11 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
   }
   if (sortSel) {
     sortSel.value = saved.sort || 'newest';
-    sortSel.addEventListener('change', () => { saved.sort = sortSel.value; localStorage.setItem(STORE, JSON.stringify(saved)); /* TODO: re-sort live */ });
+    sortSel.addEventListener('change', () => {
+      saved.sort = sortSel.value;
+      localStorage.setItem(STORE, JSON.stringify(saved));
+      if (typeof window.applySort === 'function') window.applySort(sortSel.value);
+    });
   }
   if (search) {
     search.addEventListener('input', () => {
@@ -338,6 +342,9 @@ async function init(){
     document.getElementById('heroCount').textContent=allProducts.length+' luxurious flocked & velvet wallcoverings from the world\'s finest makers.';
     buildFeatured();
     buildColorFilters();
+    let savedSort='newest';
+    try{savedSort=(JSON.parse(localStorage.getItem('flockedwallpaper_grid')||'{}').sort)||'newest';}catch{}
+    filteredProducts=sortProducts(filteredProducts,savedSort);
     displayBatch();
   }catch(e){console.error(e)}
 }
@@ -381,6 +388,9 @@ function filterByColor(color,el){
   displayed=0;
   document.getElementById('productGrid').innerHTML='';
   filteredProducts=color?allProducts.filter(p=>p.primaryColor===color):[...allProducts];
+  let curSort='newest';
+  try{curSort=(JSON.parse(localStorage.getItem('flockedwallpaper_grid')||'{}').sort)||'newest';}catch{}
+  filteredProducts=sortProducts(filteredProducts,curSort);
   displayBatch();
 }
 
@@ -392,6 +402,30 @@ function filterProducts(){
   displayBatch();
 }
 
+function sortProducts(list,mode){
+  const arr=[...list];
+  const sku=p=>(p.primarySku||p.handle||'').toLowerCase();
+  const title=p=>(p.title||'').toLowerCase();
+  const color=p=>(p.primaryColor||'~').toLowerCase();
+  const style=p=>((p.tags&&p.tags[0])||p.productType||'~').toLowerCase();
+  switch(mode){
+    case 'color': arr.sort((a,b)=>color(a).localeCompare(color(b))||title(a).localeCompare(title(b))); break;
+    case 'style': arr.sort((a,b)=>style(a).localeCompare(style(b))||title(a).localeCompare(title(b))); break;
+    case 'sku': arr.sort((a,b)=>sku(a).localeCompare(sku(b))); break;
+    case 'title': arr.sort((a,b)=>title(a).localeCompare(title(b))); break;
+    case 'newest': default:
+      arr.sort((a,b)=>new Date(b.createdAt||0)-new Date(a.createdAt||0)); break;
+  }
+  return arr;
+}
+
+window.applySort=function(mode){
+  filteredProducts=sortProducts(filteredProducts,mode);
+  displayed=0;
+  document.getElementById('productGrid').innerHTML='';
+  displayBatch();
+};
+
 function displayBatch(){
   const grid=document.getElementById('productGrid');
   const end=Math.min(displayed+BATCH,filteredProducts.length);

← d2dfd90 Make product grid a CSS grid so the density slider actually · back to Flockedwallpaper · server.js: confine static file serving to project root — blo d957aed →