/* ========================= KACHING BUNDLES – Insert under Checkout Button - injiziert Bundle-Box direkt unter Checkout Button - add-to-cart via Shopify /cart/add.js ========================= */ /** Bundles Konfiguration (BITTE anpassen) */ const KC_BUNDLES_CONFIG = { enabled: true, // Wo finden wir den Checkout Button im Drawer? // -> Wenn es nicht greift, sag mir den Button-HTML oder ich passe es nach Screenshot/DOM an. checkoutButtonSelectors: [ "button[name='checkout']", "button[type='submit'][name='checkout']", "form[action*='/checkout'] button[type='submit']", "a[href*='/checkout']", ".kc-checkout button", ".kaching-checkout button", "[data-kc-checkout]", ], // Headline/Badge Texte (final nach Screenshot anpassen) headline: "Bundles", subline: "Spare mehr im Set", // Bundles: variantId = Shopify Variant ID (Zahl) // qty = Menge je Variante // compareAt / price optional nur für Anzeige (Screenshot-Style) bundles: [ { id: "bundle-1", title: "2er Bundle", subtitle: "Beliebt", discountText: "Spare 10%", items: [{ variantId: 11111111111111, qty: 2 }], priceText: "—", // optional Anzeige (z.B. "49,90 €") compareText: "", // optional Anzeige (z.B. "59,80 €") ctaText: "Zum Warenkorb hinzufügen" }, { id: "bundle-2", title: "3er Bundle", subtitle: "Bester Deal", discountText: "Spare 15%", items: [{ variantId: 11111111111111, qty: 3 }], priceText: "—", compareText: "", ctaText: "Zum Warenkorb hinzufügen" } ] }; /** Hilfsfunktion: Element anhand Selector-Liste finden */ function kcFindFirstInDocument(selectors) { for (const sel of selectors) { const el = document.querySelector(sel); if (el) return el; } return null; } function kcFindFirstInRoot(root, selectors) { for (const sel of selectors) { const el = root.querySelector(sel); if (el) return el; } return null; } /** CSS einmalig injizieren (wird nach Screenshot 1:1 angepasst) */ function kcEnsureBundlesStyles() { if (document.getElementById("kc-bundles-styles")) return; const style = document.createElement("style"); style.id = "kc-bundles-styles"; style.textContent = ` .kc-bundles-wrap{ margin-top: 12px; padding: 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; } .kc-bundles-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 10px; } .kc-bundles-head h3{ margin:0; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .02em; } .kc-bundles-head p{ margin:0; font-size: 12px; opacity: .7; } .kc-bundle{ border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px; display:flex; flex-direction:column; gap: 8px; } .kc-bundle + .kc-bundle{ margin-top: 10px; } .kc-bundle-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; } .kc-bundle-title{ display:flex; flex-direction:column; gap: 2px; } .kc-bundle-title strong{ font-size: 13px; line-height: 1.2; } .kc-bundle-title span{ font-size: 12px; opacity: .7; } .kc-bundle-badge{ font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); white-space: nowrap; } .kc-bundle-price{ display:flex; align-items:baseline; gap: 8px; } .kc-bundle-price .kc-price{ font-weight: 800; font-size: 13px; } .kc-bundle-price .kc-compare{ font-size: 12px; opacity: .55; text-decoration: line-through; } .kc-bundle-cta{ width:100%; border:0; border-radius: 10px; padding: 10px 12px; font-weight: 800; cursor:pointer; } .kc-bundles-error{ margin-top: 8px; font-size: 12px; color: #b00020; display:none; } `; document.head.appendChild(style); } /** Add bundle items to Shopify cart */ async function kcAddBundleToCart(bundle) { // Shopify AJAX API: /cart/add.js // Wir fügen mehrere Items in einem Request hinzu. const payload = { items: bundle.items.map(it => ({ id: Number(it.variantId), quantity: Number(it.qty || 1) })) }; const res = await fetch("/cart/add.js", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(payload) }); if (!res.ok) { let msg = "Bundle konnte nicht hinzugefügt werden."; try { const data = await res.json(); if (data && data.description) msg = data.description; } catch (_) { } throw new Error(msg); } // Optional: Kaching re-rendert meist automatisch; sonst triggern wir ein Event document.dispatchEvent(new CustomEvent("kc:bundle-added", { detail: bundle })); } /** UI unter Checkout Button einsetzen */ function kcEnsureBundlesUnderCheckout(root) { if (!KC_BUNDLES_CONFIG.enabled) return; kcEnsureBundlesStyles(); // Checkout Button im aktuellen Cart-Root suchen const checkoutBtn = kcFindFirstInRoot(root, KC_BUNDLES_CONFIG.checkoutButtonSelectors) || kcFindFirstInDocument(KC_BUNDLES_CONFIG.checkoutButtonSelectors); if (!checkoutBtn) return; // Wrapper nur einmal erstellen const existing = root.querySelector(".kc-bundles-wrap"); if (existing) return; const wrap = document.createElement("div"); wrap.className = "kc-bundles-wrap"; wrap.innerHTML = `

${KC_BUNDLES_CONFIG.headline}

${KC_BUNDLES_CONFIG.subline}

`; const list = wrap.querySelector(".kc-bundles-list"); const errorBox = wrap.querySelector(".kc-bundles-error"); KC_BUNDLES_CONFIG.bundles.forEach(bundle => { const el = document.createElement("div"); el.className = "kc-bundle"; el.dataset.bundleId = bundle.id; el.innerHTML = `

${bundle.title || ""} ${bundle.subtitle || ""}

${bundle.discountText ? `

${bundle.discountText}

` : ``}

${bundle.priceText ? `

${bundle.priceText}

` : ``} ${bundle.compareText ? `

${bundle.compareText}

` : ``}

`; const btn = el.querySelector(".kc-bundle-cta"); btn.addEventListener("click", async () => { errorBox.style.display = "none"; errorBox.textContent = ""; btn.disabled = true; const oldText = btn.textContent; btn.textContent = "Wird hinzugefügt..."; try { await kcAddBundleToCart(bundle); btn.textContent = "Hinzugefügt ✓"; setTimeout(() => { btn.textContent = oldText; btn.disabled = false; }, 900); } catch (e) { btn.textContent = oldText; btn.disabled = false; errorBox.textContent = e && e.message ? e.message : "Fehler beim Hinzufügen."; errorBox.style.display = "block"; } }); list.appendChild(el); }); // Direkt NACH dem Checkout Button platzieren checkoutBtn.insertAdjacentElement("afterend", wrap); } /** Beobachter: Kaching rendert oft dynamisch, deshalb laufen wir robust */ function kcInitBundlesFeature() { const root = kcFindRoot(); if (root) kcEnsureBundlesUnderCheckout(root); const mo = new MutationObserver(() => { const r = kcFindRoot(); if (r) kcEnsureBundlesUnderCheckout(r); }); mo.observe(document.documentElement, { childList: true, subtree: true }); } /* Starte Bundles Feature */ kcInitBundlesFeature();

Cerca