Checkout-Zahlungsarten: Karten klappen sofort beim Anklicken auf; HasiDog-Box zeigt Charaktertext & ist breiter
- Zahlungsart-Auswahl umgebaut: jede Karte (PayPal/Klarna/Kreditkarte/
Banküberweisung) klappt den passenden "Verbinden"-Bereich jetzt SOFORT
in sich selbst auf, sobald man draufklickt — kein Zwischenschritt, kein
separates Panel weiter unten mehr. Rein CSS-gesteuert (:has()), reagiert
augenblicklich auf den Klick.
- Unterkategorie-Vorstellungsbox (z.B. HasiDog) zeigt jetzt wieder den
persönlichen Charaktertext ("Ich bin klein, knuffig, wuschelig...")
statt der Produktbeschreibung, plus den Cliffhanger-Satz "Wenn du mehr
über mich erfahren möchtest, dann klicke" vor dem Button — für alle 6
Tier-Serien (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin). Foto und
Überschrift sind jetzt anklickbar und führen zur echten Produktseite,
damit trotz des reinen Charaktertexts nichts an Kaufbarkeit verloren
geht. Textspalte gegenüber Fotospalte verbreitert.
Verifiziert per Puppeteer gegen den echten Build: PayPal-Karte zeigt beim
Laden sofort den echten SDK-Button, Kreditkarte/Banküberweisung klappen
unmittelbar beim Klick auf (ohne Wartezeit geprüft), Bankdaten und
Charaktertext korrekt, keine Konsolenfehler.
This commit is contained in:
qcigano
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
|
||||
<div class="checkout-split-col">
|
||||
<h3>{t.checkout.step2}</h3>
|
||||
<div class="payment-options">
|
||||
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
|
||||
<span>PayPal</span>
|
||||
<input type="radio" name="pay" value="paypal" checked />
|
||||
</label>
|
||||
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
|
||||
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
|
||||
<span>Klarna</span>
|
||||
<input type="radio" name="pay" value="klarna" />
|
||||
</label>
|
||||
<label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
|
||||
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
|
||||
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
|
||||
</span>
|
||||
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
|
||||
<input type="radio" name="pay" value="kreditkarte" />
|
||||
</label>
|
||||
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
|
||||
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
|
||||
<span>{t.checkout.bankTransfer}</span>
|
||||
<input type="radio" name="pay" value="ueberweisung" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="pay-connect">
|
||||
<div class="pay-panel" data-panel="paypal">
|
||||
<p>{t.checkout.payPalHint}</p>
|
||||
<div id="paypal-button-container"></div>
|
||||
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
|
||||
<span>PayPal</span>
|
||||
<input type="radio" name="pay" value="paypal" checked />
|
||||
</label>
|
||||
<div class="pay-panel-inline">
|
||||
<p>{t.checkout.payPalHint}</p>
|
||||
<div id="paypal-button-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-panel" data-panel="klarna" hidden>
|
||||
<p>{t.checkout.klarnaHint}</p>
|
||||
<button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
<div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
|
||||
<span>Klarna</span>
|
||||
<input type="radio" name="pay" value="klarna" />
|
||||
</label>
|
||||
<div class="pay-panel-inline">
|
||||
<p>{t.checkout.klarnaHint}</p>
|
||||
<button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-panel" data-panel="kreditkarte" hidden>
|
||||
<p>{t.checkout.cardHint}</p>
|
||||
<div class="card-fields">
|
||||
<div>
|
||||
<label for="cc-number">{t.checkout.cardNumber}</label>
|
||||
<input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
|
||||
</div>
|
||||
<div class="grid grid-2">
|
||||
<div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
|
||||
<div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
|
||||
<div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
|
||||
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
|
||||
</span>
|
||||
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
|
||||
<input type="radio" name="pay" value="kreditkarte" />
|
||||
</label>
|
||||
<div class="pay-panel-inline">
|
||||
<p>{t.checkout.cardHint}</p>
|
||||
<div class="card-fields">
|
||||
<div>
|
||||
<label for="cc-number">{t.checkout.cardNumber}</label>
|
||||
<input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
|
||||
</div>
|
||||
<div class="grid grid-2">
|
||||
<div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
|
||||
<div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-panel" data-panel="ueberweisung" hidden>
|
||||
<p>{t.checkout.bankHintReal}</p>
|
||||
<div class="bank-details" id="bank-details"></div>
|
||||
<div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
|
||||
<span>{t.checkout.bankTransfer}</span>
|
||||
<input type="radio" name="pay" value="ueberweisung" />
|
||||
</label>
|
||||
<div class="pay-panel-inline">
|
||||
<p>{t.checkout.bankHintReal}</p>
|
||||
<div class="bank-details" id="bank-details"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
|
||||
renderSummary();
|
||||
landSelect.addEventListener("change", renderSummary);
|
||||
|
||||
// Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
|
||||
// Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
|
||||
const payPanels = document.querySelectorAll(".pay-panel");
|
||||
function showPayPanel(method) {
|
||||
payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
|
||||
}
|
||||
document.querySelectorAll('input[name="pay"]').forEach((radio) => {
|
||||
radio.addEventListener("change", () => showPayPanel(radio.value));
|
||||
});
|
||||
const initialPay = document.querySelector('input[name="pay"]:checked');
|
||||
if (initialPay) showPayPanel(initialPay.value);
|
||||
// Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
|
||||
// (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
|
||||
|
||||
// PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
|
||||
// kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
|
||||
|
||||
Reference in New Issue
Block a user