← back to Sample Box
Use price_display for swatch grid; surface sample_only badge; no $null rendering
a52379fff3f452284de4ba663922dbb890f6dfcc · 2026-07-16 08:48:40 -0700 · steve@designerwallcoverings.com
Files touched
Diff
commit a52379fff3f452284de4ba663922dbb890f6dfcc
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date: Thu Jul 16 08:48:40 2026 -0700
Use price_display for swatch grid; surface sample_only badge; no $null rendering
---
public/index.html | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6d8f0d4..cdf2400 100644
--- a/public/index.html
+++ b/public/index.html
@@ -375,14 +375,21 @@ async function loadSwatches(){
}
grid.innerHTML=products.map(p=>{
const sel=state.selected.some(s=>s.sku===p.sku);
- const price=p.price?`$${Number(p.price).toFixed(0)}/roll`:'';
+ // Use price_display (already formatted by catalog builder: "$94.42" or "Roll price on request").
+ // Never render raw p.price (can be null for sample_only products → "$null"/"$NaN").
+ const priceDisplay = p.price_display || (p.price != null ? `$${Number(p.price).toFixed(0)}/roll` : '');
+ // sample_only badge: product has no roll price but is perfectly valid to sample
+ const sampleOnlyBadge = p.sample_only
+ ? `<span style="display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#f0f0f0;color:#888;border-radius:3px;padding:1px 6px;margin-top:3px">Sample only</span>`
+ : '';
return `<div class="swatch-card${sel?' selected':''}" data-sku="${esc(p.sku)}" onclick="toggleSwatch(this)">
<img src="${esc(p.image||'')}" alt="${esc(p.title||'')}" loading="lazy"
onerror="this.style.background='#f5f0ea'">
<div class="swatch-meta">
<div class="swatch-title">${esc(p.title||'Untitled')}</div>
<div class="swatch-vendor">${esc(p.vendor||'')}</div>
- ${price?`<div class="swatch-price">${esc(price)}</div>`:''}
+ ${priceDisplay?`<div class="swatch-price">${esc(priceDisplay)}</div>`:''}
+ ${sampleOnlyBadge}
</div>
<div class="check-badge">✓</div>
</div>`;
← 69305b2 shopify: refresh catalog — real roll prices, no $4.25 sample
·
back to Sample Box
·
shopify: refresh catalog — keep sample-only as 'by request' cecac17 →