/** * ----------------------------------------------------------------------------- * Dynamic Product Data Bridge (Best-Effort Workaround) * ----------------------------------------------------------------------------- * * Context / Why this exists * ------------------------- * iPaper modals and enrichments are snapshot-based: * - A PDF + data source is processed at publish time * - The resulting modal content is static until the catalog is reprocessed * * Paul Stricker require live values (e.g. stock levels, next arrivals, * CO2 / H2O sustainability metrics) that change frequently and cannot be * reprocessed continuously. * * This script provides a best-effort workaround by dynamically "hydrating" * specific fields at runtime, without changing iPaper’s core behavior. * * How it works (high-level) * ------------------------ * 1) A lightweight XML feed is hosted externally containing ONLY dynamic fields * (stock, next arrival, CO2, H2O), keyed by product ID. * * 2) When a product modal is opened: * - The script detects the product ID by scanning links on the page * (e.g. "View on website" buttons), or falls back to the page/canonical URL. * - The ID is expected to be the final numeric segment of the URL (…/12345/). * * 3) The XML feed is prefetched once and reused. * * 4) If a matching product ID is found in the feed: * - Stock and date values are injected into predefined DOM placeholders. * - CO2 / H2O values are shown or hidden dynamically if non-zero. * * 5) If no matching product or data is found: * - Placeholders remain empty ("—") * - A descriptive message is logged to the browser console. * * What this is NOT * ---------------- * - This is NOT an official iPaper feature or supported integration. * - This does NOT modify PDF processing, enrichments, or backend data. * - This does NOT guarantee data availability or uptime. * * Known limitations / failure modes * --------------------------------- * - Requires the external feed to be reachable (CORS/network dependent). * - Requires product URLs and feed IDs to remain in sync. * - May need adjustment if site markup, modal structure, or URLs change. * - SPA navigation and DOM updates are handled on a best-effort basis. * * Ownership & support scope * ------------------------- * This script is intentionally isolated and self-contained. * Troubleshooting typically involves: * - Checking the browser console for diagnostic messages * - Verifying the feed URL is reachable and contains the product ID * - Confirming the modal/table DOM structure still matches expectations * * This logic lives outside standard iPaper support and is maintained * as a custom client-side enhancement. * * ----------------------------------------------------------------------------- * * Debug UI mode (optional) * ------------------------ * If the page URL contains ?debug (or &debug), the most important log messages * will ALSO be shown in an on-page toast. This helps non-technical users capture * diagnostics without opening DevTools. * * Example: * https://www.stricker-europe.com/pt/.../97165/?debug * * Toast colors: * INFO = blue (normal status messages) * WARN = yellow (missing ID, missing product in feed, missing placeholders) * ERROR = red (CORS/network, HTTP errors, invalid XML) * * Typical scenarios: * - No product ID found -> DOM/URL structure changed or not on product context * - NOT found in feed -> feed missing product ID or ID scheme mismatch * - Failed to fetch -> CORS / network / adblock / VPN / endpoint down * - XML parse error -> server returned HTML error page instead of XML * - No placeholders -> modal/template IDs changed (e.g. id="100") */ // ---------------------------------------------------- // Debug mode flag (adds toast mirroring of logs) // ---------------------------------------------------- const DEBUG_MODE = new URLSearchParams(window.location.search).has('debug'); // ---------------------------------------------------- // Debug toast (only shown when ?debug is present) // ---------------------------------------------------- let debugToast = null; let debugToastBody = null; function ensureDebugToast() { if (!DEBUG_MODE) return; if (debugToast) return; debugToast = document.createElement('div'); debugToast.style.cssText = ` position: fixed; bottom: 25px; right: 14px; width: min(520px, calc(100vw - 28px)); max-height: min(55vh, 420px); overflow: hidden; z-index: 2147483647; border-radius: 12px; background: rgba(13, 15, 20, 0.92); color: rgba(255,255,255,0.92); box-shadow: 0 18px 60px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; backdrop-filter: blur(8px); `; const header = document.createElement('div'); header.style.cssText = ` display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.10); `; // ✅ Updated: status line + indicator dot header.innerHTML = `

Debug mode (logs mirrored)

Waiting for product…

