← back to Dw Material Reclassify
dw-card-hover.js
242 lines
/* ============================================================================
DW card label v6 (2026-07-22) — collection / search product grids.
v6 (Steve): cards are now IMAGE-ONLY at rest — the name/SKU label is HIDDEN
until hover. On hover (or focus, or always on touch), a light scrim strip
fades in over the bottom of the IMAGE showing the pattern name + DW SKU.
No layout shift (overlay is absolute over the thumbnail). DW SKU is read
from the Boost product-code node when Boost is configured to emit it;
until then the SKU line is simply omitted (name still shows).
v5: compact always-visible pill UNDER the image (name + vendor).
v4: also hides the on-image quick-add / quick-view hover buttons.
The native Boost text band stays clipped (SEO/a11y in DOM). Works on the
theme markup (.product-list-item*) AND Boost AI markup
(.boost-sd__product-item), re-applying to lazy / infinite-scroll /
re-rendered cards via a MutationObserver.
Source asset: assets/dw-card-hover.js (loaded by layout/theme.liquid).
Backups: assets/dw-card-hover.js.v5-bak , assets/dw-card-hover.js.v1-bak
========================================================================== */
(function () {
if (window.__dwCardHover) return;
window.__dwCardHover = true;
var CARD = '.product-list-item, .boost-sd__product-item';
var TITLE = '.product-list-item-title, .boost-sd__product-title';
// DW SKU node — Boost emits a product-code/sku node here once configured to
// show SKU on the card. Multiple candidate selectors so it lights up whatever
// Boost uses without another edit.
var SKU = '.boost-sd__product-sku, [class*="boost-sd__product-sku"], ' +
'[class*="product-code"], .product-list-item-sku, [data-sku]';
var THUMB = '.product-list-item-thumbnail, .boost-sd__product-image-wrapper, [class*="boost-sd__product-image"]:not(img)';
var STYLE_ID = 'dw-card-hover-style';
if (!document.getElementById(STYLE_ID)) {
var st = document.createElement('style');
st.id = STYLE_ID;
st.textContent = [
/* image wrapper = positioning context for the absolute overlay */
'.product-list-item .product-list-item-thumbnail,',
'.boost-sd__product-item .boost-sd__product-image-wrapper,',
'.boost-sd__product-item [class*="boost-sd__product-image"]:not(img){position:relative;}',
/* collapse the native text band (name/vendor/price) to zero — kept in DOM
for SEO/a11y. Cards are image-only at rest. */
'.product-list-item .product-list-item-details,',
'.boost-sd__product-item .boost-sd__product-info,',
'.boost-sd__product-item .boost-sd__product-title,',
'.boost-sd__product-item .boost-sd__product-vendor,',
'.boost-sd__product-item [class*="boost-sd__product-price"],',
'.boost-sd__product-item [class*="boost-sd__format-price"]{',
'position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;',
'overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}',
/* hide the on-image quick-add / quick-view hover buttons */
'.boost-sd__product-item .boost-sd__button--show-on-hover,',
'.boost-sd__product-item [class*="boost-sd__btn-quick"],',
'.boost-sd__product-item [class*="boost-sd__product-action"]{display:none!important;}',
/* === DW reveal v6: absolute scrim strip over the bottom of the image.
Hidden at rest (image-only); fades in on card hover / keyboard focus. === */
'.dw-hover-overlay{position:absolute;left:0;right:0;bottom:0;z-index:3;',
'box-sizing:border-box;padding:14px 10px 9px;pointer-events:none;',
'opacity:0;transition:opacity .16s ease;',
'background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,0) 100%);',
'text-align:center;',
'font-family:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}',
/* reveal triggers */
'.product-list-item:hover .dw-hover-overlay,',
'.product-list-item:focus-within .dw-hover-overlay,',
'.boost-sd__product-item:hover .dw-hover-overlay,',
'.boost-sd__product-item:focus-within .dw-hover-overlay{opacity:1;}',
/* the pattern name */
'.dw-hover-overlay .pat{display:block;max-width:100%;',
'font-size:clamp(11px,0.82vw,13px);font-weight:600;line-height:1.2;',
'color:#fff;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.5);',
'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}',
/* the DW SKU */
'.dw-hover-overlay .sku{display:block;font-size:9px;letter-spacing:.12em;',
'text-transform:uppercase;color:#e8e2d8;margin-top:2px;line-height:1.2;',
'text-shadow:0 1px 2px rgba(0,0,0,.5);}',
/* touch / no-hover devices: no hover exists, so show the label always so
name + SKU stay reachable on phones. */
'@media (hover:none){.dw-hover-overlay{opacity:1;}}',
'@media (prefers-reduced-motion:reduce){.dw-hover-overlay{transition:none;}}'
].join('');
document.head.appendChild(st);
}
function esc(s) {
return s.replace(/[&<>"']/g, function (c) {
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
});
}
var STOP = { and:1, or:1, of:1, on:1, in:1, the:1, a:1, an:1, to:1, with:1 };
function titleCase(s) {
var i = 0;
return s.replace(/\w[\w']*/g, function (w) {
i++;
var lower = w.toLowerCase();
if (i > 1 && STOP[lower]) return lower;
return w.charAt(0).toUpperCase() + w.slice(1);
});
}
function patternName(title) {
var t = title;
if (t.indexOf('|') !== -1) t = t.split('|')[0];
else {
var by = t.split(/\s+by\s+/i);
if (by.length > 1) t = by[0];
}
t = t.replace(/\s*wallcoverings?\b/ig, '').replace(/[,\s]+$/, '').trim();
return titleCase(t);
}
// Pull a DW SKU from the card if Boost emits one. Accepts a data-sku attr or
// the text of a sku/product-code node. Returns '' when absent.
function skuOf(card) {
var el = card.querySelector(SKU);
if (!el) return '';
var s = (el.getAttribute && el.getAttribute('data-sku')) || el.textContent || '';
s = s.replace(/\s*(sku|item|product code)\s*[:#]?\s*/i, '').replace(/\s+/g, ' ').trim();
return s;
}
function labelCard(card) {
if (card.querySelector('.dw-hover-overlay')) return;
var tEl = card.querySelector(TITLE);
if (!tEl) return;
var name = patternName(tEl.textContent || '');
if (!name) return;
var sku = skuOf(card);
var imgWrap = card.querySelector(THUMB);
if (!imgWrap) {
var img = card.querySelector('img');
imgWrap = img ? img.parentElement : null;
}
if (!imgWrap) return;
var ov = document.createElement('div');
ov.className = 'dw-hover-overlay';
ov.innerHTML = '<span class="pat">' + esc(name) + '</span>' +
(sku ? '<span class="sku">' + esc(sku) + '</span>' : '');
/* v6: overlay lives INSIDE the image wrapper (absolute), so at rest the card
is pure image and the reveal never shifts layout. */
imgWrap.appendChild(ov);
}
// Initial full-scan: used only at page-load time (not inside the observer).
function run() {
var cards = document.querySelectorAll(CARD);
for (var i = 0; i < cards.length; i++) labelCard(cards[i]);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
// Selectors for the Boost / theme product-grid container.
// We observe this element only — not document.body — so toolbar, sidebar,
// price-slider, and pagination mutations are invisible to the observer.
var GRID_SEL = '.boost-sd__product-list, [class*="product-list"]:not(.product-list-item)';
// Card-node predicate: true when el IS a product card or CONTAINS product cards.
function nodeHasCards(el) {
if (!el || el.nodeType !== 1) return false;
if (el.matches && el.matches(CARD)) return true;
return !!(el.querySelector && el.querySelector(CARD));
}
// Collect only the card elements that arrived in this mutation batch.
// We operate on the batch directly — no full-document querySelectorAll.
function labelFromMutations(muts) {
for (var m = 0; m < muts.length; m++) {
var added = muts[m].addedNodes;
for (var n = 0; n < added.length; n++) {
var node = added[n];
if (!nodeHasCards(node)) continue;
// node itself is a card
if (node.matches && node.matches(CARD)) {
labelCard(node);
}
// node is a wrapper that contains cards (e.g. Boost appends a <ul> of cards)
if (node.querySelectorAll) {
var nested = node.querySelectorAll(CARD);
for (var c = 0; c < nested.length; c++) labelCard(nested[c]);
}
}
}
}
// Attach observer to the grid container. Fall back to document.body ONLY if
// the grid container is not yet in the DOM (e.g. pure-JS Boost build), in
// which case we watch for the container to appear, then re-attach.
function attachObserver() {
var grid = document.querySelector(GRID_SEL);
if (grid) {
// Scope: grid container only; no subtree needed for card-level childList
// changes, but subtree:true is kept so Boost's nested wrappers are covered.
// The narrow root means non-grid page mutations never reach the callback.
obs.observe(grid, { childList: true, subtree: true });
} else {
// Grid not present yet — watch body at the top level only (no subtree)
// for the grid container itself to be inserted, then re-attach tightly.
var bodyObs = new MutationObserver(function (muts) {
for (var m = 0; m < muts.length; m++) {
var added = muts[m].addedNodes;
for (var n = 0; n < added.length; n++) {
var node = added[n];
if (!node || node.nodeType !== 1) continue;
if ((node.matches && node.matches(GRID_SEL)) ||
(node.querySelector && node.querySelector(GRID_SEL))) {
bodyObs.disconnect();
attachObserver(); // re-attach to the now-present grid
return;
}
}
}
});
bodyObs.observe(document.body, { childList: true, subtree: false });
}
}
var t;
var obs = new MutationObserver(function (muts) {
// Debounce: Boost appends cards in a rapid burst. Collect the whole burst
// before acting, but only label the cards from that specific batch —
// never re-scan the entire document.
// We capture muts in a closure so the debounced call works on the batch.
var pending = muts.slice(); // snapshot the live MutationRecord list
clearTimeout(t);
t = setTimeout(function () { labelFromMutations(pending); }, 80);
});
attachObserver();
})();