Ringgrößen-Ratgeber

‚ ); } function renderHome() { return ( ‚

‚ + ‚

‚ + ‚

Ringgrößen

‚ + ‚

Finden Sie Ihre Ringgröße

‚ + ‚

‚ + ‚

Ein paar Schritte reichen aus, um die am besten passende Größe zu ermitteln.

‚ + ‚

‚ + renderMethodCard(„ring“, „Ich habe einen Ring“, „Messen Sie einen Ring, der Ihnen bereits gut passt.“) + renderMethodCard(„finger“, „Ich messe meinen Finger“, „Nutzen Sie den Umfang Ihres Fingers, um Ihre Größe zu bestimmen.“) + renderMethodCard(„known“, „Ich kenne meine Größe“, „Wandeln Sie eine bereits bekannte Größe um.“) + renderMethodCard(„gift“, „Für ein Geschenk“, „Erhalten Sie eine vorsichtige Schätzung ohne direkte Messung.“) + ‚

‚ + ‚

‚ ); } function renderMethodCard(step, title, text) { return ( ‚‚ + ‚‚ + escapeHtml(title) + ‚‚ + ‚‚ + escapeHtml(text) + ‚‚ + ‚‚ ); } function renderToolbar(title) { return ( ‚‚ ); } function renderResultCard(config) { var actions = [ ‚Neu starten‚, ‚Brauchen Sie einen Rat ?‚ ]; if (config.showShopLink) { actions.push(‚Entdecken Sie die Ringe‚); } return ( ‚

‚ + ‚

‚ + ‚

Empfohlene Größe

‚ + ‚

‚ + escapeHtml(config.size) + ‚

‚ + ‚

‚ + escapeHtml(config.systemLabel || „Europäische Größe“) + ‚

‚ + ‚

‚ + (config.summary ? ‚

‚ + config.summary + ‚

‚ : “) + (config.stats && config.stats.length ? ( ‚

‚ + config.stats.map(function (stat) { return ( ‚

‚ + ‚‚ + escapeHtml(stat.label) + ‚‚ + ‚‚ + escapeHtml(stat.value) + ‚‚ + ‚

‚ ); }).join(„“) + ‚

‚ ) : “) + (config.notice ? ‚

‚ + config.notice + ‚

‚ : “) + ‚

‚ + actions.join(„“) + ‚

‚ + ‚

‚ ); } function renderRingWorkflow() { return ( ‚

‚ + renderToolbar(„Ich habe einen Ring“) + ‚

‚ + ‚

‚ + ‚

Messen Sie den Innendurchmesser des Rings, ohne die Metallränder einzubeziehen. Eine genaue Messung eines Rings, der Ihnen bereits gut passt, ist zu Hause in der Regel die zuverlässigste Methode.

‚ + ‚

‚ + ‚Innendurchmesser‚ + ‚

‚ + ‚‚ + ‚mm‚ + ‚

‚ + ‚

Beispiel : 17.2 mm

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ ); } function renderFingerWorkflow() { return ( ‚

‚ + renderToolbar(„Ich messe meinen Finger“) + ‚

‚ + ‚

‚ + ‚

Messen Sie den Fingerumfang mit einem Maßband oder einem Papierstreifen, bequem angelegt, ohne den Finger übermäßig zu drücken.

‚ + ‚

‚ + ‚Fingerumfang‚ + ‚

‚ + ‚‚ + ‚mm‚ + ‚

‚ + ‚

Beispiel : 54 mm

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

Wie breit ist der Ring ungefähr?

‚ + renderChoiceButtons(„finger-width“, WIDTH_OPTIONS, state.fingerWidth) + ‚

‚ + ‚

‚ + ‚
• Am besten gegen Ende des Tages messen.
‚ + ‚
• Vermeiden Sie Messungen, wenn die Hände ungewöhnlich kalt oder warm sind.
‚ + ‚
• Wenn Sie zwischen zwei Größen liegen, kann ein breiterer Ring in der nächstgrößeren Größe bequemer sitzen.
‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ ); } function renderKnownWorkflow() { var systemOptions = [ { value: „eu“, label: „Europäische Größe“ }, { value: „us“, label: „US / Kanada“ }, { value: „uk“, label: „UK“ }, { value: „diameter“, label: „Innendurchmesser in mm“ }, { value: „circumference“, label: „Innenumfang in mm“ } ]; var currentSystem = state.knownSystem || „eu“; return ( ‚

‚ + renderToolbar(„Ich kenne meine Größe“) + ‚

‚ + ‚

‚ + ‚

‚ + ‚System der bekannten Größe‚ + ‚

‚ + ‚ systemOptions.map(function (option) { return ‚‚ + escapeHtml(option.label) + ‚‚; }).join(„“) + ‚‚ + ‚

‚ + ‚

‚ + ‚

‚ + renderKnownInput(currentSystem) + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ ); } function renderKnownInput(system) { var inputId = fieldId(„known-value“); if (system === „eu“ || system === „us“ || system === „uk“) { return ( ‚Bekannte Größe‚ + ‚‚ + ); } return ( ‚‚ + (system === „diameter“ ? „Innendurchmesser“ : „Innenumfang“) + ‚‚ + ‚‚ ); } function buildKnownOptions(system) { return RING_TABLE.map(function (entry) { var value = system === „eu“ ? entry.eu : system === „us“ ? entry.us : entry.uk; var label = system === „eu“ ? „EU “ + entry.eu : system === „us“ ? „US “ + entry.us : „UK “ + entry.uk; return ‚‚ + escapeHtml(label) + ‚‚; }).join(„“); } function renderGiftWorkflow() { return ( ‚

‚ + renderToolbar(„Für ein Geschenk“) + ‚

‚ + ‚

‚ + ‚

‚ + ‚

Können Sie unauffällig einen Ring ausleihen, den die Person bereits an derselben Stelle trägt?

‚ + renderChoiceButtons(„gift-borrow“, [ { value: „yes“, label: „Ja“ }, { value: „no“, label: „Nein“ } ], state.giftBorrow || „“) + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ + ‚

‚ ); } function renderGiftDetails() { if (state.giftBorrow === „yes“) { return ( ‚‚ + ‚‚ ); } if (state.giftBorrow !== „no“) { return „“; } return ( ‚‚ ); } function renderGiftEstimate() { if (state.giftBorrow !== „no“ || state.giftKnown !== „no“) { return „“; } var estimate = getGiftEstimate(state.giftWidth); return renderResultCard({ size: estimate.primary, systemLabel: „Startschätzung“, summary: „Ohne direkte Messung sollte die angezeigte Größe als vorsichtiger Richtwert gelesen werden, nicht als absolute Gewissheit.“, stats: [ { label: „Empfohlener Bereich“, value: estimate.range }, { label: „Ringbreite“, value: estimate.widthLabel }, { label: „Tipp“, value: „Ein breiterer Ring kann im oberen Bereich der Spanne bequemer sitzen.“ } ], notice: „Um diese Wahl zu präzisieren, vergleichen Sie mit einem vorhandenen Ring, fragen Sie diskret eine vertraute Person oder kontaktieren Sie Gil Bonnet, bevor Sie bestellen.“, showShopLink: false }); } function getGiftEstimate(width) { if (width === „fine“) { return { primary: „52 bis 54“, range: „EU 52 bis 54“, widthLabel: „Fein, unter 4 mm“ }; } if (width === „large“) { return { primary: „55 bis 57“, range: „EU 55 bis 57“, widthLabel: „Breit, über 6 mm“ }; } return { primary: „53 bis 55“, range: „EU 53 bis 55“, widthLabel: „Standard, 4 bis 6 mm“ }; } function render() { app.innerHTML = getMarkupForStep(); bindEvents(); updateDynamicSections(); } function getMarkupForStep() { if (state.step === „ring“) { return renderRingWorkflow(); } if (state.step === „finger“) { return renderFingerWorkflow(); } if (state.step === „known“) { return renderKnownWorkflow(); } if (state.step === „gift“) { return renderGiftWorkflow(); } return renderHome(); } function bindEvents() { app.querySelectorAll(„[data-step]“).forEach(function (button) { button.addEventListener(„click“, function () { var nextStep = button.getAttribute(„data-step“); setState({ step: nextStep }); }); }); app.querySelectorAll(„[data-action=’reset‘]“).forEach(function (button) { button.addEventListener(„click“, resetAssistant); }); app.querySelectorAll(„[data-choice-group]“).forEach(function (button) { button.addEventListener(„click“, function () { handleChoiceSelection( button.getAttribute(„data-choice-group“), button.getAttribute(„data-choice-value“) ); }); }); var ringInput = app.querySelector(„#“ + cssEscape(fieldId(„ring-diameter“))); if (ringInput) { ringInput.addEventListener(„input“, handleRingInput); } var fingerInput = app.querySelector(„#“ + cssEscape(fieldId(„finger-circumference“))); if (fingerInput) { fingerInput.addEventListener(„input“, handleFingerInput); } var knownSystem = app.querySelector(„#“ + cssEscape(fieldId(„known-system“))); if (knownSystem) { knownSystem.addEventListener(„change“, function () { setState({ knownSystem: knownSystem.value }); }); } var knownValue = app.querySelector(„#“ + cssEscape(fieldId(„known-value“))); if (knownValue) { var eventName = knownValue.tagName === „SELECT“ ? „change“ : „input“; knownValue.addEventListener(eventName, handleKnownValue); handleKnownValue(); } } function updateDynamicSections() { var giftDetails = app.querySelector(„[data-gift-details]“); if (giftDetails) { giftDetails.innerHTML = renderGiftDetails(); giftDetails.querySelectorAll(„[data-step]“).forEach(function (button) { button.addEventListener(„click“, function () { setState({ step: button.getAttribute(„data-step“) }); }); }); giftDetails.querySelectorAll(„[data-choice-group]“).forEach(function (button) { button.addEventListener(„click“, function () { handleChoiceSelection( button.getAttribute(„data-choice-group“), button.getAttribute(„data-choice-value“) ); }); }); } var resultSlot = app.querySelector(„[data-result-slot]“); if (resultSlot && state.step === „gift“) { resultSlot.innerHTML = renderGiftEstimate(); resultSlot.querySelectorAll(„[data-action=’reset‘]“).forEach(function (button) { button.addEventListener(„click“, resetAssistant); }); } } function handleChoiceSelection(group, value) { if (group === „finger-width“) { setState({ fingerWidth: value }); handleFingerInput(); return; } if (group === „gift-borrow“) { setState({ giftBorrow: value, giftKnown: „“ }); return; } if (group === „gift-known“) { setState({ giftKnown: value }); return; } if (group === „gift-width“) { setState({ giftWidth: value }); } } function handleRingInput() { var input = app.querySelector(„#“ + cssEscape(fieldId(„ring-diameter“))); var error = app.querySelector(„#“ + cssEscape(fieldId(„ring-diameter-error“))); var resultSlot = app.querySelector(„[data-result-slot]“); state.ringDiameter = input.value; var value = parseMeasurement(input.value); var validation = validateMeasurement( value, 12, 25, „Bitte den Innendurchmesser in Millimetern eingeben.“, „Bitte geben Sie einen realistischen Wert ein, zwischen 12 und 25 mm.“ ); if (!validation.valid) { error.textContent = input.value.trim() ? validation.message : „“; resultSlot.innerHTML = „“; return; } error.textContent = „“; var entry = calculateFromDiameter(value); var circumference = value * Math.PI; resultSlot.innerHTML = renderResultCard({ size: String(entry.eu), stats: [ { label: „Innendurchmesser“, value: formatMillimeters(value) }, { label: „Umfang“, value: „ca. “ + formatMillimeters(circumference) }, { label: „US-Entsprechung“, value: entry.us }, { label: „UK-Entsprechung“, value: entry.uk } ], notice: „Einen Ring zu messen, der Ihnen bereits gut passt, ist in der Regel zuverlässig, wenn der Innendurchmesser genau gemessen wurde.“, showShopLink: true }); bindResultActions(resultSlot); } function handleFingerInput() { var input = app.querySelector(„#“ + cssEscape(fieldId(„finger-circumference“))); var error = app.querySelector(„#“ + cssEscape(fieldId(„finger-circumference-error“))); var resultSlot = app.querySelector(„[data-result-slot]“); state.fingerCircumference = input.value; var value = parseMeasurement(input.value); var validation = validateMeasurement( value, 40, 80, „Bitte geben Sie den Fingerumfang in Millimetern ein.“, „Bitte geben Sie einen realistischen Wert ein, zwischen 40 und 80 mm.“ ); if (!validation.valid) { error.textContent = input.value.trim() ? validation.message : „“; resultSlot.innerHTML = „“; return; } error.textContent = „“; var recommendation = calculateFingerRecommendation(value, state.fingerWidth); var entry = recommendation.entry; var widthLabel = state.fingerWidth === „large“ ? „Breit, über 6 mm“ : state.fingerWidth === „fine“ ? „Fein, unter 4 mm“ : „Standard, 4 bis 6 mm“; resultSlot.innerHTML = renderResultCard({ size: String(entry.eu), summary: recommendation.summary, stats: [ { label: „Fingerumfang“, value: formatMillimeters(value) }, { label: „Ringbreite“, value: widthLabel }, { label: „Geschätzter Innendurchmesser“, value: formatMillimeters(entry.diameter) }, { label: „US-Entsprechung“, value: entry.us }, { label: „UK-Entsprechung“, value: entry.uk } ], notice: recommendation.notice, showShopLink: true }); bindResultActions(resultSlot); } function handleKnownValue() { var system = state.knownSystem || „eu“; var input = app.querySelector(„#“ + cssEscape(fieldId(„known-value“))); var error = app.querySelector(„#“ + cssEscape(fieldId(„known-value-error“))); var resultSlot = app.querySelector(„[data-result-slot]“); if (!input) { return; } var rawValue = input.value; if (!rawValue) { error.textContent = „“; resultSlot.innerHTML = „“; return; } if (system === „diameter“) { var diameterValue = parseMeasurement(rawValue); var diameterValidation = validateMeasurement( diameterValue, 12, 25, „Bitte einen Wert eingeben.“, „Bitte geben Sie einen realistischen Wert ein, zwischen 12 und 25 mm.“ ); if (!diameterValidation.valid) { error.textContent = diameterValidation.message; resultSlot.innerHTML = „“; return; } } if (system === „circumference“) { var circumferenceValue = parseMeasurement(rawValue); var circumferenceValidation = validateMeasurement( circumferenceValue, 40, 80, „Bitte einen Wert eingeben.“, „Bitte geben Sie einen realistischen Wert ein, zwischen 40 und 80 mm.“ ); if (!circumferenceValidation.valid) { error.textContent = circumferenceValidation.message; resultSlot.innerHTML = „“; return; } } var entry = getEntryBySystem(system, rawValue); if (!entry) { error.textContent = „Dieser Wert entspricht keiner bekannten Größe.“; resultSlot.innerHTML = „“; return; } error.textContent = „“; resultSlot.innerHTML = ( ‚

‚ + renderResultCard({ size: String(entry.eu), showShopLink: true, stats: [ { label: „Innendurchmesser“, value: formatMillimeters(entry.diameter) }, { label: „Innenumfang“, value: formatMillimeters(entry.circumference) }, { label: „US / Kanada-Entsprechung“, value: entry.us }, { label: „UK-Entsprechung“, value: entry.uk } ] }) + ‚

‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚‚ + ‚

System	Wert
Europäische Größe	‚ + entry.eu + ‚
US / Kanada	‚ + escapeHtml(entry.us) + ‚
UK	‚ + escapeHtml(entry.uk) + ‚
Innendurchmesser	‚ + escapeHtml(formatMillimeters(entry.diameter)) + ‚
Innenumfang	‚ + escapeHtml(formatMillimeters(entry.circumference)) + ‚

‚ + ‚

‚ + ‚

‚ ); bindResultActions(resultSlot); } function bindResultActions(scope) { scope.querySelectorAll(„[data-action=’reset‘]“).forEach(function (button) { button.addEventListener(„click“, resetAssistant); }); } function fieldId(suffix) { return root.dataset.gbRingSizerId + „-“ + suffix; } function escapeHtml(value) { return String(value) .replace(/&/g, „&“) .replace(/, „<") .replace(/>/g, „>“) .replace(/“/g, „““) .replace(/’/g, „‚“); } function escapeAttribute(value) { return escapeHtml(value); } function cssEscape(value) { if (window.CSS && typeof window.CSS.escape === „function“) { return window.CSS.escape(value); } return value.replace(/([^\w-])/g, „\\$1“); } render(); } if (document.readyState === „loading“) { document.addEventListener(„DOMContentLoaded“, initialize); } else { initialize(); } })();