`; debugToastBody = document.createElement('div'); debugToastBody.style.cssText = ` padding: 10px 12px; overflow: auto; max-height: min(55vh, 370px); white-space: pre-wrap; word-break: break-word; `; debugToast.appendChild(header); debugToast.appendChild(debugToastBody); document.body.appendChild(debugToast); debugToast.addEventListener('click', async (e) => { const btn = e.target?.closest('button[data-action]'); if (!btn) return; const action = btn.getAttribute('data-action'); if (action === 'close') { debugToast.remove(); debugToast = null; debugToastBody = null; return; } if (action === 'clear' && debugToastBody) { debugToastBody.innerHTML = ''; return; } if (action === 'copy' && debugToastBody) { const text = debugToastBody.innerText || ''; try { await navigator.clipboard.writeText(text); appendToastLine('info', 'Copied debug logs to clipboard ✅'); } catch { appendToastLine('warn', 'Could not copy automatically. Select text manually.'); } } }); appendToastLine('info', 'Debug toast enabled via ?debug'); } function appendToastLine(type, message) { if (!DEBUG_MODE) return; ensureDebugToast(); if (!debugToastBody) return; const line = document.createElement('div'); line.style.cssText = ` margin: 0 0 6px 0; padding: 12px 8px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); `; const color = type === 'error' ? '#ff6b6b' : type === 'warn' ? '#ffd166' : '#74c0fc'; const label = type === 'error' ? 'ERROR' : type === 'warn' ? 'WARN' : 'INFO'; const ts = new Date().toLocaleTimeString(); line.innerHTML = `${label} ${ts}\n${String(message)}`; debugToastBody.appendChild(line); // Scroll AFTER layout so the last line is fully visible (prevents half-cut lines) requestAnimationFrame(() => { debugToastBody.scrollTop = debugToastBody.scrollHeight + 9999; }); } // ✅ NEW: status helpers + snapshot (for non-tech clarity) function setDebugStatus(level, text) { if (!DEBUG_MODE) return; ensureDebugToast(); const statusEl = document.getElementById('dbg-status'); const dotEl = document.getElementById('dbg-dot'); if (!statusEl || !dotEl) return; const colors = { info: '#74c0fc', warn: '#ffd166', error: '#ff6b6b', ok: '#69db7c' }; dotEl.style.background = colors[level] || colors.info; statusEl.textContent = text; } function prettyTime(msAgo) { if (!msAgo || msAgo < 0) return 'never'; const s = Math.floor(msAgo / 1000); if (s < 60) return `${s}s ago`; const m = Math.floor(s / 60); return `${m}m ago`; } function toastDiagnosticsSnapshot(snapshot) { const lines = [ 'Diagnostics snapshot:', `• Product: ${snapshot.productId || '—'} (${snapshot.source || '—'})`, `• URL seen: ${snapshot.href || '—'}`, `• Feed prefetched: ${snapshot.feedPrefetched ? 'yes ✅' : 'no ⏳'}`, `• Last fetch attempt: ${prettyTime(Date.now() - (snapshot.lastFetchAttempt || 0))}`, `• Last fetch error: ${snapshot.lastFetchErrorAt ? prettyTime(Date.now() - snapshot.lastFetchErrorAt) + ' ⚠️' : 'none ✅'}`, `• DOM placeholders touched: ${Number.isFinite(snapshot.domHits) ? snapshot.domHits : '—'}` ].join('\n'); appendToastLine('info', lines); } // ---------------------------------------------------- // Script start // ---------------------------------------------------- console.log('Initial Script Loaded v6 ✅ (status line + diagnostics snapshot)'); let currentItemId = null; let prefetchedData = null; window.prefetchedData = null; const idsToLog = [ 100,101,102,103,104,105,106,107,108,109, 110,111,112,113,114,115,116,117,118,119, 121,122,123,124,127,128,129,131,132,133, 134,137,138,139,141,142,143,144,146,147, 148,149,150,152,153,154,157,158,159,160, 163,164,167,168,169,170,173,174,178,183, 184,188,189,194,195,196,198,208,300,301, 302,303,304,305,307,308,309,310,311,312, 315,316,320,323,324,327,328,330,332,333, 334,340,341,342,344,345,346,347,348,350, 351,352,353,354,355,356,357,358,360,361, 362,363,364,365,366,367,368,369,370,371, 372,373 ]; window.idsToLog = idsToLog; // ---------------------------------------------------- // Feed + throttling guards (prevents infinite fetch spam) // ---------------------------------------------------- const FEED_URL = 'https://ipaper.stricker.pt/?key=Ixc7jbz53K'; let isFetching = false; let lastFetchAttempt = 0; let lastFetchErrorAt = 0; const FETCH_MIN_INTERVAL_MS = 15000; // minimum time between attempts const FETCH_BACKOFF_MS = 60000; // wait this long after an error before retrying // ---------------------------------------------------- // Debug logger (support-deflection friendly) // ---------------------------------------------------- function safeToText(x) { if (typeof x === 'string') return x; try { return JSON.stringify(x); } catch { return String(x); } } const DBG = { prefix: '[Stricker XML Bridge]', onceFlags: new Set(), once(key, fn) { if (this.onceFlags.has(key)) return; this.onceFlags.add(key); fn(); }, info(...args){ console.log(this.prefix, ...args); if (DEBUG_MODE) appendToastLine('info', args.map(safeToText).join(' ')); }, warn(...args){ console.warn(this.prefix, ...args); if (DEBUG_MODE) appendToastLine('warn', args.map(safeToText).join(' ')); }, error(...args){ console.error(this.prefix, ...args); if (DEBUG_MODE) appendToastLine('error', args.map(safeToText).join(' ')); }, }; DBG.once('disclaimer', () => { DBG.info( 'Note: This script is a best-effort workaround.', 'If the site structure, modal markup, or feed changes, adjustments may be required.' ); }); if (DEBUG_MODE) { ensureDebugToast(); setDebugStatus('info', 'Debug ready. Waiting for product…'); DBG.info('Debug mode active: console logs are mirrored to an on-page toast.'); } // ---------------------------------------------------- // Helpers // ---------------------------------------------------- const _throttleMap = new Map(); function logThrottled(key, ms, fn) { const now = Date.now(); const last = _throttleMap.get(key) || 0; if (now - last < ms) return; _throttleMap.set(key, now); fn(); } function isInvalidProductHref(href) { if (!href) return true; const h = href.trim().toLowerCase(); return h === '#' || h === '#n/a' || h === 'n/a'; } function extractNumericValue(v) { if (v == null) return null; const str = String(v).replace(',', '.').match(/-?\d+(\.\d+)?/); return str ? Number(str[0]) : null; } function isZeroOrEmpty(v) { const num = extractNumericValue(v); return num === null || !Number.isFinite(num) || num === 0; } function summarizeCorsGuidance(url) { return [ 'Possible causes:', '• CORS blocked by the browser (no Access-Control-Allow-Origin header)', '• Network/AdBlock/VPN blocking the request', '• Endpoint unavailable or key expired', '', 'What you can do:', '1) Open DevTools → Network → find the request to the feed and check status/headers.', '2) Try opening the feed URL in a new tab to confirm it loads.', '3) If CORS is the issue, the only reliable fix is a server-side proxy on the same domain as the website.', `Feed URL: ${url}` ].join('\n'); } function parseXmlOrThrow(text) { const xml = new DOMParser().parseFromString(text, 'text/xml'); const parserError = xml.querySelector('parsererror'); if (parserError) { throw new Error('XML parse error: response is not valid XML (often due to HTML error page or blocked request).'); } return xml; } // ---------------------------------------------------- // UNIVERSAL PRODUCT ID EXTRACTOR (language-agnostic) // ---------------------------------------------------- function extractIDWithSource() { const links = document.querySelectorAll('a[href*="stricker-europe.com"], a.o-button[href]'); for (const link of links) { const href = link.getAttribute('href'); if (!href) continue; // Explicitly catch invalid placeholder links like "#N/A" if (isInvalidProductHref(href)) { logThrottled('invalidHref#NA', 10000, () => { DBG.warn( 'Product link detected, but it points to a placeholder href:', `"${href}".`, 'Live data cannot be resolved without a valid product URL.' ); }); continue; } try { const url = new URL(href, window.location.origin); const parts = url.pathname.split('/').filter(Boolean); const last = parts[parts.length - 1]; if (/^\d+$/.test(last)) { return { id: last, source: 'DOM link', href: url.href }; } } catch (_) { // Ignore malformed URLs } } // Fallback: canonical or current URL const canonical = document.querySelector('link[rel="canonical"]')?.href; const fallback = canonical || window.location.href; try { const url = new URL(fallback); const parts = url.pathname.split('/').filter(Boolean); const last = parts[parts.length - 1]; return /^\d+$/.test(last) ? { id: last, source: canonical ? 'canonical' : 'page URL', href: url.href } : { id: null, source: 'none', href: fallback }; } catch (_) { return { id: null, source: 'none', href: fallback }; } } function extractID() { return extractIDWithSource().id; } // ---------------------------------------------------- // Process XML // ---------------------------------------------------- function processData(data) { const namespaceURI = "http://base.google.com/ns/1.0"; const { id: extractedId, source, href } = extractIDWithSource(); if (!extractedId) { DBG.warn('No product ID found. The script needs a product URL that ends with /12345/.', 'Seen URL:', href); setDebugStatus('warn', 'No product ID found ⚠️ (needs a product URL ending in /12345/).'); return; } if (currentItemId === extractedId) return; currentItemId = extractedId; DBG.info(`Product detected: ${extractedId} (source: ${source})`); setDebugStatus('info', `Product detected: ${extractedId} (via ${source}). Loading data…`); const entries = data.getElementsByTagNameNS(namespaceURI, 'id'); let stockData = {}; let dateData = {}; let co2Data = {}; let h2oData = {}; let foundInFeed = false; for (let entry of entries) { if (entry.textContent.trim() !== extractedId) continue; foundInFeed = true; const relevantEntry = entry.parentNode; idsToLog.forEach(id => { const stock = relevantEntry.getElementsByTagNameNS(namespaceURI, `stock${id}`)[0]; const date = relevantEntry.getElementsByTagNameNS(namespaceURI, `nextEntry${id}`)[0]; const co2 = relevantEntry.getElementsByTagNameNS(namespaceURI, `CO2${id}`)[0]; const h2o = relevantEntry.getElementsByTagNameNS(namespaceURI, `H2O${id}`)[0]; // merge (later entries overwrite earlier ones if duplicates exist) if (stock) stockData[id] = stock.textContent; if (date) dateData[id] = date.textContent; if (co2) co2Data[id] = co2.textContent; if (h2o) h2oData[id] = h2o.textContent; }); // IMPORTANT: no break — we want to merge all entries for that product id } if (!foundInFeed) { DBG.warn( `Product ID ${extractedId} was NOT found in the XML feed.`, '\nWhat this means:', '\n• The product may not exist in the feed, or the feed uses a different ID format, or the product is not published.', '\nWhat to check:', '\n1) Confirm the product ID in the URL is correct.', '\n2) Confirm the feed contains ' + extractedId + '.', '\n3) If IDs changed, the feed must be updated to match the website product URLs.' ); setDebugStatus('warn', `Product ${extractedId} not in feed ⚠️ (feed missing ID or different ID format).`); toastDiagnosticsSnapshot({ productId: extractedId, source, href, feedPrefetched: !!prefetchedData, lastFetchAttempt, lastFetchErrorAt, domHits: 0 }); return; } if ( !Object.keys(stockData).length && !Object.keys(dateData).length && !Object.keys(co2Data).length && !Object.keys(h2oData).length ) { DBG.warn(`Product ${extractedId} exists in feed, but no matching fields (stock/nextEntry/CO2/H2O) were found for your configured idsToLog list.`); setDebugStatus('warn', `Product ${extractedId} has no matching fields ⚠️ (idsToLog mismatch).`); toastDiagnosticsSnapshot({ productId: extractedId, source, href, feedPrefetched: !!prefetchedData, lastFetchAttempt, lastFetchErrorAt, domHits: 0 }); return; } setTimeout(() => { let domHits = 0; idsToLog.forEach(id => { const tdStock = document.getElementById(String(id)); const tdDate = document.getElementById(`${id}Date`); if (tdStock) { domHits++; tdStock.innerHTML = stockData[id] ? `${stockData[id]} Un.` : '—'; } if (tdDate) { domHits++; tdDate.innerHTML = dateData[id] || '—'; } }); if (domHits === 0) { DBG.warn( 'No matching table cells were found in the DOM (none of the idsToLog IDs exist as elements).', '\nWhat this means:', '\n• The table may not be present on this page, or the markup/IDs have changed.', '\nWhat to do:', '\n• Confirm the page has elements like id="100" and id="100Date".' ); setDebugStatus('warn', 'Product found, but no placeholders in the modal ⚠️ (template/IDs changed).'); toastDiagnosticsSnapshot({ productId: extractedId, source, href, feedPrefetched: !!prefetchedData, lastFetchAttempt, lastFetchErrorAt, domHits: 0 }); } else { DBG.info(`Updated DOM fields: ${domHits} element(s) touched.`); setDebugStatus('ok', `Live data injected ✅ Updated ${domHits} field(s).`); toastDiagnosticsSnapshot({ productId: extractedId, source, href, feedPrefetched: !!prefetchedData, lastFetchAttempt, lastFetchErrorAt, domHits }); } let activeId = null; for (const id of idsToLog) { if (document.getElementById(String(id))) { activeId = id; break; } } const co2El = document.getElementById('co2-value'); const h2oEl = document.getElementById('h2o-value'); const row = co2El?.closest('div')?.parentElement; if (!activeId || !row || !co2El || !h2oEl) { DBG.warn( 'CO2/H2O UI elements not found or no activeId detected.', '\nExpected:', '\n• an element with id="co2-value" and id="h2o-value"' ); setDebugStatus('warn', 'CO2/H2O UI not found ⚠️ (expected #co2-value and #h2o-value).'); return; } const co2Val = co2Data[activeId]; const h2oVal = h2oData[activeId]; const co2Has = !isZeroOrEmpty(co2Val); const h2oHas = !isZeroOrEmpty(h2oVal); if (!co2Has && !h2oHas) { row.style.display = 'none'; DBG.info(`CO2/H2O hidden (both empty/zero) for activeId ${activeId}.`); return; } row.style.display = 'flex'; co2El.parentElement.style.display = co2Has ? 'flex' : 'none'; h2oEl.parentElement.style.display = h2oHas ? 'flex' : 'none'; if (co2Has) co2El.textContent = String(co2Val).trim(); if (h2oHas) h2oEl.textContent = String(h2oVal).trim(); DBG.info(`CO2/H2O rendered for activeId ${activeId}:`, { co2: co2Has ? co2Val : '—', h2o: h2oHas ? h2oVal : '—' }); }, 500); } // ---------------------------------------------------- // Fetch logic (guarded + throttled) // ---------------------------------------------------- function fetchAndProcessData() { const { id: extractedId } = extractIDWithSource(); if (!extractedId) { currentItemId = null; return; } if (prefetchedData) { processData(prefetchedData); return; } const now = Date.now(); if (isFetching) return; if (now - lastFetchAttempt < FETCH_MIN_INTERVAL_MS) return; if (lastFetchErrorAt && (now - lastFetchErrorAt < FETCH_BACKOFF_MS)) return; lastFetchAttempt = now; isFetching = true; DBG.info('Feed not prefetched yet — fetching now…'); setDebugStatus('info', 'Feed not loaded yet… fetching ⏳'); fetch(FEED_URL, { cache: 'no-store' }) .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`); return r.text(); }) .then(str => parseXmlOrThrow(str)) .then(data => { prefetchedData = data; lastFetchErrorAt = 0; setDebugStatus('ok', 'Feed loaded ✅ Waiting for product…'); processData(data); }) .catch(err => { lastFetchErrorAt = Date.now(); if (String(err).includes('Failed to fetch') || String(err).includes('NetworkError')) { DBG.error('Feed request failed (likely CORS or network blocked).', '\n' + summarizeCorsGuidance(FEED_URL)); setDebugStatus('error', 'Feed blocked ❌ (network/CORS).'); } else { DBG.error('Feed request failed:', err); setDebugStatus('error', 'Feed error ❌ (invalid response).'); } }) .finally(() => { isFetching = false; }); } // Prefetch once (no spam; if it fails, guarded fetchAndProcessData will retry later) (function prefetchOnce(){ isFetching = true; lastFetchAttempt = Date.now(); fetch(FEED_URL, { cache: 'no-store' }) .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`); return r.text(); }) .then(str => parseXmlOrThrow(str)) .then(data => { prefetchedData = data; lastFetchErrorAt = 0; DBG.info('Data prefetched successfully ✅'); setDebugStatus('ok', 'Feed loaded ✅ Waiting for product…'); }) .catch(err => { lastFetchErrorAt = Date.now(); if (String(err).includes('Failed to fetch') || String(err).includes('NetworkError')) { DBG.error('Prefetch failed (likely CORS or network blocked).', '\n' + summarizeCorsGuidance(FEED_URL)); setDebugStatus('error', 'Feed blocked ❌ (network/CORS).'); } else { DBG.error('Prefetch failed:', err); setDebugStatus('error', 'Feed error ❌ (invalid response).'); } }) .finally(() => { isFetching = false; }); })(); // SPA / DOM watchers setInterval(fetchAndProcessData, 10000); window.addEventListener('hashchange', fetchAndProcessData); window.addEventListener('popstate', fetchAndProcessData); // Debounced MutationObserver (prevents rapid-fire fetch attempts) let moTimer = null; new MutationObserver(() => { clearTimeout(moTimer); moTimer = setTimeout(fetchAndProcessData, 250); }).observe(document.body, { childList: true, subtree: true }); console.log('v1');