BROOKER Manschettenknöpfe rund Onyx Silber

function styleArticlePrice() { document.querySelectorAll('.widget-item-price').forEach(function(widget) { /* Erst alles zurücksetzen – wichtig bei Variantenwechsel */ widget.style.removeProperty('position'); widget.style.removeProperty('top'); const nextWidget = widget.nextElementSibling; if (nextWidget && nextWidget.classList.contains('vat')) { nextWidget.style.removeProperty('position'); nextWidget.style.removeProperty('top'); } const priceElements = Array.from(widget.querySelectorAll('*')).filter(function(el) { const text = el.textContent .replace(/\u00a0/g, ' ') .trim(); const isPurePrice = /^[0-9.,\s]+€$/.test(text); const hasPriceChild = Array.from(el.children).some(function(child) { const childText = child.textContent .replace(/\u00a0/g, ' ') .trim(); return /^[0-9.,\s]+€$/.test(childText); }); return isPurePrice && !hasPriceChild; }); if (priceElements.length === 0) { return; } let strikePrice = null; let currentPrice = null; priceElements.forEach(function(el) { const styles = window.getComputedStyle(el); const isStrike = el.tagName === 'DEL' || el.tagName === 'S' || el.tagName === 'STRIKE' || styles.textDecorationLine.indexOf('line-through') !== -1 || styles.textDecoration.indexOf('line-through') !== -1; if (isStrike) { strikePrice = el; } }); const normalPrices = priceElements.filter(function(el) { return el !== strikePrice; }); if (normalPrices.length > 0) { currentPrice = normalPrices.reduce(function(largest, el) { if (!largest) { return el; } const currentSize = parseFloat(window.getComputedStyle(el).fontSize); const largestSize = parseFloat(window.getComputedStyle(largest).fontSize); return currentSize > largestSize ? el : largest; }, null); } /* Aktuellen Verkaufspreis fett */ if (currentPrice) { currentPrice.style.setProperty('font-weight', '700', 'important'); } /* Nur bei vorhandenem Streichpreis */ if (strikePrice && currentPrice) { /* Abstand Streichpreis → aktueller Preis kompakter */ strikePrice.style.setProperty('margin-bottom', '0', 'important'); strikePrice.style.setProperty('line-height', '1', 'important'); currentPrice.style.setProperty('margin-top', '0', 'important'); currentPrice.style.setProperty('line-height', '1.1', 'important'); /* Gesamten Preisblock 14 px nach oben */ widget.style.setProperty('position', 'relative', 'important'); widget.style.setProperty('top', '-14px', 'important'); /* MwSt.-Zeile ebenfalls mit hochziehen */ if (nextWidget && nextWidget.classList.contains('vat')) { nextWidget.style.setProperty('position', 'relative', 'important'); nextWidget.style.setProperty('top', '-14px', 'important'); } } }); } styleArticlePrice(); setTimeout(styleArticlePrice, 200); setTimeout(styleArticlePrice, 800); document.addEventListener("onVariationChanged", function() { setTimeout(styleArticlePrice, 100); setTimeout(styleArticlePrice, 500); });

