[object Object]

← back to Japan Enrich

japan viewer: make distributor chip a link to the SKU's distributor-microsite page (import-from-here)

2cfccdd4628dace0f45548c32fc36de24a861ebb · 2026-07-06 13:39:04 -0700 · Steve

The distributor chip + info-drawer row now open p.url (the exact product page on
sangetsu-goodrich.co.th) in a new tab — that URL is also the input the DW
product-import-from-url engine consumes, so 'open the microsite + import there' is
one click. Anchor is excluded from the card's delegated nav, so no double-open.

Files touched

Diff

commit 2cfccdd4628dace0f45548c32fc36de24a861ebb
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jul 6 13:39:04 2026 -0700

    japan viewer: make distributor chip a link to the SKU's distributor-microsite page (import-from-here)
    
    The distributor chip + info-drawer row now open p.url (the exact product page on
    sangetsu-goodrich.co.th) in a new tab — that URL is also the input the DW
    product-import-from-url engine consumes, so 'open the microsite + import there' is
    one click. Anchor is excluded from the card's delegated nav, so no double-open.
---
 viewer-local/public/index.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/viewer-local/public/index.html b/viewer-local/public/index.html
index 078b15c..655ba13 100644
--- a/viewer-local/public/index.html
+++ b/viewer-local/public/index.html
@@ -86,8 +86,10 @@ body.imgonly .grid:not(.list) .card .b{display:none}
 .chip.price{color:var(--ink);background:transparent;border-color:var(--line)}
 /* distributor / purchase-channel chip — accent when we must order from a distributor (Goodrich),
    muted when the mill sells direct (Lilycolor/Greenland) */
-.chip.dist{background:transparent;border-color:var(--acc);color:var(--acc)}
+.chip.dist{background:transparent;border-color:var(--acc);color:var(--acc);text-decoration:none;cursor:pointer}
+.chip.dist:hover{background:#5eead41a}
 .chip.dist.direct{border-color:var(--line);color:var(--mut)}
+.chip.dist.direct:hover{border-color:var(--acc);color:var(--ink)}
 .chip.toggle{background:transparent;color:var(--mut);border-color:var(--line);cursor:pointer;user-select:none}
 .chip.toggle:hover{border-color:var(--acc);color:var(--ink)}
 /* colorway sibling dots — the "other colors of this pattern" */
@@ -255,7 +257,13 @@ function card(p){
   const cwDots=(p.siblings&&p.siblings.length)
     ?`<span class="cws" title="${p.colorway_count} colorways in this pattern">${p.siblings.map(s=>`<i class="${s.hex?'':'pend'}" style="${s.hex?('background:'+esc(s.hex)):''}" title="${esc(s.sku)}${s.family?(' · '+esc(s.family)):''}"></i>`).join('')}<span class="cwn">${p.colorway_count} cw</span></span>`:'';
   const price=p.price_yen?`<span class="chip price" title="Japan LIST ¥${p.price_yen.toLocaleString()}/m — not net cost">${usd(p.price_yen)||('¥'+p.price_yen.toLocaleString())}<span class="muted">/m</span></span>`:'';
-  const dist=p.distributor?`<span class="chip dist${p.dist_direct?' direct':''}" title="${p.dist_direct?'Sold direct by the mill':'Purchase channel — this SKU can only be ordered from this distributor'}">${p.dist_direct?'':'🏬 '}${esc(p.distributor)}</span>`:'';
+  // distributor chip → links to the SKU's page on the distributor microsite (import from here)
+  const distLbl=`${p.dist_direct?'':'🏬 '}${esc(p.distributor||'')}`;
+  const dist=p.distributor
+    ?(p.url
+      ?`<a class="chip dist${p.dist_direct?' direct':''}" href="${esc(p.url)}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()" title="Open on ${esc(p.distributor)} — import this SKU from here ↗">${distLbl} ↗</a>`
+      :`<span class="chip dist${p.dist_direct?' direct':''}" title="${p.dist_direct?'Sold direct by the mill':'Purchase channel — order from this distributor'}">${distLbl}</span>`)
+    :'';
   return `<div class="card"${p.url?` data-href="${esc(p.url)}"`:''} data-sku="${esc(p.sku)}">
     ${img}<div class="b">
     <span class="vend">${src}${p.collection?(' · '+esc(p.collection)):''}</span>
@@ -275,7 +283,7 @@ function card(p){
     <span class="lc" title="Fire class">${esc(p.fire_class||'')}</span>
     </div>
     <div class="info" onclick="event.stopPropagation()">
-      ${kv('SKU',p.sku)}${kv('Source',p.src_label)}${kv('Distributor',p.distributor)}${kv('Collection',p.collection)}${kv('Pattern',p.title)}
+      ${kv('SKU',p.sku)}${kv('Source',p.src_label)}${p.distributor?`<div class="kv"><span class="k">Distributor</span><span class="v">${p.url?`<a class="lnk" href="${esc(p.url)}" target="_blank" rel="noopener noreferrer">${esc(p.distributor)} ↗</a>`:esc(p.distributor)}</span></div>`:''}${kv('Collection',p.collection)}${kv('Pattern',p.title)}
       ${kv('Color name',p.color_name)}${kv('Color family',p.color_family)}${kv('Style',p.style)}${kv('Material',p.material)}
       ${kv('Width',p.width)}${kv('Repeat',p.repeat)}${kv('Fire',p.fire)}
       ${kv('Performance',(p.functions||[]).join(', '))}

← 993b675 japan: persist distributor field into staging + dw_unified o  ·  back to Japan Enrich  ·  japan viewer: '⤓ Import' button — enqueue SKUs for dw_unifie ab44253 →