(function () { const API_BASE = "https://hd-spijlen.michel-abchekwerk.workers.dev"; const TARGET_SLUG = "/spijlendirect-compleet-pakket"; if (!location.pathname.includes(TARGET_SLUG)) return; console.log("[HD] configurator init"); function waitForProductForm(cb) { const maxTime = Date.now() + 15000; const iv = setInterval(() => { const form = document.querySelector('form[action*="cart"]'); const mount = document.getElementById("hd-configurator"); if (form && mount) { clearInterval(iv); cb(form, mount); } if (Date.now() > maxTime) { clearInterval(iv); console.warn("[HD] product form niet gevonden binnen timeout"); } }, 200); } waitForProductForm(async (productForm, mount) => { console.log("[HD] product form gevonden → configurator injecteren"); // 1️⃣ verberg standaard Lightspeed koopblok productForm.style.display = "none"; // 2️⃣ defaults (later uitbreidbaar) const DEFAULTS = { soortSpijlen: "Spijlen 25x25 vlak", hoeken: "0", muuraansluiting: "Geen", soortPalen: "Grondpalen", soortPaaldop: "Paalkap kunststof", }; const fmtEUR = (n) => new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" }).format(n); function getVatPref() { try { const v = localStorage.getItem("vat_type_pref") || ""; if (/excl/i.test(v)) return "excl"; if (/incl/i.test(v)) return "incl"; } catch {} return "incl"; } function roundingNote(m) { if (!isFinite(m) || m <= 0) return ""; const vakken = Math.ceil(m / 2.2); return `Wordt afgerond naar ${vakken} vak(ken) = ${(vakken * 2.2) .toFixed(1) .replace(".", ",")}m`; } // 3️⃣ opties ophalen const opt = await fetch(API_BASE + "/api/options").then(r => r.json()); if (!opt.ok) { mount.innerHTML = "

Configurator kon opties niet laden.

"; return; } const kleuren = opt.options.kleuren.filter(k => /7016|9005/.test(k)); const hoogtes = opt.options.hoogtes; // 4️⃣ UI renderen (theme-styling wordt automatisch overgenomen) mount.innerHTML = ` `; const elKleur = mount.querySelector("#hd-kleur"); const elHoogte = mount.querySelector("#hd-hoogte"); const elLengte = mount.querySelector("#hd-lengte"); const elRound = mount.querySelector("#hd-round"); const elBtn = mount.querySelector("#hd-calc"); const elPrice = mount.querySelector("#hd-price"); kleuren.forEach(k => elKleur.add(new Option(k, k))); hoogtes.forEach(h => elHoogte.add(new Option(h, h))); elLengte.oninput = () => { elRound.textContent = roundingNote(Number(elLengte.value)); }; elRound.textContent = roundingNote(10); async function quote() { elBtn.disabled = true; const cfg = { ...DEFAULTS, kleur: elKleur.value, hoogte: elHoogte.value, lengthM: Number(elLengte.value), }; const res = await fetch(API_BASE + "/api/quote", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ config: cfg }), }).then(r => r.json()); elBtn.disabled = false; if (!res.ok) { elPrice.textContent = "Prijs ophalen mislukt"; return; } const pref = getVatPref(); const main = pref === "excl" ? res.totalExcl : res.totalIncl; elPrice.innerHTML = ` ${fmtEUR(main)}
Incl. ${fmtEUR(res.totalIncl)} · Excl. ${fmtEUR(res.totalExcl)} `; } elBtn.onclick = quote; quote(); }); })();