(function () { 'use strict'; /* ========================================================= GROM – Live-Gravurvorschau v5.0 Gravurtext: Merkmal 109 Schriftart: Merkmal 110 Anmerkungen: Merkmal 120 (optional) Neu in v5.0: - Alle sechs Schriften werden aus den Zeichensatz-PDFs der Gravurmaschine gezeichnet (Vektor-Glyphdaten statt OTF/PNG-Sprites). Dadurch sind alle Zeichen sichtbar, die die Maschine graviert (Umlaute, ß, Akzente, €, Klammern, $, % …), und die Vorschau zeigt genau die Strichführung der Gravur. - Glyphdaten werden pro Schrift erst bei Auswahl geladen (13–54 KB gzip). - Typografische Zeichen (’ “ ” „ – — …) werden auf vorhandene abgebildet. - Zeichen, die eine Schrift nicht hat, werden unter der Vorschau als Hinweis angezeigt statt stillschweigend zu verschwinden. - Einheitliche Größe: Versalhöhe als Bezug, ein "-" wird nicht mehr riesig aufgeblasen. Unverändert aus v4.1: Doppel-Einbindungsschutz, Render-Token, Debounce, Ein-/Ausblenden mit Plenty-Merkmalen, Anmerkungen-Label. ========================================================= */ if (window.__gromGravurLiveInit) return; window.__gromGravurLiveInit = true; const PREVIEW_H = 52; /* Innenhöhe der Box: 62px - 2 * 5px Padding */ const SHOW_MISSING_HINT = true; const GLYPH_BASE_URL = 'https://cdn02.plentyone.com/f2d5nd8wf1gh/frontend/gravur-fonts/'; /* Optionstext im Plenty-Select → Datei + Darstellung. line: Strichstärke in CSS-Pixeln bei normaler Größe. Mehrlinien-Schriften (3L/4L, AZURE-Schraffur) brauchen feinere Linien, da die Linien dort zusammen den Buchstabenstrich bilden. */ const FONTS = { "AZURE": { file: "gravur-glyphs-azure-v1.js", line: 0.75, upperOnly: true }, "Baby Script 42": { file: "gravur-glyphs-baby-script-42-v1.js", line: 1.25 }, "Optima 3L": { file: "gravur-glyphs-optima-3l-v1.js", line: 0.80 }, "Script 4L": { file: "gravur-glyphs-script-4l-v1.js", line: 0.90 }, "Script Rund 1L": { file: "gravur-glyphs-script-rund-1l-v1.js", line: 1.35 }, "US Block 1L": { file: "gravur-glyphs-us-block-1l-v1.js", line: 1.35 } }; const TARGET_H = 34; /* sichtbare Höhe (CSS-px) für Versalhöhe inkl. Ober-/Unterlängen */ /* Typografische Varianten → Zeichen, die in den Gravurschriften vorkommen. */ const SUBSTITUTE = { '‘': "'", '’': "'", '‚': "'", '‛': "'", '′': "'", '´': "'", '`': "'", '“': '"', '”': '"', '„': '"', '‟': '"', '″': '"', '«': '"', '»': '"', '‐': '-', '‑': '-', '‒': '-', '–': '-', '—': '-', '−': '-', '…': '...', ' ': ' ', ' ': ' ', ' ': ' ', '\t': ' ', '\n': ' ', '\r': ' ', 'ẞ': 'SS' /* großes ẞ hat keine Schrift → SS */ }; window.__gromGravurGlyphs = window.__gromGravurGlyphs || {}; const dataCache = {}; /* Schriftname -> Promise mit Daten */ const pathCache = {}; /* Schriftname → { codepoint: Path2D } */ let renderToken = 0; let debounceTimer = null; /* ---------- Glyphdaten ---------- */ function loadGlyphs(fontName) { if (window.__gromGravurGlyphs[fontName]) { return Promise.resolve(window.__gromGravurGlyphs[fontName]); } if (dataCache[fontName]) return dataCache[fontName]; dataCache[fontName] = new Promise(function (resolve, reject) { const s = document.createElement('script'); s.src = GLYPH_BASE_URL + FONTS[fontName].file; s.async = true; s.onload = function () { const d = window.__gromGravurGlyphs[fontName]; if (d) resolve(d); else { delete dataCache[fontName]; reject(new Error('no data')); } }; s.onerror = function (e) { delete dataCache[fontName]; /* späterer neuer Versuch möglich */ s.remove(); reject(e); }; document.head.appendChild(s); }); return dataCache[fontName]; } function getPath(fontName, data, key) { const cache = pathCache[fontName] || (pathCache[fontName] = {}); if (!cache[key]) cache[key] = new Path2D(data.glyphs[key][5]); return cache[key]; } /* Text → Liste vorhandener Glyphen + Liste fehlender Zeichen. */ function mapText(text, fontName, data) { const cfg = FONTS[fontName]; const has = function (ch) { return !!data.glyphs[String(ch.codePointAt(0))]; }; const glyphs = []; const missing = []; let value = (text || '').normalize ? text.normalize('NFC') : text; Array.from(value).forEach(function (ch) { let candidates = [ch]; if (!has(ch) && SUBSTITUTE[ch] !== undefined) { candidates = Array.from(SUBSTITUTE[ch]); } candidates.forEach(function (c) { if (!has(c) && cfg.upperOnly) { const up = c.toUpperCase(); if (up.length === 1 && has(up)) c = up; else if (up !== c && Array.from(up).every(has)) { /* z. B. ß → SS, falls nötig */ Array.from(up).forEach(function (u) { glyphs.push(String(u.codePointAt(0))); }); return; } } if (has(c)) glyphs.push(String(c.codePointAt(0))); else if (c.trim() && missing.indexOf(c) < 0) missing.push(c); }); }); return { glyphs: glyphs, missing: missing }; } /* ---------- DOM ---------- */ function getTextInput() { return document.querySelector( '#order-property-input-container_109 input, ' + '#order-property-input-container_109 textarea' ); } function getFontSelect() { return document.querySelector('#order-property-input-select_110'); } function getSelectedFontName() { const select = getFontSelect(); if (!select || select.selectedIndex < 0) return ''; const opt = select.options[select.selectedIndex]; return opt ? opt.text.trim() : ''; } function findNotesContainer() { /* Im echten Plenty-DOM ist Anmerkungen Merkmal 120. */ const direct = document.getElementById('order-property-input-container_120'); if (direct) return direct; /* Fallback, falls Plenty die ID irgendwann ändert. */ const containers = document.querySelectorAll('[id^="order-property-input-container_"]'); for (const container of containers) { const labels = container.querySelectorAll('label'); for (const label of labels) { if ((label.textContent || '').trim() === 'Anmerkungen') return container; } } return null; } function getNotesLabel(notesContainer) { if (!notesContainer) return null; const labels = notesContainer.querySelectorAll('label'); for (const label of labels) { if ((label.textContent || '').trim() === 'Anmerkungen') return label; } return null; } function setPreviewState(previewVisible) { const notesContainer = findNotesContainer(); const notesLabel = getNotesLabel(notesContainer); const customNotesLabel = document.getElementById('grom-live-notes-label'); /* Eigenes Label nur zeigen, wenn wir das Plenty-Label tatsächlich ersetzen. */ if (customNotesLabel) { customNotesLabel.style.display = (previewVisible && notesLabel) ? 'block' : 'none'; } if (!notesContainer) return; if (previewVisible) { /* Das absolut positionierte Plenty-Label würde die Vorschau überlagern. */ notesContainer.style.setProperty('padding-top', '0px', 'important'); if (notesLabel) notesLabel.style.setProperty('display', 'none', 'important'); } else { /* Geschlossener Zustand: native Plenty-Beschriftung + 9 px Abstand. */ notesContainer.style.setProperty('padding-top', '9px', 'important'); notesContainer.style.setProperty('box-sizing', 'border-box', 'important'); if (notesLabel) notesLabel.style.removeProperty('display'); } } function ensurePreview() { const input = getTextInput(); const textContainer = document.getElementById('order-property-input-container_109'); if (!input || !textContainer) return null; let wrap = document.getElementById('grom-live-engraving-preview'); if (!wrap) { wrap = document.createElement('div'); wrap.id = 'grom-live-engraving-preview'; wrap.style.cssText = 'display:none;' + 'width:100%;' + 'margin:9px 0 0 0;' + 'padding:0;' + 'box-sizing:border-box;' + 'clear:both;'; const label = document.createElement('div'); label.textContent = 'Gravurvorschau'; label.style.cssText = 'font-size:11px;' + 'font-family:inherit;' + 'font-weight:400;' + 'line-height:1.15;' + 'color:#333;' + 'margin:0 0 4px 0;' + 'padding:0;' + 'text-align:left;'; const box = document.createElement('div'); box.id = 'grom-live-engraving-box'; box.style.cssText = 'width:100%;' + 'height:62px;' + 'padding:5px 8px;' + 'border:0;' + 'background:#f7f7f7;' + 'box-sizing:border-box;' + 'display:flex;' + 'align-items:center;' + 'justify-content:center;' + 'overflow:hidden;'; const canvas = document.createElement('canvas'); canvas.id = 'grom-live-engraving-canvas'; canvas.style.cssText = 'display:block;' + 'width:100%;' + 'height:' + PREVIEW_H + 'px;' + 'margin:0;' + 'padding:0;'; const hint = document.createElement('div'); hint.id = 'grom-live-engraving-hint'; hint.style.cssText = 'display:none;' + 'font-size:11px;' + 'font-family:inherit;' + 'line-height:1.3;' + 'color:#a00;' + 'margin:4px 0 0 0;' + 'padding:0;' + 'text-align:left;'; const customNotesLabel = document.createElement('div'); customNotesLabel.id = 'grom-live-notes-label'; customNotesLabel.textContent = 'Anmerkungen'; customNotesLabel.style.cssText = 'display:none;' + 'font-size:11px;' + 'font-family:inherit;' + 'font-weight:400;' + 'line-height:1.15;' + 'color:#333;' + 'margin:10px 0 4px 0;' + 'padding:0;' + 'text-align:left;'; box.appendChild(canvas); wrap.appendChild(label); wrap.appendChild(box); wrap.appendChild(hint); wrap.appendChild(customNotesLabel); textContainer.insertAdjacentElement('afterend', wrap); } else if (wrap.previousElementSibling !== textContainer) { textContainer.insertAdjacentElement('afterend', wrap); } return wrap; } function setHint(missing) { const hint = document.getElementById('grom-live-engraving-hint'); if (!hint) return; if (!SHOW_MISSING_HINT || !missing || !missing.length) { hint.style.display = 'none'; hint.textContent = ''; return; } hint.textContent = (missing.length === 1 ? 'Dieses Zeichen ist in der gewählten Schrift nicht verfügbar: ' : 'Diese Zeichen sind in der gewählten Schrift nicht verfügbar: ') + missing.join(' '); hint.style.display = 'block'; } function showPreview(wrap) { wrap.style.display = 'block'; setPreviewState(true); } function hidePreview(wrap) { if (wrap) wrap.style.display = 'none'; setHint(null); setPreviewState(false); } /* ---------- Canvas ---------- */ function setupCanvas(canvas) { const box = document.getElementById('grom-live-engraving-box'); if (!box) return null; const dpr = Math.min(window.devicePixelRatio || 1, 2); const cssW = Math.max(1, box.clientWidth - 16); /* 2 * 8px Padding */ const cssH = PREVIEW_H; canvas.width = Math.round(cssW * dpr); canvas.height = Math.round(cssH * dpr); canvas.style.width = cssW + 'px'; canvas.style.height = cssH + 'px'; const ctx = canvas.getContext('2d'); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); return { ctx: ctx, dpr: dpr, width: canvas.width, height: canvas.height }; } function drawGlyphs(fontName, data, keys) { const canvas = document.getElementById('grom-live-engraving-canvas'); const state = canvas ? setupCanvas(canvas) : null; if (!state || !keys.length) return; const G = data.glyphs; const cap = data.capHeight; /* Layout in Font-Einheiten (Grundlinie y = 0, y nach unten). */ let x = 0; let minX = Infinity, maxX = -Infinity; let minY = -cap, maxY = 0; /* Bezug: Versalhöhe bis Grundlinie */ const placed = []; keys.forEach(function (k) { const g = G[k]; if (g[5]) { minX = Math.min(minX, x + g[1]); maxX = Math.max(maxX, x + g[3]); minY = Math.min(minY, g[2]); maxY = Math.max(maxY, g[4]); placed.push({ key: k, x: x }); } x += g[0]; }); if (!placed.length) return; /* nur Leerzeichen */ const ctx = state.ctx; const W = state.width; const H = state.height; const dpr = state.dpr; const inkW = Math.max(1, maxX - minX); const inkH = Math.max(1, maxY - minY); const availableW = W - (20 * dpr); let scale = (TARGET_H * dpr) / inkH; if (inkW * scale > availableW) scale = availableW / inkW; const offX = (W - inkW * scale) / 2 - minX * scale; const offY = (H - inkH * scale) / 2 - minY * scale; /* Linienstärke: bei verkleinerten (langen) Texten etwas dünner, aber sichtbar. */ const normalScale = (TARGET_H * dpr) / (cap * 1.45); const shrink = Math.min(1, scale / normalScale); const lineCss = FONTS[fontName].line * Math.max(0.7, Math.sqrt(shrink)); ctx.strokeStyle = '#111'; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; placed.forEach(function (p) { ctx.setTransform(scale, 0, 0, scale, offX + p.x * scale, offY); ctx.lineWidth = (lineCss * dpr) / scale; ctx.stroke(getPath(fontName, data, p.key)); }); ctx.setTransform(1, 0, 0, 1, 0, 0); } /* ---------- Steuerung ---------- */ /* true, wenn das Element im DOM hängt und tatsächlich angezeigt wird. */ function isVisible(el) { if (!el || !el.isConnected) return false; if (!el.getClientRects().length) return false; return window.getComputedStyle(el).visibility !== 'hidden'; } async function renderPreview() { const token = ++renderToken; const input = getTextInput(); const select = getFontSelect(); const textContainer = document.getElementById('order-property-input-container_109'); /* Blendet Plenty Gravurtext oder Schriftart aus (z. B. bei "Lasergravur: Bild/Logo/Wappen"), muss auch die Vorschau verschwinden. */ if (!input || !select || !isVisible(textContainer) || !isVisible(select)) { hidePreview(document.getElementById('grom-live-engraving-preview')); return; } const wrap = ensurePreview(); if (!wrap) return; const text = input.value || ''; const fontName = getSelectedFontName(); if (!text.trim() || !FONTS[fontName]) { hidePreview(wrap); return; } /* Erst sichtbar machen, damit die Box eine Breite hat. */ showPreview(wrap); let data; try { data = await loadGlyphs(fontName); } catch (e) { if (token === renderToken) hidePreview(wrap); /* Daten nicht ladbar → lieber keine Vorschau */ return; } if (token !== renderToken) return; /* inzwischen neuere Eingabe */ const mapped = mapText(text, fontName, data); drawGlyphs(fontName, data, mapped.glyphs); setHint(mapped.missing); } function scheduleRender(delay) { clearTimeout(debounceTimer); debounceTimer = setTimeout(renderPreview, delay || 0); } document.addEventListener('input', function (e) { if (e.target && e.target.closest && e.target.closest('#order-property-input-container_109')) { scheduleRender(60); } }); document.addEventListener('change', function (e) { if (e.target && e.target.id === 'order-property-input-select_110') { scheduleRender(0); return; } /* Jede andere Merkmal-Auswahl (z. B. Gravurart) kann Felder ein- oder ausblenden. Plenty baut das DOM danach neu auf → mehrfach prüfen. */ if (e.target && e.target.closest && e.target.closest('[id^="order-property-input-container_"]')) { scheduleRender(0); setTimeout(renderPreview, 250); setTimeout(renderPreview, 700); } }); document.addEventListener('click', function (e) { if (e.target && e.target.closest && e.target.closest('.properties-toggle')) { setTimeout(renderPreview, 150); setTimeout(renderPreview, 400); } }); document.addEventListener('onVariationChanged', function () { setTimeout(renderPreview, 250); setTimeout(renderPreview, 600); }); window.addEventListener('resize', function () { scheduleRender(120); }); setPreviewState(false); setTimeout(renderPreview, 300); setTimeout(renderPreview, 900); })();