← back to Astek Landing
astek-landing: PDP spec rows drill back to filtered catalog (TK-10093)
72f14c18b53dcb2b1535d7de6dab97e6e075fa8e · 2026-07-31 10:54:44 -0700 · Steve
Completes the chain-down: catalog atom -> filtered URL -> PDP -> PDP spec value
-> back to the catalog filtered by it. Pattern/Colorway/Width/Length/Repeat/
Material/Match/Format now render as .drill <a href=/?field=value>. 'Pairs well
with' cards were already <a> drills. Verified local :9944 (PDP JS parses).
Files touched
M public/product.htmlM public/styles.css
Diff
commit 72f14c18b53dcb2b1535d7de6dab97e6e075fa8e
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Jul 31 10:54:44 2026 -0700
astek-landing: PDP spec rows drill back to filtered catalog (TK-10093)
Completes the chain-down: catalog atom -> filtered URL -> PDP -> PDP spec value
-> back to the catalog filtered by it. Pattern/Colorway/Width/Length/Repeat/
Material/Match/Format now render as .drill <a href=/?field=value>. 'Pairs well
with' cards were already <a> drills. Verified local :9944 (PDP JS parses).
---
public/product.html | 18 ++++++++++--------
public/styles.css | 3 +++
2 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/public/product.html b/public/product.html
index 93d8376..fa970a6 100644
--- a/public/product.html
+++ b/public/product.html
@@ -46,6 +46,8 @@
const handle=decodeURIComponent(location.pathname.split('/').pop());
const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
function specRow(k,v){return v?`<div class="row"><span class="k">${k}</span><span class="v">${esc(v)}</span></div>`:'';}
+// HARD RULE: a PDP spec value drills BACK to the catalog filtered by it (chain all the way down)
+function specDrill(k,field,v){return v?`<div class="row"><span class="k">${k}</span><span class="v"><a class="drill" href="/?${field}=${encodeURIComponent(v)}" title="See all with ${esc(k)} = ${esc(v)}">${esc(v)}</a></span></div>`:'';}
let VM={}; // vendorMeta from /api/config — phone, account #, discount, pricing model
const money=n=>n==null?null:'$'+Number(n).toFixed(2);
@@ -119,14 +121,14 @@ function priceBox(p){
${specRow('DW SKU',p.dw_sku)}
${specRow('Our Account #',VM.account_number)}
${specRow('Vendor Phone',VM.phone)}
- ${specRow('Pattern',p.series)}
- ${specRow('Colorway',p.color)}
- ${specRow('Width',p.width)}
- ${specRow('Length',p.length)}
- ${specRow('Repeat',p.repeat)}
- ${specRow('Material',p.material)}
- ${specRow('Match',p.match)}
- ${specRow('Format',p.book)}
+ ${specDrill('Pattern','series',p.series)}
+ ${specDrill('Colorway','color',p.color)}
+ ${specDrill('Width','width',p.width)}
+ ${specDrill('Length','length',p.length)}
+ ${specDrill('Repeat','repeat',p.repeat)}
+ ${specDrill('Material','material',p.material)}
+ ${specDrill('Match','match',p.match)}
+ ${specDrill('Format','book',p.book)}
</div>
</div>
</div>
diff --git a/public/styles.css b/public/styles.css
index 76f90df..6abbe3d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -166,6 +166,9 @@ footer{border-top:1px solid var(--line);background:var(--paper)}
.spec .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.spec .row .k{color:var(--ink-soft);letter-spacing:.04em}
.spec .row .v{color:var(--ink);text-align:right}
+/* drill atom: a spec value is an href back to the catalog filtered by it (deeper data) */
+.spec .row .v a.drill{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);transition:color .12s,border-color .12s}
+.spec .row .v a.drill:hover{color:var(--accent,#5eead4);border-bottom-color:currentColor}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:64px;
padding-top:40px;border-top:1px solid var(--line)}
.story h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 12px}
← cd9f7d4 astek-landing: catalog surface — every data point drills to
·
back to Astek Landing
·
auto-save: 2026-07-31T10:57:10 (1 files) — data/products.jso 216b187 →