color-palette: hide color-index cards whose image fails to load (img.onerror → drop card) + skip imageless; empty-state fallback

35d1d05df091a1a02d0c9aadc75edc65bf5025c6 · 2026-07-15 16:30:52 -0700 · Steve Abrams

Files touched

M snippets/color-palette.liquid

Diff

commit 35d1d05df091a1a02d0c9aadc75edc65bf5025c6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 16:30:52 2026 -0700

    color-palette: hide color-index cards whose image fails to load (img.onerror → drop card) + skip imageless; empty-state fallback
---
 snippets/color-palette.liquid | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/snippets/color-palette.liquid b/snippets/color-palette.liquid
index 8ee04b1..caa0d3e 100644
--- a/snippets/color-palette.liquid
+++ b/snippets/color-palette.liquid
@@ -333,14 +333,28 @@
         }
         grid.innerHTML='';
         var frag=document.createDocumentFragment();
+        // If every card's image fails to load, fall back to the empty state so the
+        // drawer never sits with a bare/blank grid.
+        function _ciEmptyIfBare(){
+          if(grid && !grid.querySelector('.dw-color-index__card')){
+            grid.innerHTML='';
+            var e=document.createElement('div'); e.className='dw-color-index__empty';
+            e.textContent='No close matches for this color yet.';
+            grid.appendChild(e);
+          }
+        }
         res.forEach(function(p){
-          if(!p || !p.handle) return;
+          if(!p || !p.handle || !p.image) return;   // no handle or no image → never render a card
           var a=document.createElement('a'); a.className='dw-color-index__card'; a.rel='nofollow';
           // link straight to the PDP handle — the roll/first-available variant,
           // never the $4.25 Sample (Sample is never the default variant).
           a.href='/products/'+encodeURIComponent(p.handle);
-          var img=document.createElement('img'); img.loading='lazy';
-          img.src=p.image||''; img.alt=p.title||'';
+          var img=document.createElement('img'); img.loading='lazy'; img.decoding='async';
+          // Belt to the build-time active+image filter: if the URL is dead (stale CDN /
+          // archived product that slipped through), drop the WHOLE card so a broken-image
+          // icon never renders to a shopper.
+          img.onerror=function(){ a.remove(); _ciEmptyIfBare(); };
+          img.src=p.image; img.alt=p.title||'';
           var cap=document.createElement('span'); cap.className='dw-color-index__cap';
           cap.textContent=(p.title||'').replace(/\s*\|\s*.*$/,'');   // pattern part
           if(p.vendor){ var v=document.createElement('i'); v.textContent=p.vendor; cap.appendChild(v); }

← 48d2bc0 auto-save: 2026-07-15T10:35:56 (1 files) — snippets/dw-boost · back to Dw Theme Boost Fix · (newest)