From b8f4454bea04dfa1a73113613d2df47517e75062 Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 20:00:51 +0200 Subject: [PATCH] Checkout-Fenster deutlich breiter; PayPal auf einen sauberen Button reduziert; Klarna verbindet automatisch bei Auswahl MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Das Zahlungsart/Kontakt-Fenster war unabsichtlich auf 560px begrenzt (geerbtes Formular-Limit von Kontakt-/Konto-Seite) — jetzt nutzt es die volle verfügbare Spaltenbreite (~820px statt 560px). - PayPal-Button zeigt jetzt nur noch den einen echten PayPal-Button statt zusätzlich einem redundanten "Debit- oder Kreditkarte"-Button (dafür gibt's ja schon die eigene Kreditkarte-Zahlungsart) — ein Klick auf die PayPal-Karte, ein Klick auf den einen PayPal-Button, direkt der echte Login-Popup. Mehr geht aus Sicherheitsgründen bei keinem Shop weltweit: PayPal öffnet den Login-Popup nur bei einem echten Klick auf ihr eigenes Button-Element, nie automatisiert per Skript (Schutz vor Missbrauch/Clickjacking). - Klarna verbindet jetzt automatisch, sobald die Karte ausgewählt wird — kein zusätzlicher Klick auf einen Verbinden-Button mehr nötig (Kreditkarte und Banküberweisung waren bereits ohne Extra-Klick). Verifiziert per Puppeteer: Formularbreite jetzt 820px (vorher 560px), Klarna verbindet automatisch beim Auswählen, keine Konsolenfehler. --- src/pages/ch/checkout/index.astro | 26 ++++++++++++++++---------- src/pages/checkout/index.astro | 26 ++++++++++++++++---------- src/pages/en/checkout/index.astro | 26 ++++++++++++++++---------- src/pages/fr/checkout/index.astro | 26 ++++++++++++++++---------- src/styles/global.css | 5 ++++- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro index b794b01..612f79d 100644 --- a/src/pages/ch/checkout/index.astro +++ b/src/pages/ch/checkout/index.astro @@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve if (paypalLoaded || !document.getElementById("paypal-button-container")) return; paypalLoaded = true; const script = document.createElement("script"); - script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture"; + script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture&disable-funding=card,credit"; script.onload = () => { if (!window.paypal) return; window.paypal.Buttons({ @@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht. const klarnaBtn = document.getElementById("klarna-connect"); const klarnaStatus = document.getElementById("klarna-status"); + function connectKlarna() { + if (!klarnaBtn || klarnaBtn.disabled) return; + klarnaBtn.disabled = true; + klarnaBtn.textContent = klarnaConnectingLabel; + setTimeout(() => { + klarnaBtn.textContent = klarnaConnectLabel; + klarnaBtn.disabled = false; + klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; + }, 1100); + } if (klarnaBtn) { - klarnaBtn.addEventListener("click", () => { - klarnaBtn.disabled = true; - klarnaBtn.textContent = klarnaConnectingLabel; - setTimeout(() => { - klarnaBtn.textContent = klarnaConnectLabel; - klarnaBtn.disabled = false; - klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; - }, 1100); - }); + klarnaBtn.addEventListener("click", connectKlarna); + const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]'); + // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick + // auf den Button nötig (der bleibt als "erneut verbinden" erhalten). + klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); }); } // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte, diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro index 4f9c7ac..5fb3144 100644 --- a/src/pages/checkout/index.astro +++ b/src/pages/checkout/index.astro @@ -211,7 +211,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi if (paypalLoaded || !document.getElementById("paypal-button-container")) return; paypalLoaded = true; const script = document.createElement("script"); - script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture"; + script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture&disable-funding=card,credit"; script.onload = () => { if (!window.paypal) return; window.paypal.Buttons({ @@ -231,16 +231,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht. const klarnaBtn = document.getElementById("klarna-connect"); const klarnaStatus = document.getElementById("klarna-status"); + function connectKlarna() { + if (!klarnaBtn || klarnaBtn.disabled) return; + klarnaBtn.disabled = true; + klarnaBtn.textContent = klarnaConnectingLabel; + setTimeout(() => { + klarnaBtn.textContent = klarnaConnectLabel; + klarnaBtn.disabled = false; + klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; + }, 1100); + } if (klarnaBtn) { - klarnaBtn.addEventListener("click", () => { - klarnaBtn.disabled = true; - klarnaBtn.textContent = klarnaConnectingLabel; - setTimeout(() => { - klarnaBtn.textContent = klarnaConnectLabel; - klarnaBtn.disabled = false; - klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; - }, 1100); - }); + klarnaBtn.addEventListener("click", connectKlarna); + const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]'); + // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick + // auf den Button nötig (der bleibt als "erneut verbinden" erhalten). + klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); }); } // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte, diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro index dedbcdf..c1946e4 100644 --- a/src/pages/en/checkout/index.astro +++ b/src/pages/en/checkout/index.astro @@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve if (paypalLoaded || !document.getElementById("paypal-button-container")) return; paypalLoaded = true; const script = document.createElement("script"); - script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture"; + script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture&disable-funding=card,credit"; script.onload = () => { if (!window.paypal) return; window.paypal.Buttons({ @@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht. const klarnaBtn = document.getElementById("klarna-connect"); const klarnaStatus = document.getElementById("klarna-status"); + function connectKlarna() { + if (!klarnaBtn || klarnaBtn.disabled) return; + klarnaBtn.disabled = true; + klarnaBtn.textContent = klarnaConnectingLabel; + setTimeout(() => { + klarnaBtn.textContent = klarnaConnectLabel; + klarnaBtn.disabled = false; + klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; + }, 1100); + } if (klarnaBtn) { - klarnaBtn.addEventListener("click", () => { - klarnaBtn.disabled = true; - klarnaBtn.textContent = klarnaConnectingLabel; - setTimeout(() => { - klarnaBtn.textContent = klarnaConnectLabel; - klarnaBtn.disabled = false; - klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; - }, 1100); - }); + klarnaBtn.addEventListener("click", connectKlarna); + const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]'); + // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick + // auf den Button nötig (der bleibt als "erneut verbinden" erhalten). + klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); }); } // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte, diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro index ec3a102..3d3d80e 100644 --- a/src/pages/fr/checkout/index.astro +++ b/src/pages/fr/checkout/index.astro @@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve if (paypalLoaded || !document.getElementById("paypal-button-container")) return; paypalLoaded = true; const script = document.createElement("script"); - script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture"; + script.src = "https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&intent=capture&disable-funding=card,credit"; script.onload = () => { if (!window.paypal) return; window.paypal.Buttons({ @@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht. const klarnaBtn = document.getElementById("klarna-connect"); const klarnaStatus = document.getElementById("klarna-status"); + function connectKlarna() { + if (!klarnaBtn || klarnaBtn.disabled) return; + klarnaBtn.disabled = true; + klarnaBtn.textContent = klarnaConnectingLabel; + setTimeout(() => { + klarnaBtn.textContent = klarnaConnectLabel; + klarnaBtn.disabled = false; + klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; + }, 1100); + } if (klarnaBtn) { - klarnaBtn.addEventListener("click", () => { - klarnaBtn.disabled = true; - klarnaBtn.textContent = klarnaConnectingLabel; - setTimeout(() => { - klarnaBtn.textContent = klarnaConnectLabel; - klarnaBtn.disabled = false; - klarnaStatus.textContent = "✅ " + klarnaConnectedLabel; - }, 1100); - }); + klarnaBtn.addEventListener("click", connectKlarna); + const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]'); + // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick + // auf den Button nötig (der bleibt als "erneut verbinden" erhalten). + klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); }); } // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte, diff --git a/src/styles/global.css b/src/styles/global.css index b670c38..2deabd0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -970,7 +970,10 @@ a:focus-visible, button:focus-visible { @media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } } /* Checkout */ -.checkout-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; } +.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; } +/* Das Checkout-Formular soll die volle Spaltenbreite ausnutzen — .frm hat sonst sitesweit ein + schmales max-width (passend für Kontakt/Konto), das hier ausdrücklich aufgehoben wird. */ +#checkout-form { max-width: none; } /* "1. Zahlungsart" und "2. Kontakt & Lieferadresse" nebeneinander statt gestapelt, getrennt durch eine dezente Verlaufslinie mit kleinem Garnrollen-Symbol in der Mitte — spielt auf