{"title":"Beltop","description":"","products":[{"product_id":"hardtop-ford-ranger-doppelkabine-pickup-beltop-classic-ab-2023","title":"Hardtop Ford Ranger Doppelkabine Pickup beltop classic ab 2023","description":"\u003cp\u003e\u003cspan style=\"color: #000000;\"\u003eStandard-Ausführung:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan style=\"color: #000000;\"\u003ekabinenhohe Ausführung\u003c\/span\u003e\u003cbr\u003e\u003cspan style=\"color: #000000;\"\u003estarres Frontfenster\u003c\/span\u003e\u003cbr\u003e\u003cspan style=\"color: #000000;\"\u003eHeckklappe schwarz getönt (abschließbar)\u003c\/span\u003e\u003cbr\u003e\u003cspan style=\"color: #000000;\"\u003eLED-Innenleuchte (batteriebetrieben)\u003c\/span\u003e\u003cbr\u003e\u003cspan style=\"color: #000000;\"\u003eStandard-Farbe: weiß glänzend\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan style=\"color: #000000;\"\u003einkl. Montagematerial\u003cbr\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan style=\"color: #000000;\"\u003eHardtop passt nicht auf Ford Ranger MS-RT\u003c\/span\u003e\u003c\/p\u003e\n","brand":"Beltop","offers":[{"title":"Default Title","offer_id":53760467927367,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/01-Fahrerseite-Hardtop-Doppelkabine-Heck-fenster.png?v=1776855081"},{"product_id":"heckklappe-option","title":"Heckklappe Option","description":"\u003cdiv class=\"hardtop-configurator\"\u003e\n  \u003ch2\u003eHardtop Konfigurator: Ford Ranger (ab 2023)\u003c\/h2\u003e\n\n  \u003cdiv class=\"config-image-preview\" style=\"position: relative; width: 100%; max-width: 600px; height: 350px; margin: 0 auto 30px auto; background: #fdfdfd; border: 1px solid #eee; border-radius: 10px; overflow: hidden;\"\u003e\n    \n    \u003cimg id=\"layer-base\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Links_Fahrerseite.png?v=1776928245\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1;\" alt=\"Basis Auto\"\u003e\n    \n    \u003cimg id=\"layer-frontfenster\" src=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; display: none;\"\u003e\n    \n    \u003cimg id=\"layer-fahrerseite\" src=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 3; display: none;\"\u003e\n\n    \u003cimg id=\"layer-beifahrer\" src=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 3; display: none;\"\u003e\n    \n    \u003cimg id=\"layer-dachtrager\" src=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 4; display: none;\"\u003e\n  \u003c\/div\u003e\n\n  \u003cinput type=\"hidden\" id=\"base-product\" value=\"53766243942727\" data-price=\"179800\"\u003e\n\n  \u003cdiv class=\"config-grid\"\u003e\n    \n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e1. Fahrerseite\u003c\/label\u003e\n      \u003cselect id=\"opt-fahrerseite\" class=\"config-select\"\u003e\n        \u003coption value=\"53760660701511\" data-price=\"0\"\u003eStandard geschlossen (+ 0,00 €)\u003c\/option\u003e\n        \n        \u003coption value=\"53760660734279\" data-price=\"14900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-starresfenster-kurz.png\"\u003estarres Fenster kurz (+ 149,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760660767047\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-klappe-kurz.png\"\u003eSeitenklappe kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760660799815\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Schiebefenster-kurz.png\"\u003eSchiebefenster kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760660832583\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-klappe-kurz.png\"\u003eKlappfenster kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760660865351\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eSeitenklappe mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760660898119\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eKlappfenster mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e2. Beifahrerseite\u003c\/label\u003e\n      \u003cselect id=\"opt-beifahrer\" class=\"config-select\"\u003e\n        \u003coption value=\"53766159991111\" data-price=\"0\"\u003eStandard geschlossen (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160023879\" data-price=\"14900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-starresfenster-kurz.png\"\u003estarres Fenster kurz (+ 149,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160056647\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-klappe-kurz.png\"\u003eSeitenklappe kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160089415\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-BeiFahrerseite-Doppelkabine-Schiebefenster-kurz.png\"\u003eSchiebefenster kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160122183\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-klappe-kurz.png\"\u003eKlappfenster kurz (+ 299,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160154951\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eSeitenklappe mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766160187719\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eKlappfenster mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e3. Heckklappe\u003c\/label\u003e\n      \u003cselect id=\"opt-heckklappe\" class=\"config-select\"\u003e\n        \u003coption value=\"53760655098183\" data-price=\"0\"\u003egetöntes Glas (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53760655130951\" data-price=\"14800\"\u003eGFK Einsatz (+ 148,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e4. Frontfenster\u003c\/label\u003e\n      \u003cselect id=\"opt-frontfenster\" class=\"config-select\"\u003e\n        \u003coption value=\"53766167494983\" data-price=\"0\"\u003eFront geschlossen (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766167429447\" data-price=\"0\" data-img=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/hardtop-front-starres-fenster2.png?v=1776928502\"\u003estarres Frontfenster (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766167462215\" data-price=\"14800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/11\/hardtop-front-schiebefenster2.png\"\u003eFrontschiebefenster (+ 148,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e5. Farboption\u003c\/label\u003e\n      \u003cselect id=\"opt-farbe\" class=\"config-select\"\u003e\n        \u003coption value=\"53766177128775\" data-price=\"0\"\u003eweiß glänzend RAL9016 (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766177161543\" data-price=\"0\"\u003eschwarzgrau glänzend RAL7021 (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766177194311\" data-price=\"59800\"\u003eHardtop Wunschfarbe (+ 598,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766177227079\" data-price=\"79600\"\u003eHardtop \u0026amp; Seitenklappen in Wunschfarbe (+ 796,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766177259847\" data-price=\"99400\"\u003eHardtop \u0026amp; Seitenklappe in Wunschfarbe (+ 994,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e6. Dachträger Option\u003c\/label\u003e\n      \u003cselect id=\"opt-dachtrager\" class=\"config-select\"\u003e\n        \u003coption value=\"53766184272199\" data-price=\"0\"\u003eKeine Dachträger (+ 0,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766191251783\" data-price=\"14800\"\u003eSeitenverstärkung ohne Dachträger (+ 148,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766184173895\" data-price=\"29800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-dachrehling.png\"\u003eBeltop Dachreling (+ 298,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766184206663\" data-price=\"34800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Thule-dachtraeger.png\"\u003eThule Dachträgersystem (+ 348,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766191284551\" data-price=\"44600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-dachrehling.png\"\u003eBeltop Dachreling mit Seitenverstärkung (+ 446,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766184239431\" data-price=\"49800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-schwerlast.png\"\u003eBeltop Schwerlastsystem (+ 498,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766191317319\" data-price=\"49600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Thule-dachtraeger.png\"\u003eThule Dachträger mit Seitenverstärkung (+ 496,00 €)\u003c\/option\u003e\n        \u003coption value=\"53766191350087\" data-price=\"64600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-schwerlast.png\"\u003eBeltop Schwerlastsystem mit Seitenverstärkung (+ 646,00 €)\u003c\/option\u003e\n      \u003c\/select\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"config-footer\"\u003e\n    \u003cdiv class=\"config-total\"\u003e\n      Gesamtpreis: \u003cspan id=\"total-price-display\"\u003e1.798,00 €\u003c\/span\u003e\n    \u003c\/div\u003e\n    \u003cbutton id=\"add-to-cart-btn\" class=\"config-btn\"\u003eKonfiguration in den Warenkorb\u003c\/button\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n  .hardtop-configurator {\n    max-width: 800px;\n    margin: 2rem auto;\n    padding: 30px;\n    background: #fff;\n    border: 1px solid #e0e0e0;\n    border-radius: 12px;\n    box-shadow: 0 5px 25px rgba(0,0,0,0.1);\n    font-family: -apple-system, sans-serif;\n  }\n  .hardtop-configurator h2 { text-align: center; margin-bottom: 25px; color: #111; }\n  \n  .config-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n  }\n  @media (max-width: 600px) { .config-grid { grid-template-columns: 1fr; } }\n\n  .config-step { margin-bottom: 10px; }\n  .config-step label { display: block; font-weight: 600; margin-bottom: 8px; color: #444; }\n  .config-select {\n    width: 100%;\n    padding: 12px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    background: #fff;\n    font-size: 0.95rem;\n  }\n\n  .config-footer {\n    margin-top: 40px;\n    padding-top: 25px;\n    border-top: 2px solid #f5f5f5;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  @media (max-width: 600px) { .config-footer { flex-direction: column; text-align: center; gap: 20px;} }\n\n  .config-total { font-size: 1.6rem; font-weight: bold; color: #000; }\n  .config-btn {\n    padding: 18px 35px;\n    background: #000;\n    color: #fff;\n    border: none;\n    border-radius: 8px;\n    font-size: 1.1rem;\n    font-weight: bold;\n    cursor: pointer;\n    transition: 0.3s;\n  }\n  .config-btn:hover { background: #333; transform: scale(1.02); }\n  .config-btn:disabled { background: #999; cursor: not-allowed; }\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  \n  \/\/ Die drei Basis-Bilder (Perspektiven)\n  const linkBasisFahrer = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Links_Fahrerseite.png?v=1776928245\";\n  const linkBasisBeifahrer = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Rechts_Beifahrerseite.png?v=1776928234\";\n  const linkBasisFront = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/hardtop-front-leer-7021.webp?v=1776929167\";\n  \n  let aktuelleAnsicht = \"fahrerseite\"; \n  let nutzerHatInteragiert = false; \n\n  const baseProduct = document.getElementById('base-product');\n  const selects = document.querySelectorAll('.config-select');\n  const priceDisplay = document.getElementById('total-price-display');\n  const cartBtn = document.getElementById('add-to-cart-btn');\n  \n  \/\/ Bild-Layer Elemente\n  const layerBase = document.getElementById('layer-base');\n  const layerFahrer = document.getElementById('layer-fahrerseite');\n  const layerBeifahrer = document.getElementById('layer-beifahrer');\n  const layerFront = document.getElementById('layer-frontfenster');\n  const layerDach = document.getElementById('layer-dachtrager');\n\n  \/\/ Funktion: Ansicht wechseln\n  function setzeAnsicht(ansicht) {\n    nutzerHatInteragiert = true;\n    if (ansicht === \"fahrerseite\") {\n      aktuelleAnsicht = \"fahrerseite\";\n      layerBase.src = linkBasisFahrer;\n    } else if (ansicht === \"beifahrerseite\") {\n      aktuelleAnsicht = \"beifahrerseite\";\n      layerBase.src = linkBasisBeifahrer;\n    } else if (ansicht === \"frontansicht\") {\n      aktuelleAnsicht = \"frontansicht\";\n      layerBase.src = linkBasisFront;\n    }\n    updateImages();\n  }\n\n  \/\/ Event-Listener: Fahrerseite (Links-Perspektive)\n  const triggersFahrer = ['opt-fahrerseite', 'opt-dachtrager'];\n  triggersFahrer.forEach(id =\u003e {\n    const el = document.getElementById(id);\n    if(el) {\n      el.addEventListener('focus', () =\u003e setzeAnsicht('fahrerseite'));\n      el.addEventListener('change', () =\u003e setzeAnsicht('fahrerseite'));\n    }\n  });\n\n  \/\/ Event-Listener: Beifahrerseite (Rechts-Perspektive)\n  const elBeifahrer = document.getElementById('opt-beifahrer');\n  if(elBeifahrer) {\n    elBeifahrer.addEventListener('focus', () =\u003e setzeAnsicht('beifahrerseite'));\n    elBeifahrer.addEventListener('change', () =\u003e setzeAnsicht('beifahrerseite'));\n  }\n\n  \/\/ Event-Listener: Frontfenster (Front-Perspektive)\n  const elFront = document.getElementById('opt-frontfenster');\n  if(elFront) {\n    elFront.addEventListener('focus', () =\u003e setzeAnsicht('frontansicht'));\n    elFront.addEventListener('change', () =\u003e setzeAnsicht('frontansicht'));\n  }\n\n  function getSelectedImage(selectId) {\n    const sel = document.getElementById(selectId);\n    return (sel \u0026\u0026 sel.selectedIndex \u003e= 0) ? sel.options[sel.selectedIndex].getAttribute('data-img') : null;\n  }\n\n  \/\/ Funktion: Layer updaten (mit strikter Sichtbarkeitskontrolle)\n  function updateImages() {\n    if (!nutzerHatInteragiert) return; \/\/ Zu Anfang bleibt das Auto komplett leer\n\n    const imgFront = getSelectedImage('opt-frontfenster');\n    const imgFahrer = getSelectedImage('opt-fahrerseite');\n    const imgBeifahrer = getSelectedImage('opt-beifahrer');\n    const imgDach = getSelectedImage('opt-dachtrager');\n\n    \/\/ REGEL 1: FAHRERSEITE (von links)\n    if (aktuelleAnsicht === \"fahrerseite\") {\n      \/\/ Zeige Fahrerfenster und Dachträger\n      if (imgFahrer) { layerFahrer.src = imgFahrer; layerFahrer.style.display = 'block'; } else { layerFahrer.style.display = 'none'; }\n      if (imgDach) { layerDach.src = imgDach; layerDach.style.display = 'block'; } else { layerDach.style.display = 'none'; }\n      \n      \/\/ Verstecke die Frontscheiben-Ebene und Beifahrerseite\n      layerFront.style.display = 'none';\n      layerBeifahrer.style.display = 'none';\n    } \n    \n    \/\/ REGEL 2: BEIFAHRERSEITE (von rechts)\n    else if (aktuelleAnsicht === \"beifahrerseite\") {\n      \/\/ Zeige Beifahrerfenster\n      if (imgBeifahrer) { layerBeifahrer.src = imgBeifahrer; layerBeifahrer.style.display = 'block'; } else { layerBeifahrer.style.display = 'none'; }\n\n      \/\/ Verstecke alles von der Fahrerseite und die Frontscheibe\n      layerFront.style.display = 'none';\n      layerFahrer.style.display = 'none';\n      layerDach.style.display = 'none';\n    }\n\n    \/\/ REGEL 3: FRONTANSICHT (von vorne)\n    else if (aktuelleAnsicht === \"frontansicht\") {\n      \/\/ Zeige NUR die Frontscheibe\n      if (imgFront) { layerFront.src = imgFront; layerFront.style.display = 'block'; } else { layerFront.style.display = 'none'; }\n\n      \/\/ Verstecke alles von den Seiten\n      layerFahrer.style.display = 'none';\n      layerBeifahrer.style.display = 'none';\n      layerDach.style.display = 'none';\n    }\n  }\n\n  function refreshConfig() {\n    let total = parseInt(baseProduct.getAttribute('data-price') || 0);\n    selects.forEach(select =\u003e {\n      const selectedOption = select.options[select.selectedIndex];\n      total += parseInt(selectedOption.getAttribute('data-price') || 0);\n    });\n    priceDisplay.innerText = (total \/ 100).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });\n  }\n\n  selects.forEach(s =\u003e {\n    s.addEventListener('change', refreshConfig);\n  });\n\n  refreshConfig();\n\n  \/\/ Warenkorb-Logik\n  cartBtn.addEventListener('click', async function() {\n    cartBtn.innerText = \"Wird geprüft...\";\n    cartBtn.disabled = true;\n\n    const bundleId = \"Konfig-\" + Math.floor(Math.random() * 1000000);\n    let itemsToAdd = [{\n      id: baseProduct.value,\n      quantity: 1,\n      properties: { \"Konfig-ID\": bundleId, \"Typ\": \"Basis\" }\n    }];\n\n    selects.forEach(select =\u003e {\n      const val = select.value;\n      const label = select.previousElementSibling.innerText;\n      if (val) {\n        itemsToAdd.push({\n          id: val,\n          quantity: 1,\n          properties: { \"Konfig-ID\": bundleId, \"Option\": label }\n        });\n      }\n    });\n\n    try {\n      const response = await fetch('\/cart\/add.js', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ items: itemsToAdd })\n      });\n\n      if (response.ok) {\n        window.location.href = '\/cart';\n      } else {\n        const errorData = await response.json();\n        console.error(\"Shopify Fehler Details:\", errorData);\n        alert(\"Shopify meldet: \" + errorData.description + \"\\n\\nTipp: Prüfe im Shopify-Admin, ob wirklich alle gewählten Optionen auf 'Aktiv' stehen und einen Bestand haben.\");\n        cartBtn.disabled = false;\n        cartBtn.innerText = \"Konfiguration in den Warenkorb\";\n      }\n    } catch (error) {\n      console.error('Systemfehler:', error);\n      alert(\"Es gab ein technisches Problem beim Hinzufügen. Bitte lade die Seite neu.\");\n      cartBtn.disabled = false;\n      cartBtn.innerText = \"Konfiguration in den Warenkorb\";\n    }\n  });\n});\n\u003c\/script\u003e","brand":"Beltop","offers":[{"title":"getöntes Glas","offer_id":53760655098183,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"GFK Einsatz","offer_id":53760655130951,"sku":null,"price":148.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"fahrerseite-option","title":"Fahrerseite Option","description":"","brand":"Beltop","offers":[{"title":"Standard geschlossen","offer_id":53760660701511,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"starres Fenster kurz","offer_id":53760660734279,"sku":null,"price":149.0,"currency_code":"EUR","in_stock":true},{"title":"Seitenklappe kurz","offer_id":53760660767047,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Schiebefenster kurz","offer_id":53760660799815,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Klappfenster kurz","offer_id":53760660832583,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Seitenklappe mit Staukasten kurz","offer_id":53760660865351,"sku":null,"price":647.0,"currency_code":"EUR","in_stock":true},{"title":"Klappfenster mit Staukasten kurz","offer_id":53760660898119,"sku":null,"price":647.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"konfigurator","title":"Beltop Konfigurator","description":"\u003cdiv class=\"hardtop-configurator\"\u003e\n  \u003cdiv class=\"config-header\"\u003e\n    \u003ch2\u003eHardtop Konfigurator\u003c\/h2\u003e\n    \u003cp\u003eBitte wählen Sie Ihr Fahrzeugmodell und die gewünschten Optionen.\u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"config-image-preview\"\u003e\n    \u003cimg id=\"layer-base\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Links_Fahrerseite.png?v=1776928245\" class=\"config-layer layer-base\" alt=\"Basis Auto\"\u003e\n    \u003cimg id=\"layer-frontfenster\" src=\"\" class=\"config-layer layer-front\" style=\"display: none;\"\u003e\n    \u003cimg id=\"layer-fahrerseite\" src=\"\" class=\"config-layer layer-fahrer\" style=\"display: none;\"\u003e\n    \u003cimg id=\"layer-beifahrer\" src=\"\" class=\"config-layer layer-beifahrer\" style=\"display: none;\"\u003e\n    \u003cimg id=\"layer-dachtrager\" src=\"\" class=\"config-layer layer-dach\" style=\"display: none;\"\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"config-grid\"\u003e\n    \n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e1\u003c\/span\u003e Fahrzeugmodell\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-modell\" class=\"config-select\"\u003e\n          \u003coption value=\"53766419185991\" data-price=\"179800\"\u003eFord Ranger DOKA ab Baujahr 2023\u003c\/option\u003e\n          \u003coption value=\"53766419251527\" data-price=\"179800\"\u003eFord Ranger DOKA Baujahr 2012-2022\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e2\u003c\/span\u003e Fahrerseite\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-fahrerseite\" class=\"config-select\"\u003e\n          \u003coption value=\"53760660701511\" data-price=\"0\"\u003eStandard geschlossen (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660734279\" data-price=\"14900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-starresfenster-kurz.png\"\u003estarres Fenster kurz (+ 149,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660767047\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-klappe-kurz.png\"\u003eSeitenklappe kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660799815\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Schiebefenster-kurz.png\"\u003eSchiebefenster kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660832583\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-klappe-kurz.png\"\u003eKlappfenster kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660865351\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eSeitenklappe mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760660898119\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eKlappfenster mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e3\u003c\/span\u003e Beifahrerseite\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-beifahrer\" class=\"config-select\"\u003e\n          \u003coption value=\"53766159991111\" data-price=\"0\"\u003eStandard geschlossen (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160023879\" data-price=\"14900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-starresfenster-kurz.png\"\u003estarres Fenster kurz (+ 149,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160056647\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-klappe-kurz.png\"\u003eSeitenklappe kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160089415\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-BeiFahrerseite-Doppelkabine-Schiebefenster-kurz.png\"\u003eSchiebefenster kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160122183\" data-price=\"29900\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-Doppelkabine-klappe-kurz.png\"\u003eKlappfenster kurz (+ 299,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160154951\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eSeitenklappe mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766160187719\" data-price=\"64700\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/02-Beifahrerseite-1Doppelkabine-Staukasten-klappe-kurz.png\"\u003eKlappfenster mit Staukasten kurz (+ 647,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e4\u003c\/span\u003e Heckklappe\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-heckklappe\" class=\"config-select\"\u003e\n          \u003coption value=\"53760655098183\" data-price=\"0\"\u003eGetöntes Glas (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53760655130951\" data-price=\"14800\"\u003eGFK Einsatz (+ 148,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e5\u003c\/span\u003e Frontfenster\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-frontfenster\" class=\"config-select\"\u003e\n          \u003coption value=\"53766167494983\" data-price=\"0\"\u003eFront geschlossen (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766167429447\" data-price=\"0\" data-img=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/hardtop-front-starres-fenster2.png?v=1776928502\"\u003estarres Frontfenster (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766167462215\" data-price=\"14800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/11\/hardtop-front-schiebefenster2.png\"\u003eFrontschiebefenster (+ 148,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e6\u003c\/span\u003e Farboption\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-farbe\" class=\"config-select\"\u003e\n          \u003coption value=\"53766177128775\" data-price=\"0\"\u003eWeiß glänzend RAL9016 (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766177161543\" data-price=\"0\"\u003eSchwarzgrau glänzend RAL7021 (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766177194311\" data-price=\"59800\"\u003eHardtop Wunschfarbe (+ 598,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766177227079\" data-price=\"79600\"\u003eHardtop \u0026amp; Seitenklappen in Wunschfarbe (+ 796,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766177259847\" data-price=\"99400\"\u003eHardtop \u0026amp; Seitenklappe in Wunschfarbe (+ 994,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"config-step\"\u003e\n      \u003clabel\u003e\u003cspan\u003e7\u003c\/span\u003e Dachträger Option\u003c\/label\u003e\n      \u003cdiv class=\"select-wrapper\"\u003e\n        \u003cselect id=\"opt-dachtrager\" class=\"config-select\"\u003e\n          \u003coption value=\"53766184272199\" data-price=\"0\"\u003eKeine Dachträger (+ 0,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766191251783\" data-price=\"14800\"\u003eSeitenverstärkung ohne Dachträger (+ 148,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766184173895\" data-price=\"29800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-dachrehling.png\"\u003eBeltop Dachreling (+ 298,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766184206663\" data-price=\"34800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Thule-dachtraeger.png\"\u003eThule Dachträgersystem (+ 348,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766191284551\" data-price=\"44600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-dachrehling.png\"\u003eBeltop Dachreling mit Seitenverstärkung (+ 446,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766184239431\" data-price=\"49800\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-schwerlast.png\"\u003eBeltop Schwerlastsystem (+ 498,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766191317319\" data-price=\"49600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-Thule-dachtraeger.png\"\u003eThule Dachträger mit Seitenverstärkung (+ 496,00 €)\u003c\/option\u003e\n          \u003coption value=\"53766191350087\" data-price=\"64600\" data-img=\"https:\/\/www.beltop.de\/wp-content\/uploads\/2019\/12\/01-Fahrerseite-Doppelkabine-beltop-schwerlast.png\"\u003eBeltop Schwerlastsystem mit Seitenverstärkung (+ 646,00 €)\u003c\/option\u003e\n        \u003c\/select\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"config-footer\"\u003e\n    \u003cdiv class=\"price-box\"\u003e\n      \u003cspan class=\"price-label\"\u003eGesamtpreis\u003c\/span\u003e\n      \u003cspan class=\"config-total\" id=\"total-price-display\"\u003e1.798,00 €\u003c\/span\u003e\n      \u003cspan class=\"price-tax-info\"\u003einkl. MwSt., zzgl. Versand\u003c\/span\u003e\n    \u003c\/div\u003e\n    \u003cbutton id=\"add-to-cart-btn\" class=\"config-btn\"\u003e\n      \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"\u003e\u003ccircle cx=\"9\" cy=\"21\" r=\"1\"\u003e\u003c\/circle\u003e\u003ccircle cx=\"20\" cy=\"21\" r=\"1\"\u003e\u003c\/circle\u003e\u003cpath d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      In den Warenkorb\n    \u003c\/button\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n  .hardtop-configurator {\n    max-width: 850px;\n    margin: 3rem auto;\n    padding: 40px;\n    background: #ffffff;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0,0,0,0.06);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #333;\n  }\n  .config-header { text-align: center; margin-bottom: 35px; }\n  .config-header h2 { margin: 0 0 8px 0; font-size: 2rem; color: #111; font-weight: 800; }\n  .config-header p { margin: 0; color: #666; font-size: 1.1rem; }\n  .config-image-preview {\n    position: relative; width: 100%; height: 400px; margin: 0 auto 40px auto; \n    background: radial-gradient(circle, #ffffff 0%, #f0f2f5 100%);\n    border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;\n  }\n  .config-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }\n  .layer-base { z-index: 1; }\n  .layer-front { z-index: 2; }\n  .layer-fahrer { z-index: 3; }\n  .layer-beifahrer { z-index: 3; }\n  .layer-dach { z-index: 4; }\n  .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }\n  .config-step label { display: flex; align-items: center; font-weight: 600; margin-bottom: 10px; color: #111; font-size: 0.95rem; }\n  .config-step label span { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: #111; color: #fff; border-radius: 50%; font-size: 0.75rem; margin-right: 10px; }\n  .select-wrapper { position: relative; }\n  .config-select {\n    width: 100%; appearance: none; -webkit-appearance: none; background-color: #fff;\n    background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n    background-repeat: no-repeat; background-position: right 15px center; background-size: 16px;\n    padding: 16px 45px 16px 18px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 1rem; color: #333; cursor: pointer; transition: all 0.2s ease;\n  }\n  .config-select:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1); }\n  .config-footer { margin-top: 50px; padding: 30px; background: #f9fafb; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb; }\n  .price-box { display: flex; flex-direction: column; }\n  .price-label { font-size: 0.9rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }\n  .config-total { font-size: 2.2rem; font-weight: 800; color: #111; line-height: 1; }\n  .price-tax-info { font-size: 0.8rem; color: #9ca3af; margin-top: 6px; }\n  .config-btn { display: flex; align-items: center; justify-content: center; padding: 18px 40px; background: #111; color: #fff; border: none; border-radius: 12px; font-size: 1.15rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }\n  .config-btn:hover { background: #333; transform: translateY(-2px); }\n  @media (max-width: 768px) { .config-image-preview { height: 250px; } .config-footer { flex-direction: column; text-align: center; gap: 25px; } .config-btn { width: 100%; } }\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const linkBasisFahrer = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Links_Fahrerseite.png?v=1776928245\";\n  const linkBasisBeifahrer = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/Rechts_Beifahrerseite.png?v=1776928234\";\n  const linkBasisFront = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/hardtop-front-leer-7021.webp?v=1776929167\";\n  \n  let aktuelleAnsicht = \"fahrerseite\"; \n  let nutzerHatInteragiert = false; \n\n  const selects = document.querySelectorAll('.config-select');\n  const priceDisplay = document.getElementById('total-price-display');\n  const cartBtn = document.getElementById('add-to-cart-btn');\n  \n  const layerBase = document.getElementById('layer-base');\n  const layerFahrer = document.getElementById('layer-fahrerseite');\n  const layerBeifahrer = document.getElementById('layer-beifahrer');\n  const layerFront = document.getElementById('layer-frontfenster');\n  const layerDach = document.getElementById('layer-dachtrager');\n\n  function setzeAnsicht(ansicht) {\n    nutzerHatInteragiert = true;\n    if (ansicht === \"fahrerseite\") {\n      aktuelleAnsicht = \"fahrerseite\";\n      layerBase.src = linkBasisFahrer;\n    } else if (ansicht === \"beifahrerseite\") {\n      aktuelleAnsicht = \"beifahrerseite\";\n      layerBase.src = linkBasisBeifahrer;\n    } else if (ansicht === \"frontansicht\") {\n      aktuelleAnsicht = \"frontansicht\";\n      layerBase.src = linkBasisFront;\n    }\n    updateImages();\n  }\n\n  \/\/ Event Listener für Perspektivenwechsel\n  document.getElementById('opt-fahrerseite').addEventListener('focus', () =\u003e setzeAnsicht('fahrerseite'));\n  document.getElementById('opt-fahrerseite').addEventListener('change', () =\u003e setzeAnsicht('fahrerseite'));\n  document.getElementById('opt-dachtrager').addEventListener('focus', () =\u003e setzeAnsicht('fahrerseite'));\n  document.getElementById('opt-dachtrager').addEventListener('change', () =\u003e setzeAnsicht('fahrerseite'));\n  document.getElementById('opt-beifahrer').addEventListener('focus', () =\u003e setzeAnsicht('beifahrerseite'));\n  document.getElementById('opt-beifahrer').addEventListener('change', () =\u003e setzeAnsicht('beifahrerseite'));\n  document.getElementById('opt-frontfenster').addEventListener('focus', () =\u003e setzeAnsicht('frontansicht'));\n  document.getElementById('opt-frontfenster').addEventListener('change', () =\u003e setzeAnsicht('frontansicht'));\n\n  function getSelectedImage(selectId) {\n    const sel = document.getElementById(selectId);\n    return (sel \u0026\u0026 sel.selectedIndex \u003e= 0) ? sel.options[sel.selectedIndex].getAttribute('data-img') : null;\n  }\n\n  function updateImages() {\n    if (!nutzerHatInteragiert) return;\n    const imgFront = getSelectedImage('opt-frontfenster');\n    const imgFahrer = getSelectedImage('opt-fahrerseite');\n    const imgBeifahrer = getSelectedImage('opt-beifahrer');\n    const imgDach = getSelectedImage('opt-dachtrager');\n\n    if (aktuelleAnsicht === \"fahrerseite\") {\n      layerFahrer.style.display = imgFahrer ? 'block' : 'none'; if(imgFahrer) layerFahrer.src = imgFahrer;\n      layerDach.style.display = imgDach ? 'block' : 'none'; if(imgDach) layerDach.src = imgDach;\n      layerFront.style.display = 'none'; layerBeifahrer.style.display = 'none';\n    } else if (aktuelleAnsicht === \"beifahrerseite\") {\n      layerBeifahrer.style.display = imgBeifahrer ? 'block' : 'none'; if(imgBeifahrer) layerBeifahrer.src = imgBeifahrer;\n      layerFront.style.display = 'none'; layerFahrer.style.display = 'none'; layerDach.style.display = 'none';\n    } else if (aktuelleAnsicht === \"frontansicht\") {\n      layerFront.style.display = imgFront ? 'block' : 'none'; if(imgFront) layerFront.src = imgFront;\n      layerFahrer.style.display = 'none'; layerBeifahrer.style.display = 'none'; layerDach.style.display = 'none';\n    }\n  }\n\n  function refreshConfig() {\n    let total = 0;\n    selects.forEach(select =\u003e {\n      const selectedOption = select.options[select.selectedIndex];\n      total += parseInt(selectedOption.getAttribute('data-price') || 0);\n    });\n    priceDisplay.innerText = (total \/ 100).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });\n  }\n\n  selects.forEach(s =\u003e s.addEventListener('change', refreshConfig));\n  refreshConfig();\n\n  \/\/ WARENKORB LOGIK\n  cartBtn.addEventListener('click', async function() {\n    const originalBtnText = cartBtn.innerHTML;\n    cartBtn.innerHTML = \"Wird hinzugefügt...\";\n    cartBtn.disabled = true;\n\n    const bundleId = \"Konfig-\" + Math.floor(Math.random() * 1000000);\n    const modellSelect = document.getElementById('opt-modell');\n    \n    \/\/ Basismodell als Hauptprodukt\n    let itemsToAdd = [{\n      id: modellSelect.value,\n      quantity: 1,\n      properties: { \"Konfig-ID\": bundleId, \"Typ\": \"Basismodell\" }\n    }];\n\n    \/\/ Alle anderen Optionen (außer Modell selbst)\n    selects.forEach(select =\u003e {\n      if (select.id !== 'opt-modell' \u0026\u0026 select.value) {\n        const rawLabel = select.parentElement.previousElementSibling.innerText;\n        const cleanLabel = rawLabel.replace(\/^[0-9]+\\s*\/, '');\n        itemsToAdd.push({\n          id: select.value,\n          quantity: 1,\n          properties: { \"Konfig-ID\": bundleId, \"Option\": cleanLabel }\n        });\n      }\n    });\n\n    try {\n      const response = await fetch('\/cart\/add.js', {\n        method: 'POST', headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ items: itemsToAdd })\n      });\n      if (response.ok) { window.location.href = '\/cart'; } \n      else { \n        const errorData = await response.json();\n        alert(\"Shopify meldet: \" + errorData.description);\n        cartBtn.disabled = false; cartBtn.innerHTML = originalBtnText;\n      }\n    } catch (error) {\n      alert(\"Technischer Fehler. Bitte Seite neu laden.\");\n      cartBtn.disabled = false; cartBtn.innerHTML = originalBtnText;\n    }\n  });\n});\n\u003c\/script\u003e","brand":"Beltop","offers":[{"title":"Standard Modell","offer_id":53766243942727,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0977\/6801\/4151\/files\/01-Fahrerseite-Hardtop-Doppelkabine-Heck-fenster.png?v=1776855081"},{"product_id":"beifahrerseite-option","title":"Beifahrerseite Option","description":"","brand":"Beltop","offers":[{"title":"Standard geschlossen","offer_id":53766159991111,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"starres Fenster kurz","offer_id":53766160023879,"sku":null,"price":149.0,"currency_code":"EUR","in_stock":true},{"title":"Seitenklappe kurz","offer_id":53766160056647,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Schiebefenster kurz","offer_id":53766160089415,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Klappfenster kurz","offer_id":53766160122183,"sku":null,"price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Seitenklappe mit Staukasten kurz","offer_id":53766160154951,"sku":null,"price":647.0,"currency_code":"EUR","in_stock":true},{"title":"Klappfenster mit Staukasten kurz","offer_id":53766160187719,"sku":null,"price":647.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"frontfenster-option","title":"Frontfenster Option","description":"","brand":"Beltop","offers":[{"title":"starres Frontfenster","offer_id":53766167429447,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"Frontschiebefenster","offer_id":53766167462215,"sku":null,"price":148.0,"currency_code":"EUR","in_stock":true},{"title":"Front geschlossen","offer_id":53766167494983,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"farbe-option","title":"Farbe Option","description":"","brand":"Beltop","offers":[{"title":"weiß glänzend RAL9016","offer_id":53766177128775,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"schwarzgrau glänzend RAL7021","offer_id":53766177161543,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"Hardtop Wunschfarbe","offer_id":53766177194311,"sku":null,"price":598.0,"currency_code":"EUR","in_stock":true},{"title":"Hardtop \u0026 Seitenklappen (wenn gewählt) in Wunschfarbe","offer_id":53766177227079,"sku":null,"price":796.0,"currency_code":"EUR","in_stock":true},{"title":"Hardtop \u0026 Seitenklappen \u0026 Heckklappe (wenn gewählt) in Wunschfarbe","offer_id":53766177259847,"sku":null,"price":994.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"dachtrager-option","title":"Dachträger Option","description":"","brand":"Beltop","offers":[{"title":"Beltop Dachreling (max. 50kg dynamisch)","offer_id":53766184173895,"sku":null,"price":298.0,"currency_code":"EUR","in_stock":true},{"title":"Thule Dachträgersystem (max. 100kg dynamisch)","offer_id":53766184206663,"sku":null,"price":348.0,"currency_code":"EUR","in_stock":true},{"title":"Beltop Schwerlastsystem (max. 100kg dynamisch)","offer_id":53766184239431,"sku":null,"price":498.0,"currency_code":"EUR","in_stock":true},{"title":"keine Dachträger","offer_id":53766184272199,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true},{"title":"Seitenverstärkung ohne Dachträger (Dachlast max. 300 kg statisch)","offer_id":53766191251783,"sku":null,"price":148.0,"currency_code":"EUR","in_stock":true},{"title":"Beltop Dachreling mit Seitenverstärkung (may. 50 kg dynamisch)","offer_id":53766191284551,"sku":null,"price":446.0,"currency_code":"EUR","in_stock":true},{"title":"Thule Dachträger mit Seitenverstärkung (Dachlast max. 100 kg)","offer_id":53766191317319,"sku":null,"price":496.0,"currency_code":"EUR","in_stock":true},{"title":"Beltop Schwerlastsystem mit Seitenverstärkung (max. 300 kg statisch)","offer_id":53766191350087,"sku":null,"price":646.0,"currency_code":"EUR","in_stock":true}]},{"product_id":"modell-option","title":"Modell Option","description":"","brand":"Beltop","offers":[{"title":"Ford Ranger DOKA ab Baujahr 2023","offer_id":53766419185991,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true},{"title":"Ford Ranger Extracab ab Baujar 2023","offer_id":53766419218759,"sku":null,"price":1998.0,"currency_code":"EUR","in_stock":true},{"title":"Ford Ranger DOKA ab Baujahr 2012-2022","offer_id":53766419251527,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true},{"title":"Ford Ranger Extracab ab Baujahr 2012-2022","offer_id":53766419284295,"sku":null,"price":1998.0,"currency_code":"EUR","in_stock":true},{"title":"VW Amarok Doppelkabine 2010-2022","offer_id":53766454935879,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true},{"title":"Fiat Fullback Doppelkabine","offer_id":53766454968647,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true},{"title":"Isuzu DMAX Double Cab ab 2021","offer_id":53766455001415,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true},{"title":"Toyota Hilux Doppelkabine","offer_id":53766455034183,"sku":null,"price":1798.0,"currency_code":"EUR","in_stock":true}]}],"url":"https:\/\/aks-offroad.com\/collections\/beltop.oembed","provider":"Kruse Onlineshop","version":"1.0","type":"link"}