color-palette: demote single-hex below canvas; renderMeta fallback so un-enriched products show multi-color+% not a lone 'Color' card

279d399576cbdb7aff0b7bd68d4c75d6102a5e4c · 2026-07-07 09:24:12 -0700 · Steve
Files touched

M shopify/theme-LIVE-591/snippets/color-palette.liquid
Diff

commit 279d399576cbdb7aff0b7bd68d4c75d6102a5e4c
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Jul 7 09:24:12 2026 -0700

    color-palette: demote single-hex below canvas; renderMeta fallback so un-enriched products show multi-color+% not a lone 'Color' card
---
 .../theme-LIVE-591/snippets/color-palette.liquid   | 37 +++++++++++-----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/shopify/theme-LIVE-591/snippets/color-palette.liquid b/shopify/theme-LIVE-591/snippets/color-palette.liquid
index 6ff27f3d..0ad6d174 100644
--- a/shopify/theme-LIVE-591/snippets/color-palette.liquid
+++ b/shopify/theme-LIVE-591/snippets/color-palette.liquid
@@ -132,26 +132,25 @@
       return true;
     }
 
-    /* ── Tier 1: color_details / color_dots_json metafield ── */
-    var raw = root.dataset.colors;
-    if(raw){
-      try { if(render(JSON.parse(raw.replace(/=>/g,':')))) return; } catch(e){}
-    }
-
-    /* ── Tier 2: primary_color_hex + ai_generated_colors ── */
-    var ph = root.dataset.primaryHex, aiRaw = root.dataset.aiColors;
-    if(ph || aiRaw){
-      var list2=[];
+    /* Metafield fallbacks — used ONLY if canvas extraction yields nothing.
+       (A single color_hex alone is a worse answer than a multi-color canvas read
+       for the "all colors with %" goal, so these are demoted below canvas.) */
+    function renderMeta(){
+      var ph=root.dataset.primaryHex, aiRaw=root.dataset.aiColors, sh=root.dataset.colorHex, list2=[];
       if(ph) list2.push({hex:ph, name:root.dataset.colorName||'Primary'});
       try { JSON.parse((aiRaw||'[]').replace(/=>/g,':')).forEach(function(nm){ var h=N[(''+nm).toLowerCase()]; if(h) list2.push({hex:h,name:nm}); }); } catch(e){}
-      if(render(list2)) return;
+      if(list2.length && render(list2)) return true;
+      if(sh) return render([{hex:sh, name:root.dataset.colorName||'Color'}]);
+      return false;
     }
 
-    /* ── Tier 2.5: single color_hex ── */
-    var sh = root.dataset.colorHex;
-    if(sh){ if(render([{hex:sh, name:root.dataset.colorName||'Color'}])) return; }
+    /* ── Tier 1: color_details / color_dots_json metafield (BEST — local-vision enriched) ── */
+    var raw = root.dataset.colors;
+    if(raw){
+      try { if(render(JSON.parse(raw.replace(/=>/g,':')))) return; } catch(e){}
+    }
 
-    /* ── Tier 3: Canvas extraction from the product image (always yields %) ── */
+    /* ── Tier 2: Canvas extraction from the product image (multi-color + %), meta as fallback ── */
     var REF={'red':[190,55,55],'crimson':[176,40,60],'navy':[30,45,80],'blue':[70,110,175],'slate blue':[95,120,150],'powder blue':[170,196,214],'green':[70,130,80],'sage':[150,168,138],'celadon':[176,192,168],'eucalyptus':[130,146,128],'moss':[120,138,90],'olive':[124,124,70],'gold':[200,168,90],'ochre':[190,150,80],'yellow':[224,186,90],'orange':[220,120,70],'terracotta':[196,110,85],'coral':[224,140,120],'pink':[220,150,165],'blush':[224,190,190],'purple':[140,100,160],'lavender':[190,180,205],'black':[40,40,40],'charcoal':[70,74,78],'white':[248,246,240],'ivory':[240,236,224],'cream':[236,228,206],'eggshell':[224,216,196],'gray':[140,140,142],'greige':[176,168,154],'silver':[196,196,198],'brown':[130,95,70],'walnut':[110,80,55],'taupe':[150,138,120],'beige':[214,202,178],'tan':[196,176,140],'sand':[200,184,150],'stone':[186,180,166],'teal':[70,140,140],'turquoise':[110,180,175]};
     function closestName(r,g,b){var best='',bd=1e9;for(var n in REF){var c=REF[n],d=Math.pow(r-c[0],2)+Math.pow(g-c[1],2)+Math.pow(b-c[2],2);if(d<bd){bd=d;best=n;}}return best;}
     function hx(r,g,b){return '#'+[r,g,b].map(function(x){return x.toString(16).padStart(2,'0');}).join('');}
@@ -166,10 +165,10 @@
           var sorted=Object.keys(bk).map(function(k){return bk[k];}).sort(function(a,b){return b.n-a.n;});
           var tot=sz*sz,out=[],seen={};
           for(var j=0;j<sorted.length && out.length<8;j++){var s=sorted[j],ar=Math.round(s.r/s.n),ag=Math.round(s.g/s.n),ab=Math.round(s.b/s.n),nm=closestName(ar,ag,ab),pct=Math.round(s.n/tot*100);if(seen[nm]||pct<2)continue;seen[nm]=1;out.push({name:nm,hex:hx(ar,ag,ab),pct:pct});}
-          render(out.slice(0,6));
-        }catch(e){}
+          if(!render(out.slice(0,6))) renderMeta();
+        }catch(e){ renderMeta(); }
       };
-      img.onerror=function(){};
+      img.onerror=function(){ renderMeta(); };
       img.src=url;
     }
     function imgUrl(){
@@ -184,7 +183,7 @@
     else {
       var obs=new MutationObserver(function(m,o){var v=imgUrl();if(v){o.disconnect();fromCanvas(v);}});
       obs.observe(document.body,{childList:true,subtree:true});
-      setTimeout(function(){obs.disconnect();},5000);
+      setTimeout(function(){ obs.disconnect(); if(!cards.children.length) renderMeta(); },5000);
     }
   }
   if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}
← fb621f98 gitignore daisy-bennett-viewer img/ + rooms-local/ (keep swa · back to Designer Wallcoverings · auto-save: 2026-07-07T09:29:44 (4 files) — pending-approval/ f168a645 →