← back to Designer Wallcoverings
auto-save: 2026-06-23T15:22:30 (4 files) — probe-collection-defects.js shopify/.gitignore vendor-scrapers/china-seas-refresh verify-collection-hero-fix.js
94a3c718ecefc5a8b8dcfd1c2bfe0e49bb4f2634 · 2026-06-23 15:22:46 -0700 · Steve Abrams
Files touched
D probe-collection-defects.jsM shopify/.gitignoreD verify-collection-hero-fix.js
Diff
commit 94a3c718ecefc5a8b8dcfd1c2bfe0e49bb4f2634
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jun 23 15:22:46 2026 -0700
auto-save: 2026-06-23T15:22:30 (4 files) — probe-collection-defects.js shopify/.gitignore vendor-scrapers/china-seas-refresh verify-collection-hero-fix.js
---
probe-collection-defects.js | 74 -----------------------------------
shopify/.gitignore | 2 +
verify-collection-hero-fix.js | 91 -------------------------------------------
3 files changed, 2 insertions(+), 165 deletions(-)
diff --git a/probe-collection-defects.js b/probe-collection-defects.js
deleted file mode 100644
index 083c1c5e..00000000
--- a/probe-collection-defects.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// Probe live /collections/all to identify the grey-pill hero element + mobile header gap.
-// Read-only: no clicks, no writes. $0 (local).
-const { chromium } = require('playwright');
-
-(async () => {
- const url = 'https://www.designerwallcoverings.com/collections/all';
- const browser = await chromium.launch();
-
- // ---- DESKTOP: find the grey pill behind "Products" ----
- const ctxD = await browser.newContext({ viewport: { width: 1440, height: 900 } });
- const pD = await ctxD.newPage();
- await pD.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
- await pD.waitForTimeout(3500);
-
- const titleInfo = await pD.evaluate(() => {
- const out = [];
- // find any element whose text is exactly the collection title
- const candidates = [...document.querySelectorAll('h1,.page-title,.collection-title,.boost-sd__header-title,[class*="header-title"],[class*="page-title"]')];
- for (const el of candidates) {
- const t = (el.textContent || '').trim();
- if (!t || t.length > 40) continue;
- const cs = getComputedStyle(el);
- const r = el.getBoundingClientRect();
- out.push({
- text: t, tag: el.tagName, cls: el.className,
- bg: cs.backgroundColor, color: cs.color, radius: cs.borderRadius,
- pad: cs.padding, display: cs.display,
- w: Math.round(r.width), h: Math.round(r.height),
- parentCls: el.parentElement ? el.parentElement.className : '',
- parentBg: el.parentElement ? getComputedStyle(el.parentElement).backgroundColor : '',
- });
- }
- // also the collection-header / boost header wrapper
- const wraps = [];
- for (const sel of ['.collection-header', '.boost-sd__collection-header', '.boost-sd__header-main', '.collection-header-content']) {
- const el = document.querySelector(sel);
- if (el) {
- const cs = getComputedStyle(el); const r = el.getBoundingClientRect();
- wraps.push({ sel, bg: cs.backgroundColor, w: Math.round(r.width), h: Math.round(r.height), radius: cs.borderRadius, pad: cs.padding });
- }
- }
- // does a collection.image exist on the page?
- const featured = document.querySelector('.collection-featured-image img, .boost-sd__header-image-inner img');
- return { titles: out, wraps, hasFeaturedImage: !!featured, featuredSrc: featured ? featured.src : null };
- });
- console.log('=== DESKTOP TITLE / HEADER ===');
- console.log(JSON.stringify(titleInfo, null, 2));
- await ctxD.close();
-
- // ---- MOBILE: measure the header gap ----
- const iPhone = { viewport: { width: 390, height: 844 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true,
- userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1' };
- const ctxM = await browser.newContext(iPhone);
- const pM = await ctxM.newPage();
- await pM.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
- await pM.waitForTimeout(3500);
-
- const headerInfo = await pM.evaluate(() => {
- const rect = (sel) => { const el = document.querySelector(sel); if (!el) return null; const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return { sel, top: Math.round(r.top), bottom: Math.round(r.bottom), h: Math.round(r.height), pad: cs.padding, margin: cs.margin, minH: cs.minHeight, display: cs.display }; };
- const sels = ['.header-tools-wrapper','.header-tools','.aligned-right','.mini-cart-wrapper','.cart-count','.header-main-content','.header-branding','.main-header','[data-section-header]'];
- const measured = sels.map(rect).filter(Boolean);
- // gap = top of branding minus bottom of cart-count
- const cart = document.querySelector('.cart-count');
- const brand = document.querySelector('.header-branding-desktop, .header-branding');
- let gap = null;
- if (cart && brand) gap = Math.round(brand.getBoundingClientRect().top - cart.getBoundingClientRect().bottom);
- return { measured, cartToBrandGap: gap, windowH: window.innerHeight };
- });
- console.log('\n=== MOBILE HEADER ===');
- console.log(JSON.stringify(headerInfo, null, 2));
- await ctxM.close();
-
- await browser.close();
-})();
diff --git a/shopify/.gitignore b/shopify/.gitignore
index 00b58c6e..be20e58a 100644
--- a/shopify/.gitignore
+++ b/shopify/.gitignore
@@ -63,3 +63,5 @@ scripts/sheets-service-account.json
**/*service_account*.json
pj-canary/pj-canary.log
pj-canary/pj-canary-status.json
+audit/collection-hero-render-progress.json
+audit/hero-renders/
diff --git a/verify-collection-hero-fix.js b/verify-collection-hero-fix.js
deleted file mode 100644
index fddcddc1..00000000
--- a/verify-collection-hero-fix.js
+++ /dev/null
@@ -1,91 +0,0 @@
-// Verify the staged collection-hero fix by applying the EXACT staged CSS + the
-// snippet's inline <style> output to the real live /collections/all DOM, both
-// viewports, BEFORE/AFTER screenshots. Read-only network; $0 local.
-const { chromium } = require('playwright');
-const fs = require('fs');
-
-const CSS = fs.readFileSync(__dirname + '/shopify/collection-hero-fix/dw-collection-hero.css', 'utf8');
-const URL = 'https://www.designerwallcoverings.com/collections/all';
-const SHOTS = '/tmp/dwshots';
-
-// Simulate the snippet output for the NO-IMAGE case (collection.image blank,
-// settings.collection_default_hero blank): the snippet emits only the wrapper
-// flag, no --dw-hero-img -> soft band + clean dark type. We also test the
-// IMAGE-PRESENT case by injecting a sample hero url.
-const SNIPPET_NOIMG = `
- .boost-sd__collection-header,.template-collection .collection-header{--dw-hero-applied:1;}
-`;
-const SAMPLE_IMG = 'https://www.designerwallcoverings.com/cdn/shop/files/marble.jpg';
-const SNIPPET_IMG = `
- body.dw-collection-has-hero .boost-sd__collection-header{
- background-image:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.34)),url("${SAMPLE_IMG}") !important;
- background-size:cover !important;background-position:center !important;min-height:240px;
- display:flex;align-items:center;justify-content:center;text-align:center;}
- body.dw-collection-has-hero .boost-sd__collection-header .boost-sd__header-title{color:#fff !important;background:rgba(0,0,0,.42) !important;border-radius:4px !important;padding:12px 28px !important;display:inline-block !important;}
-`;
-
-async function probeTitle(page) {
- return page.evaluate(() => {
- const pick = (sel) => { const el = document.querySelector(sel); if (!el) return null; const cs = getComputedStyle(el); const r = el.getBoundingClientRect(); return { sel, bg: cs.backgroundColor, color: cs.color, radius: cs.borderRadius, w: Math.round(r.width), h: Math.round(r.height), visible: cs.display !== 'none' && r.height > 0 }; };
- return {
- boostTitle: pick('.boost-sd__header-title'),
- themeTitle: pick('.page-title'),
- boostHeader: pick('.boost-sd__collection-header'),
- };
- });
-}
-
-(async () => {
- const browser = await chromium.launch();
-
- for (const [name, vp, mobile] of [
- ['desktop', { width: 1440, height: 900 }, false],
- ['mobile', { width: 390, height: 844 }, true],
- ]) {
- const ctx = await browser.newContext({ viewport: vp, isMobile: mobile, deviceScaleFactor: mobile ? 3 : 1,
- userAgent: mobile ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1' : undefined });
- const page = await ctx.newPage();
- await page.goto(URL, { waitUntil: 'domcontentloaded', timeout: 60000 });
- await page.waitForTimeout(3500);
-
- // BEFORE
- await page.screenshot({ path: `${SHOTS}/dev-${name}-BEFORE.png`, fullPage: false });
- const before = await probeTitle(page);
-
- // APPLY staged CSS + snippet (no-image case = the real /collections/all state)
- await page.addStyleTag({ content: CSS });
- await page.addStyleTag({ content: SNIPPET_NOIMG });
- // tag wrapper class the snippet/JS would add for has-image detection (none here)
- await page.waitForTimeout(400);
- await page.screenshot({ path: `${SHOTS}/dev-${name}-AFTER-noimage.png`, fullPage: false });
- const afterNoImg = await probeTitle(page);
-
- // Now simulate IMAGE-PRESENT case (snippet sets body.dw-collection-has-hero)
- await page.addStyleTag({ content: SNIPPET_IMG });
- await page.evaluate(() => { document.body.classList.add('dw-collection-has-hero'); document.documentElement.classList.add('dw-coll-hero'); });
- await page.waitForTimeout(400);
- await page.screenshot({ path: `${SHOTS}/dev-${name}-AFTER-withimage.png`, fullPage: false });
- const afterImg = await probeTitle(page);
-
- console.log(`\n=== ${name.toUpperCase()} ===`);
- console.log('BEFORE boostTitle bg:', before.boostTitle && before.boostTitle.bg, '| themeTitle visible:', before.themeTitle && before.themeTitle.visible);
- console.log('AFTER-noimg boostTitle bg:', afterNoImg.boostTitle && afterNoImg.boostTitle.bg, 'color:', afterNoImg.boostTitle && afterNoImg.boostTitle.color, '| themeTitle visible:', afterNoImg.themeTitle && afterNoImg.themeTitle.visible);
- console.log('AFTER-img boostTitle bg:', afterImg.boostTitle && afterImg.boostTitle.bg, 'color:', afterImg.boostTitle && afterImg.boostTitle.color, '| header bg-image applied:', afterImg.boostHeader && afterImg.boostHeader.bg);
-
- if (mobile) {
- const gap = await page.evaluate(() => {
- const cart = document.querySelector('.cart-count');
- const brand = document.querySelector('.header-branding-desktop, .header-branding');
- const g = (cart && brand) ? Math.round(brand.getBoundingClientRect().top - cart.getBoundingClientRect().bottom) : null;
- const bH = brand ? Math.round(brand.getBoundingClientRect().height) : null;
- const mh = document.querySelector('.main-header');
- return { cartToBrandGap: g, brandingHeight: bH, headerHeight: mh ? Math.round(mh.getBoundingClientRect().height) : null };
- });
- console.log('MOBILE F3 after-fix:', JSON.stringify(gap), '(BEFORE was gap~11, brandingH 118, headerH 160)');
- }
-
- await ctx.close();
- }
- await browser.close();
- console.log('\nScreenshots in', SHOTS);
-})();
← 957660c8 Tres Tintas rooms regenerated at corrected repeat-driven sca
·
back to Designer Wallcoverings
·
Designtex Step 1: canonical dw_unified fill-in loaded (2701 b357a962 →