`snippets/more-wallcoverings-like-this.liquid`

55 lines
{%- comment -%} CLIP "More like this" — PDP color-dot CLIP visual-similarity row.
  Calls the SAME-BEHAVIOR public proxy /apps/similar (dwphoto → loopback CLIP :9914),
  which returns the visually-nearest patterns to THIS product, softly re-ranked by the
  same hex→color-family bucket + style overlap the swatches use. Additive: the swatch
  spectrum + its color-family links above are unchanged. dw_sku / hex / style come from
  the product's REAL fields. (Steve "ship the CLIP dots" 2026-07-08)
  Relocated 2026-07-13 out of color-palette.liquid to the PDP bottom, directly above
  Recently Viewed (Steve: "recently viewed to the bottom under More Wallcoverings Like This"). {%- endcomment -%}
{%- assign _dw_sku = product.selected_or_first_available_variant.sku | default: product.variants.first.sku | remove: '-Sample' -%}
{%- assign _dw_hex = product.metafields.custom.primary_color_hex.value | default: product.metafields.custom.color_hex.value | default: product.metafields.dwc.dominant_hex.value -%}
{%- assign _dw_style = product.metafields.custom.style.value | default: product.metafields.global.Style.value | default: product.type -%}
{%- if _dw_sku != blank -%}
<div id="dw-similar" class="dw-similar"
     data-dw-sku="{{ _dw_sku | escape }}"
     data-hex="{{ _dw_hex | escape }}"
     data-style="{{ _dw_style | escape }}"
     data-endpoint="https://photo.designerwallcoverings.com/apps/similar">
  <h3 class="dw-similar__h">More Wallcoverings Like This</h3>
  <div class="dw-similar__grid" aria-live="polite"></div>
</div>
<script>
(function(){
  var root=document.getElementById('dw-similar'); if(!root) return;
  var sku=(root.dataset.dwSku||'').trim().replace(/-Sample$/i,'');  // base SKU keys the CLIP index; the Sample variant SKU (usually first-available) has no embedding
  if(!sku){ root.style.display='none'; return; }
  var ep=root.dataset.endpoint||'https://photo.designerwallcoverings.com/apps/similar';
  fetch(ep,{method:'POST',mode:'cors',headers:{'Content-Type':'application/json'},
    body:JSON.stringify({dw_sku:sku, hex:root.dataset.hex||'', style:root.dataset.style||'', k:8})})
   .then(function(r){return r.ok?r.json():{results:[]};})
   .then(function(d){
     var g=root.querySelector('.dw-similar__grid');
     if(!d.results||!d.results.length){ root.style.display='none'; return; }
     d.results.forEach(function(p){
       var a=document.createElement('a'); a.className='dw-similar__card'; a.rel='nofollow';
       // real PDP link when we have a storefront handle; else fall back to a SKU search (never a name-search)
       a.href = p.handle ? ('/products/'+encodeURIComponent(p.handle))
                         : ('/search?q='+encodeURIComponent(p.dw_sku||'')+'&type=product');
       var img=document.createElement('img'); img.loading='lazy'; img.src=p.image||''; img.alt=p.pattern||'';
       var cap=document.createElement('span'); cap.className='dw-similar__cap'; cap.textContent=p.pattern||'';
       a.appendChild(img); a.appendChild(cap); g.appendChild(a);
     });
   }).catch(function(){ root.style.display='none'; });
})();
</script>
<style>
.dw-similar{margin:20px auto 8px;max-width:660px;text-align:center}
.dw-similar__h{font-family:Lora,serif;font-size:15px;font-weight:500;color:#3D4246;letter-spacing:-0.01em;margin:0 0 12px}
.dw-similar__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.dw-similar__card{display:block;text-decoration:none;color:inherit}
.dw-similar__card img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #e5e5e5;border-radius:3px}
.dw-similar__cap{display:block;font-family:Lora,serif;font-size:11px;color:#3D4246;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.dw-similar:empty{display:none}
</style>
{%- endif -%}