Versandinfos

(function () { document.querySelectorAll('.shipping-widget').forEach(function (widgetRoot, instanceIndex) { if (widgetRoot.dataset.initialized === 'true') return; widgetRoot.dataset.initialized = 'true'; const detailAnimations = new WeakMap(); function animateDetails(panel, expanded) { if (!panel || (!expanded && panel.hidden)) return; const content = panel.querySelector(".delivery-table__detail-content"); if (!content) { panel.hidden = !expanded; return; } const previousAnimation = detailAnimations.get(panel); let start; if (previousAnimation) { const currentStyle = window.getComputedStyle(content); start = { height: currentStyle.height, paddingTop: currentStyle.paddingTop, paddingBottom: currentStyle.paddingBottom, borderTopWidth: currentStyle.borderTopWidth, opacity: currentStyle.opacity, transform: currentStyle.transform }; previousAnimation.cancel(); detailAnimations.delete(panel); } else if (expanded && panel.hidden) { start = { height: "0px", paddingTop: "0px", paddingBottom: "0px", borderTopWidth: "0px", opacity: 0, transform: "translateY(-4px)" }; } else { const currentStyle = window.getComputedStyle(content); start = { height: currentStyle.height, paddingTop: currentStyle.paddingTop, paddingBottom: currentStyle.paddingBottom, borderTopWidth: currentStyle.borderTopWidth, opacity: currentStyle.opacity, transform: currentStyle.transform }; } panel.hidden = false; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { panel.hidden = !expanded; return; } const fullStyle = window.getComputedStyle(content); const end = expanded ? { height: fullStyle.height, paddingTop: fullStyle.paddingTop, paddingBottom: fullStyle.paddingBottom, borderTopWidth: fullStyle.borderTopWidth, opacity: 1, transform: "translateY(0)" } : { height: "0px", paddingTop: "0px", paddingBottom: "0px", borderTopWidth: "0px", opacity: 0, transform: "translateY(-4px)" }; const animation = content.animate([start, end], { duration: 180, easing: "cubic-bezier(0.22, 0.61, 0.36, 1)", fill: "both" }); detailAnimations.set(panel, animation); animation.finished.then(function () { if (detailAnimations.get(panel) !== animation) return; detailAnimations.delete(panel); if (!expanded) panel.hidden = true; animation.cancel(); }).catch(function () {}); } const countryButtons = Array.from(widgetRoot.querySelectorAll(".international-country-option")); const countryPaths = Array.from(widgetRoot.querySelectorAll(".map-country--target")); const countryLabels = Array.from(widgetRoot.querySelectorAll(".map-label[data-country-id]")); const route = widgetRoot.querySelector("#international-route"); const packageMarker = widgetRoot.querySelector("#international-route__package"); const destinationMarker = widgetRoot.querySelector("#international-route__destination"); const selectedFlag = widgetRoot.querySelector("#international-selected-flag"); const selectedName = widgetRoot.querySelector("#international-selected-name"); const countrySelect = widgetRoot.querySelector(".international-country-info"); const countrySelectTrigger = widgetRoot.querySelector("#international-country-select-trigger"); const countryMenu = widgetRoot.querySelector("#international-country-menu"); const average = widgetRoot.querySelector("#international-average"); const deliveryDays = widgetRoot.querySelector("#international-delivery-days"); const saturdayDay = widgetRoot.querySelector("#international-saturday-day"); const mapTitle = widgetRoot.querySelector("#international-map-title"); const origin = { lon: 7.15, lat: 50.98 }; const mapProject = function (lon, lat) { return { x: 10 + (lon + 8.5) * 18.2352941176, y: 10 + (56.5 - lat) * 26.25 }; }; let routeFrame = null; function setCountry(button) { const countryId = button.dataset.countryId; const destination = mapProject(Number(button.dataset.lon), Number(button.dataset.lat)); const countryLabel = countryLabels.find(function (label) { return label.dataset.countryId === countryId; }); const packageDestination = countryLabel ? { x: Number(countryLabel.getAttribute("x")), y: Number(countryLabel.getAttribute("y")) + 14 } : destination; const start = mapProject(origin.lon, origin.lat); const control = { x: (start.x + packageDestination.x) / 2, y: (start.y + packageDestination.y) / 2 - 16 }; const routeData = "M" + start.x.toFixed(1) + " " + start.y.toFixed(1) + " Q" + control.x.toFixed(1) + " " + control.y.toFixed(1) + " " + packageDestination.x.toFixed(1) + " " + packageDestination.y.toFixed(1); countryButtons.forEach(function (option) { const isSelected = option === button; option.setAttribute("aria-pressed", String(isSelected)); option.hidden = isSelected; }); countryPaths.forEach(function (path) { const isSelected = path.dataset.countryId === countryId; path.classList.toggle("is-selected", isSelected); path.setAttribute("aria-pressed", String(isSelected)); }); countryLabels.forEach(function (label) { label.classList.toggle("is-selected", label.dataset.countryId === countryId); }); selectedFlag.dataset.flagCountry = countryId; selectedName.textContent = button.dataset.countryName; countrySelectTrigger.setAttribute("aria-label", "Zielland auswählen, aktuell " + button.dataset.countryName); const averageDays = Number(button.dataset.average.replace(",", ".")); const estimate = averageDays >= 2.6 ? "2–4" : "2–3"; average.textContent = "Voraussichtlich " + estimate + " Werktage"; const saturdayPossible = button.dataset.saturday === "true"; saturdayDay.classList.toggle("delivery-day-strip__partial", saturdayPossible); saturdayDay.classList.toggle("delivery-day-strip__unavailable", !saturdayPossible); deliveryDays.setAttribute("aria-label", saturdayPossible ? "Montag bis Freitag; Samstagszustellung je nach Sendung und Zielgebiet möglich; Sonntag keine Zustellung" : "Montag bis Freitag; laut DHL-Länderübersicht keine Samstagszustellung ausgewiesen; Sonntag keine Zustellung"); mapTitle.textContent = "Versandweg von Deutschland nach " + button.dataset.countryName; route.setAttribute("d", routeData); destinationMarker.setAttribute("cx", packageDestination.x.toFixed(1)); destinationMarker.setAttribute("cy", packageDestination.y.toFixed(1)); if (routeFrame !== null) window.cancelAnimationFrame(routeFrame); route.style.strokeDasharray = "none"; route.style.strokeDashoffset = "0"; if (!route.getTotalLength || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { packageMarker.setAttribute("transform", "translate(" + packageDestination.x.toFixed(1) + " " + packageDestination.y.toFixed(1) + ")"); return; } const routeLength = route.getTotalLength(); packageMarker.setAttribute("transform", "translate(" + start.x.toFixed(1) + " " + start.y.toFixed(1) + ")"); if (!routeLength) { packageMarker.setAttribute("transform", "translate(" + packageDestination.x.toFixed(1) + " " + packageDestination.y.toFixed(1) + ")"); return; } const duration = 620; const startedAt = performance.now(); function movePackage(now) { const progress = Math.min((now - startedAt) / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const point = route.getPointAtLength(routeLength * eased); packageMarker.setAttribute("transform", "translate(" + point.x.toFixed(1) + " " + point.y.toFixed(1) + ")"); if (progress < 1) routeFrame = window.requestAnimationFrame(movePackage); else routeFrame = null; } routeFrame = window.requestAnimationFrame(movePackage); } const initialCountry = countryButtons.find(function (button) { return button.getAttribute("aria-pressed") === "true"; }); function setCountryMenuOpen(isOpen, returnFocus) { if (!countrySelectTrigger || !countryMenu) return; countrySelectTrigger.setAttribute("aria-expanded", String(isOpen)); countryMenu.hidden = !isOpen; if (returnFocus) countrySelectTrigger.focus(); } function selectMapCountry(countryId) { const button = countryButtons.find(function (option) { return option.dataset.countryId === countryId; }); if (!button) return; setCountryMenuOpen(false); setCountry(button); } if (countrySelectTrigger) { countrySelectTrigger.addEventListener("click", function (event) { setCountryMenuOpen(countrySelectTrigger.getAttribute("aria-expanded") !== "true"); }); } if (countrySelect) { countrySelect.addEventListener("keydown", function (event) { if (event.key !== "Escape" || !countryMenu || countryMenu.hidden) return; event.preventDefault(); setCountryMenuOpen(false, true); }); } document.addEventListener("focusin", function (event) { if (countrySelect && !countrySelect.contains(event.target)) setCountryMenuOpen(false); }); document.addEventListener("click", function (event) { if (countrySelect && !countrySelect.contains(event.target)) setCountryMenuOpen(false); }); widgetRoot.querySelectorAll(".map-land .map-country:not(.map-country--target)").forEach(function (path) { path.setAttribute("aria-hidden", "true"); }); countryPaths.forEach(function (path) { const button = countryButtons.find(function (option) { return option.dataset.countryId === path.dataset.countryId; }); if (!button) return; path.setAttribute("role", "button"); path.setAttribute("tabindex", "0"); path.setAttribute("aria-label", button.dataset.countryName + " auswählen"); path.addEventListener("click", function (event) { selectMapCountry(path.dataset.countryId); }); path.addEventListener("keydown", function (event) { if (event.key !== "Enter" && event.key !== " ") return; event.preventDefault(); selectMapCountry(path.dataset.countryId); }); }); countryLabels.forEach(function (label) { if (!countryButtons.some(function (button) { return button.dataset.countryId === label.dataset.countryId; })) return; label.addEventListener("click", function (event) { selectMapCountry(label.dataset.countryId); }); }); countryButtons.forEach(function (button) { button.addEventListener("click", function (event) { setCountry(button); setCountryMenuOpen(false, true); }); }); if (initialCountry) setCountry(initialCountry); widgetRoot.querySelectorAll(".delivery-toggle").forEach(function (button) { button.addEventListener("click", function () { const expanded = button.getAttribute("aria-expanded") === "true"; const panel = widgetRoot.querySelector("#" + button.getAttribute("aria-controls")); if (!panel) return; if (!expanded) { widgetRoot.querySelectorAll('.delivery-toggle[aria-expanded="true"]').forEach(function (openButton) { const openPanel = widgetRoot.querySelector("#" + openButton.getAttribute("aria-controls")); openButton.setAttribute("aria-expanded", "false"); openButton.setAttribute("aria-label", openButton.dataset.labelCollapsed); animateDetails(openPanel, false); }); } button.setAttribute("aria-expanded", String(!expanded)); button.setAttribute("aria-label", expanded ? button.dataset.labelCollapsed : button.dataset.labelExpanded); animateDetails(panel, !expanded); }); }); // Native disclosure buttons retain keyboard semantics and work without JavaScript. const pickupMaps = Array.from(widgetRoot.querySelectorAll('.pickup-map')); pickupMaps.forEach(function (dropdown) { dropdown.addEventListener('toggle', function () { if (dropdown.open) pickupMaps.forEach(function (other) { if (other !== dropdown) other.open = false; }); }); dropdown.addEventListener('keydown', function (event) { if (event.key === 'Escape' && dropdown.open) { dropdown.open = false; dropdown.querySelector('summary').focus(); } }); }); document.addEventListener('click', function (event) { pickupMaps.forEach(function (dropdown) { if (!dropdown.contains(event.target)) dropdown.open = false; }); }); // Preserve main-page anchor IDs; namespace additional ShopBuilder instances. if (instanceIndex > 0) { const ids = new Map(); const prefix = 'shipping-' + Date.now().toString(36) + '-' + instanceIndex + '-'; widgetRoot.querySelectorAll('[id]').forEach(function (element) { const original = element.id; let unique = prefix + original; while (document.getElementById(unique)) unique += '-copy'; ids.set(original, unique); element.id = unique; }); widgetRoot.querySelectorAll('*').forEach(function (element) { ['aria-controls', 'aria-labelledby', 'aria-describedby', 'for'].forEach(function (attribute) { const value = element.getAttribute(attribute); if (value) element.setAttribute(attribute, value.split(/\s+/).map(function (id) { return ids.get(id) || id; }).join(' ')); }); ['href', 'xlink:href'].forEach(function (attribute) { const value = element.getAttribute(attribute); if (value && value.charAt(0) === '#' && ids.has(value.slice(1))) element.setAttribute(attribute, '#' + ids.get(value.slice(1))); }); ['fill', 'stroke', 'filter', 'clip-path', 'mask', 'style'].forEach(function (attribute) { const value = element.getAttribute(attribute); if (value && value.includes('url(#')) element.setAttribute(attribute, value.replace(/url\(#([^)]*)\)/g, function (match, id) { return ids.has(id) ? 'url(#' + ids.get(id) + ')' : match; })); }); }); } }); }());