← back to Permit Radar
feat: add DW cross-sell strip to index + permit detail pages (links only, no checkout)
e1e9ff1085bb43ce939501f6f64a5b583a4f04f3 · 2026-07-16 07:35:11 -0700 · Steve Abrams
Files touched
M public/index.htmlM public/permit.html
Diff
commit e1e9ff1085bb43ce939501f6f64a5b583a4f04f3
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 16 07:35:11 2026 -0700
feat: add DW cross-sell strip to index + permit detail pages (links only, no checkout)
---
public/index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
public/permit.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 148 insertions(+)
diff --git a/public/index.html b/public/index.html
index 8679fa4..f20e74d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -186,6 +186,43 @@ nav {
}
.modal-close:hover { color: #1a1a1a; }
+/* ── SHOPIFY CROSS-SELL STRIP ── */
+.xsell-strip {
+ padding: 28px 20px 32px; background: #fff; border-top: 1px solid #e2e8f0;
+}
+.xsell-header {
+ display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.xsell-label {
+ font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
+ color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 4px; padding: 2px 8px;
+}
+.xsell-title { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0; }
+.xsell-subtext { font-size: 12px; color: #94a3b8; margin-left: auto; }
+.xsell-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
+ gap: 12px;
+}
+.xsell-card {
+ border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #f8fafc;
+ transition: box-shadow .15s;
+ text-decoration: none; color: inherit; display: flex; flex-direction: column;
+}
+.xsell-card:hover { box-shadow: 0 3px 16px rgba(0,0,0,.09); }
+.xsell-img-wrap { aspect-ratio: 1; overflow: hidden; background: #e2e8f0; }
+.xsell-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.xsell-info { padding: 8px 10px 10px; flex: 1; }
+.xsell-product-title { font-size: 12px; font-weight: 600; color: #1e293b; line-height: 1.3; margin-bottom: 2px;
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.xsell-vendor { font-size: 11px; color: #94a3b8; }
+.xsell-price { font-size: 13px; font-weight: 700; color: #15803d; margin-top: 4px; }
+.xsell-cta-link {
+ display: inline-block; margin-top: 14px; font-size: 12px; color: #1d4ed8;
+ text-decoration: none; font-weight: 600;
+}
+.xsell-cta-link:hover { text-decoration: underline; }
+
/* ── FOOTER ── */
footer { background: #0f172a; color: #64748b; padding: 24px 20px; text-align: center; font-size: 13px; margin-top: 32px; }
footer a { color: #94a3b8; text-decoration: none; }
@@ -277,6 +314,21 @@ footer a:hover { color: #fff; }
<div class="grid" id="grid"><div class="empty">Loading permits…</div></div>
</div>
+<!-- SHOPIFY CROSS-SELL STRIP -->
+<div class="xsell-strip" id="xsell-strip">
+ <div class="xsell-header">
+ <span class="xsell-label">Trade cross-sell — links to the live DW store</span>
+ <p class="xsell-title">Outfit the remodel — shop Designer Wallcoverings</p>
+ <span class="xsell-subtext">No checkout here — opens designerwallcoverings.com</span>
+ </div>
+ <div class="xsell-grid" id="xsell-grid">
+ <div style="color:#94a3b8;font-size:13px;padding:16px 0">Loading…</div>
+ </div>
+ <a class="xsell-cta-link" href="https://www.designerwallcoverings.com" target="_blank" rel="noopener noreferrer">
+ Browse full collection at designerwallcoverings.com →
+ </a>
+</div>
+
<!-- LEAD FUNNEL SECTION -->
<div class="funnel-section" id="get-alerts">
<h2>Turn Permits Into Revenue</h2>
@@ -559,6 +611,31 @@ async function submitLead(e) {
msg.innerHTML = '<div class="error-msg">Network error.</div>';
}
}
+
+// ── Shopify cross-sell strip ──────────────────────────────────────────────────
+(async function loadXsell() {
+ const grid = document.getElementById('xsell-grid');
+ if (!grid) return;
+ try {
+ const r = await fetch('/api/shopify-crosssell');
+ const d = await r.json();
+ if (!d.products || !d.products.length) { grid.innerHTML = ''; return; }
+ grid.innerHTML = d.products.map(p => `
+<a class="xsell-card" href="${esc(p.url)}" target="_blank" rel="noopener noreferrer"
+ title="${esc(p.title)}">
+ <div class="xsell-img-wrap">
+ <img src="${esc(p.image)}" alt="${esc(p.title)}" loading="lazy">
+ </div>
+ <div class="xsell-info">
+ <div class="xsell-product-title">${esc(p.title)}</div>
+ <div class="xsell-vendor">${esc(p.vendor)}</div>
+ <div class="xsell-price">${p.price ? '$' + Number(p.price).toFixed(2) : ''}</div>
+ </div>
+</a>`).join('');
+ } catch (err) {
+ grid.innerHTML = '';
+ }
+})();
</script>
</body>
</html>
diff --git a/public/permit.html b/public/permit.html
index 3b3a924..b67c875 100644
--- a/public/permit.html
+++ b/public/permit.html
@@ -70,6 +70,42 @@ select, input { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; borde
.success-msg { background: #dcfce7; color: #15803d; border-radius: 6px; padding: 10px; margin-top: 10px; font-size: 13px; text-align: center; }
.error-msg { background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 10px; margin-top: 10px; font-size: 13px; text-align: center; }
.loading { color: #94a3b8; padding: 60px; text-align: center; }
+
+/* ── SHOPIFY CROSS-SELL (permit detail) ── */
+.xsell-strip {
+ max-width: 800px; margin: 24px auto 0; padding: 0 20px 40px;
+}
+.xsell-inner {
+ background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 24px;
+}
+.xsell-header {
+ display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
+}
+.xsell-label {
+ font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
+ color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 4px; padding: 2px 8px;
+}
+.xsell-title { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0; }
+.xsell-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 10px;
+}
+.xsell-card {
+ border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #f8fafc;
+ text-decoration: none; color: inherit; display: flex; flex-direction: column;
+ transition: box-shadow .15s;
+}
+.xsell-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); }
+.xsell-img-wrap { aspect-ratio: 1; overflow: hidden; background: #e2e8f0; }
+.xsell-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.xsell-info { padding: 7px 9px 9px; flex: 1; }
+.xsell-product-title { font-size: 11px; font-weight: 600; color: #1e293b; line-height: 1.3;
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.xsell-vendor { font-size: 10px; color: #94a3b8; }
+.xsell-price { font-size: 12px; font-weight: 700; color: #15803d; margin-top: 3px; }
+.xsell-browse { display: inline-block; margin-top: 12px; font-size: 12px; color: #1d4ed8; font-weight: 600; text-decoration: none; }
+.xsell-browse:hover { text-decoration: underline; }
</style>
</head>
<body>
@@ -220,6 +256,41 @@ async function submitLead(e) {
if (d.ok) { msg.innerHTML = '<div class="success-msg">✓ Lead request submitted! ID: ' + esc(d.id) + '</div>'; setTimeout(closeLead, 2500); }
else { msg.innerHTML = '<div class="error-msg">Error: ' + esc(d.error) + '</div>'; }
}
+
+// ── Shopify cross-sell (permit detail) ───────────────────────────────────────
+(async function loadXsell() {
+ try {
+ const r = await fetch('/api/shopify-crosssell');
+ const d = await r.json();
+ if (!d.products || !d.products.length) return;
+ const strip = document.createElement('div');
+ strip.className = 'xsell-strip';
+ strip.innerHTML = `
+<div class="xsell-inner">
+ <div class="xsell-header">
+ <span class="xsell-label">Trade cross-sell — links to live DW store</span>
+ <p class="xsell-title">Outfit the remodel — shop Designer Wallcoverings</p>
+ </div>
+ <div class="xsell-grid">
+ ${d.products.map(p => `
+ <a class="xsell-card" href="${esc(p.url)}" target="_blank" rel="noopener noreferrer" title="${esc(p.title)}">
+ <div class="xsell-img-wrap"><img src="${esc(p.image)}" alt="${esc(p.title)}" loading="lazy"></div>
+ <div class="xsell-info">
+ <div class="xsell-product-title">${esc(p.title)}</div>
+ <div class="xsell-vendor">${esc(p.vendor)}</div>
+ <div class="xsell-price">${p.price ? '$' + Number(p.price).toFixed(2) : ''}</div>
+ </div>
+ </a>`).join('')}
+ </div>
+ <a class="xsell-browse" href="https://www.designerwallcoverings.com" target="_blank" rel="noopener noreferrer">
+ Browse full collection at designerwallcoverings.com →
+ </a>
+</div>`;
+ // Insert after .container (the permit detail area)
+ const container = document.querySelector('.container');
+ if (container) container.parentNode.insertBefore(strip, container.nextSibling);
+ } catch (e) {}
+})();
</script>
</body>
</html>
← 591ba0d feat: copy shopify-catalog.json + add /api/shopify-crosssell
·
back to Permit Radar
·
auto-save: 2026-07-16T07:41:55 (1 files) — data/subscribers. b1dbc23 →