← back to Gmc Viewer
gmc-viewer: local read-only viewer of live Google Merchant catalog (grid, status/price filters, search)
7e32dc755bb67fd41f3f4d66e975742b544a998e · 2026-07-09 08:17:08 -0700 · steve
Files touched
A .gitignoreA public/index.htmlA server.js
Diff
commit 7e32dc755bb67fd41f3f4d66e975742b544a998e
Author: steve <steve@designerwallcoverings.com>
Date: Thu Jul 9 08:17:08 2026 -0700
gmc-viewer: local read-only viewer of live Google Merchant catalog (grid, status/price filters, search)
---
.gitignore | 6 ++++
public/index.html | 76 +++++++++++++++++++++++++++++++++++++++++++
server.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 179 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f3605cc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+.env*
+data/catalog.json
+*.log
+_auth.js
+.DS_Store
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..6deb1c6
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,76 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Google Merchant — DW Catalog</title>
+<style>
+:root{--cols:6}
+*{box-sizing:border-box}
+body{margin:0;font:14px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f1115;color:#e7e9ee}
+header{position:sticky;top:0;z-index:5;background:#161922;border-bottom:1px solid #262b38;padding:12px 16px}
+h1{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:.02em}
+.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.chip{background:#20252f;border:1px solid #2c3342;color:#cfd4de;border-radius:20px;padding:5px 12px;cursor:pointer;font-size:13px}
+.chip.on{background:#2f6df6;border-color:#2f6df6;color:#fff}
+.chip b{color:#fff;font-weight:700;margin-left:5px}
+input[type=search]{background:#0f1115;border:1px solid #2c3342;color:#e7e9ee;border-radius:8px;padding:6px 10px;min-width:200px}
+input[type=range]{vertical-align:middle}
+.muted{color:#8b93a3;font-size:12px}
+.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;padding:14px 16px}
+.card{background:#161922;border:1px solid #232838;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
+.card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b0d12}
+.card .b{padding:7px 8px}
+.t{font-size:12px;line-height:1.3;max-height:2.6em;overflow:hidden;color:#dfe3ea}
+.v{color:#8b93a3;font-size:11px;margin-top:2px}
+.price{font-weight:700;font-size:13px}
+.price.s{color:#e0a93b}.price.r{color:#5fd08a}
+.st{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-top:4px}
+.st.active{background:#183a29;color:#5fd08a}.st.disapproved{background:#3a1a1a;color:#f08a8a}.st.pending{background:#3a331a;color:#e0c93b}.st.unknown{background:#232838;color:#8b93a3}
+.load{grid-column:1/-1;text-align:center;padding:20px;color:#8b93a3}
+</style></head><body>
+<header>
+<h1>🛍️ Google Merchant — DW live catalog <span id="gen" class="muted"></span></h1>
+<div class="bar">
+ <span class="chip" data-f="all" id="c-all">All<b>–</b></span>
+ <span class="chip" data-f="approved" id="c-approved">✅ Approved<b>–</b></span>
+ <span class="chip" data-f="disapproved" id="c-disapproved">⛔ Disapproved<b>–</b></span>
+ <span class="chip" data-f="pending" id="c-pending">⏳ Pending<b>–</b></span>
+ <span class="chip" data-f="real" id="c-real">💲 Real price<b>–</b></span>
+ <span class="chip" data-f="at425" id="c-at425">$4.25 sample<b>–</b></span>
+ <input type="search" id="q" placeholder="search title / vendor…">
+ <span class="muted">density</span><input type="range" id="dens" min="3" max="10" value="6">
+ <span class="chip" id="refresh">↻ Refresh</span>
+ <span class="muted" id="showing"></span>
+</div>
+</header>
+<div class="grid" id="grid"><div class="load">loading…</div></div>
+<script>
+const $=s=>document.querySelector(s); let filter='all',q='';
+const dens=$('#dens'); dens.oninput=()=>document.documentElement.style.setProperty('--cols',dens.value);
+document.documentElement.style.setProperty('--cols',6);
+async function summary(){
+ const r=await fetch('/api/summary').then(r=>r.json());
+ const s=r.summary||{};
+ $('#gen').textContent = r.generated_at? '· '+new Date(r.generated_at).toLocaleString()+(r.refreshing?' · refreshing…':'') : (r.refreshing?'· building…':'');
+ const set=(id,n)=>{const e=$(id); if(e)e.querySelector('b').textContent=(n??0).toLocaleString();};
+ set('#c-all',s.total);set('#c-approved',s.approved);set('#c-disapproved',s.disapproved);set('#c-pending',s.pending);set('#c-real',s.real_price);set('#c-at425',s.at_425);
+ if(r.refreshing) setTimeout(summary,4000);
+}
+async function load(){
+ $('#grid').innerHTML='<div class="load">loading…</div>';
+ const r=await fetch('/api/products?filter='+filter+'&q='+encodeURIComponent(q)+'&limit=800').then(r=>r.json());
+ $('#showing').textContent=r.count.toLocaleString()+' match'+(r.count===1?'':'es')+(r.count>800?' (showing 800)':'');
+ if(!r.items.length){$('#grid').innerHTML='<div class="load">no products</div>';return;}
+ $('#grid').innerHTML=r.items.map(i=>{
+ const s=Math.abs(i.price-4.25)<0.01?'s':'r';
+ const st=i.status||'unknown';
+ return `<div class="card">${i.image?`<img loading="lazy" src="${i.image}">`:'<div style="aspect-ratio:1/1;background:#0b0d12"></div>'}
+ <div class="b"><div class="t" title="${(i.title||'').replace(/"/g,'"')}">${i.title||'(untitled)'}</div>
+ <div class="v">${i.brand||''} ${i.country?'· '+i.country:''}</div>
+ <div class="price ${s}">$${(i.price||0).toFixed(2)}</div>
+ <span class="st ${st}">${st}${i.issues&&i.issues.length?' · '+i.issues[0]:''}</span></div></div>`;
+ }).join('');
+}
+document.querySelectorAll('.chip[data-f]').forEach(c=>c.onclick=()=>{document.querySelectorAll('.chip[data-f]').forEach(x=>x.classList.remove('on'));c.classList.add('on');filter=c.dataset.f;load();});
+$('#c-all').classList.add('on');
+let qt; $('#q').oninput=e=>{clearTimeout(qt);q=e.target.value;qt=setTimeout(load,250);};
+$('#refresh').onclick=async()=>{await fetch('/api/refresh');summary();};
+summary();load();
+</script></body></html>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..44f56d3
--- /dev/null
+++ b/server.js
@@ -0,0 +1,97 @@
+// gmc-viewer — local web viewer of the LIVE Google Merchant Center catalog for DW
+// (merchant 146735262). Pulls products (title/price/image/link) + productstatuses
+// (approval status) via the Content API, caches to data/, serves a filterable grid.
+// READ-ONLY: never writes to Merchant Center. Basic auth admin/DW2024!. $0.
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { token, MERCHANT } = require('./_auth.js');
+
+const PORT = process.env.PORT || 9971;
+const DATA = path.join(__dirname, 'data', 'catalog.json');
+const AUTH = 'Basic ' + Buffer.from('admin:DW2024!').toString('base64');
+let CATALOG = { generated_at: null, items: [], summary: {} };
+let refreshing = false;
+
+if (fs.existsSync(DATA)) { try { CATALOG = JSON.parse(fs.readFileSync(DATA, 'utf8')); console.log(`loaded ${CATALOG.items.length} cached offers`); } catch (e) {} }
+
+async function pull() {
+ if (refreshing) return; refreshing = true;
+ console.log('refreshing from Content API...');
+ try {
+ const tok = await token(); const H = { Authorization: 'Bearer ' + tok };
+ // 1) products (title/price/image/link/brand)
+ const byId = new Map(); let page = null, n = 0;
+ do {
+ const r = await (await fetch(`https://shoppingcontent.googleapis.com/content/v2.1/${MERCHANT}/products?maxResults=250` + (page ? `&pageToken=${page}` : ''), { headers: H })).json();
+ if (r.error) { console.error('products err', JSON.stringify(r.error).slice(0, 150)); break; }
+ for (const p of (r.resources || [])) {
+ n++;
+ byId.set(p.id, { id: p.id, offerId: p.offerId, title: p.title || '', brand: p.brand || '', price: parseFloat(p.price?.value || '0'), image: p.imageLink || '', link: p.link || '', country: (p.id || '').split(':')[2] || '', status: 'unknown', issues: [] });
+ }
+ page = r.nextPageToken;
+ if (n % 5000 === 0) console.log(` ${n} products`);
+ } while (page);
+ // 2) statuses
+ page = null; let sn = 0;
+ do {
+ const r = await (await fetch(`https://shoppingcontent.googleapis.com/content/v2.1/${MERCHANT}/productstatuses?maxResults=250` + (page ? `&pageToken=${page}` : ''), { headers: H })).json();
+ if (r.error) { console.error('statuses err', JSON.stringify(r.error).slice(0, 150)); break; }
+ for (const p of (r.resources || [])) {
+ const it = byId.get(p.productId); if (!it) continue;
+ const ds = (p.destinationStatuses || []); it.status = (ds.find(d => /Shopping/i.test(d.destination)) || ds[0] || {}).status || 'unknown';
+ it.issues = [...new Set((p.itemLevelIssues || []).filter(i => i.servability === 'disapproved').map(i => i.code))].slice(0, 4);
+ sn++;
+ }
+ page = r.nextPageToken;
+ } while (page);
+ const items = [...byId.values()];
+ const summary = {
+ total: items.length,
+ approved: items.filter(i => i.status === 'active').length,
+ disapproved: items.filter(i => i.status === 'disapproved').length,
+ pending: items.filter(i => i.status === 'pending').length,
+ at_425: items.filter(i => Math.abs(i.price - 4.25) < 0.01).length,
+ real_price: items.filter(i => i.price > 4.26).length,
+ by_country: items.reduce((a, i) => (a[i.country] = (a[i.country] || 0) + 1, a), {}),
+ };
+ CATALOG = { generated_at: new Date().toISOString(), items, summary };
+ fs.writeFileSync(DATA, JSON.stringify(CATALOG));
+ console.log(`refreshed: ${items.length} offers, ${summary.approved} approved, ${summary.disapproved} disapproved`);
+ } catch (e) { console.error('pull failed', e.message); }
+ refreshing = false;
+}
+
+const send = (res, code, body, type = 'application/json') => { res.writeHead(code, { 'Content-Type': type }); res.end(body); };
+
+const server = http.createServer((req, res) => {
+ if (req.headers.authorization !== AUTH) { res.writeHead(401, { 'WWW-Authenticate': 'Basic realm="gmc"' }); return res.end('auth'); }
+ const u = new URL(req.url, 'http://x');
+ if (u.pathname === '/api/summary') return send(res, 200, JSON.stringify({ generated_at: CATALOG.generated_at, summary: CATALOG.summary, refreshing }));
+ if (u.pathname === '/api/refresh') { pull(); return send(res, 200, JSON.stringify({ started: true })); }
+ if (u.pathname === '/api/products') {
+ const f = u.searchParams.get('filter') || 'all';
+ const q = (u.searchParams.get('q') || '').toLowerCase();
+ const limit = Math.min(2000, parseInt(u.searchParams.get('limit') || '500', 10));
+ let items = CATALOG.items;
+ if (f === 'approved') items = items.filter(i => i.status === 'active');
+ else if (f === 'disapproved') items = items.filter(i => i.status === 'disapproved');
+ else if (f === 'pending') items = items.filter(i => i.status === 'pending');
+ else if (f === 'at425') items = items.filter(i => Math.abs(i.price - 4.25) < 0.01);
+ else if (f === 'real') items = items.filter(i => i.price > 4.26);
+ if (q) items = items.filter(i => i.title.toLowerCase().includes(q) || i.brand.toLowerCase().includes(q));
+ return send(res, 200, JSON.stringify({ count: items.length, items: items.slice(0, limit) }));
+ }
+ const file = u.pathname === '/' ? '/index.html' : u.pathname;
+ const fp = path.join(__dirname, 'public', file);
+ if (fp.startsWith(path.join(__dirname, 'public')) && fs.existsSync(fp)) {
+ const t = file.endsWith('.html') ? 'text/html' : 'text/plain';
+ return send(res, 200, fs.readFileSync(fp), t);
+ }
+ send(res, 404, 'not found', 'text/plain');
+});
+
+server.listen(PORT, () => {
+ console.log(`gmc-viewer on http://127.0.0.1:${PORT} (admin/DW2024!)`);
+ if (!CATALOG.items.length) pull();
+});
(oldest)
·
back to Gmc Viewer
·
fix: MC status value is 'approved' not 'active' (approved co 3da85f7 →