Standard-Set für deutsche Online-Shops recherchiert und umgesetzt: PayPal,
Klarna, Kreditkarte (Visa & Mastercard, neu) und Banküberweisung (Vorkasse).
- PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-
Client-ID, kostenlos & ohne Konto testbar). Klick öffnet den echten
PayPal-Login-Popup und schließt eine (Test-)Zahlung wirklich ab. Für den
Live-Betrieb genügt später der Tausch gegen VanVans echte (kostenlose)
PayPal-Business-Client-ID.
- Banküberweisung (Vorkasse): braucht gar keine externe Anbindung — zeigt
jetzt VanVans echte Kontodaten an, die sie im neuen Adminbereich-Feld
"🏦 Bankverbindung" selbst einträgt. Damit ist diese Zahlungsart schon
zu 100% fertig, ganz ohne Drittanbieter.
- Klarna & Kreditkarte: echte Live-Anbindung braucht ein Händlerkonto bzw.
einen Zahlungsdienstleister (Phase 2, Cloudflare Worker). Bis dahin ein
sauber gestalteter, funktionierender Verbindungs-/Eingabe-Ablauf, der
1:1 austauschbar ist, sobald die echten Zugänge da sind.
- Auswahl einer Zahlungsart klappt jetzt direkt das passende Panel auf
statt nur eine Radiobox zu markieren.
Verifiziert per Puppeteer-Funktionstest gegen den echten Build: PayPal-
SDK lädt und rendert einen echten Button (iframe), Kreditkartenfelder,
Klarna-Demo-Verbindung und echte Bankdaten-Anzeige funktionieren
fehlerfrei, Adminbereich lädt weiterhin ohne Konfigurationsfehler.
"1. Zahlungsart" und "2. Kontakt & Lieferadresse" stehen jetzt Seite an
Seite, getrennt durch eine dezente Verlaufslinie mit kleinem
Garnrollen-Symbol in der Mitte (Naht-Motiv, passend zu "Bastelbedarf").
Auf schmalen Bildschirmen fällt die Trennung automatisch zurück auf eine
horizontale Linie und die Spalten stapeln sich normal.
Zusätzlich Feinschliff an der Sidebar und der Bestellübersicht:
- Sidebar (Gutschein/Versandhinweis) bekommt einen farbigen Akzentstreifen
links und eine gestrichelte "genähte" Trennlinie statt einer nüchternen
durchgezogenen Linie, plus Lieferwagen-Icon vor "Versandhinweis".
- "Gesamt"-Zeile in der Bestellübersicht wie ein Kassenbon-Abriss
(gestrichelte Linie) mit dem Betrag in Marken-Verlaufsfarbe.
- Eigene, zum Radiobutton-Stil passende Checkbox-Optik für AGB/Widerruf
statt der nüchternen Browser-Standard-Kästchen.
Verifiziert per Puppeteer-Screenshot (Desktop + Mobile), keine
Konsolenfehler.
Icon-Kacheln bei PayPal/Klarna/Banküberweisung von 34px auf 52px vergrößert
und mit echten Marken-Farbverläufen statt flacher Einzelfarbe versehen
(PayPal-Blau, Klarna-Rosa mit schwarzem Logo, dezentes Bank-Blaugrau).
Auswahlkarten insgesamt größer, mit Verlaufshintergrund, größerem
Radio-Button und weicherem Hover-/Auswahl-Glow für einen fertigeren,
"aus einem Guss"-Look.
Der große blaue "Jetzt entdecken"-Button neben dem featured Produkt (z.B.
HasiDog) fällt weg. Der kleine Text-Link ("hier"/"here"/"da"/"ici" zur
externen HasiDog-Universum-Seite) ist jetzt selbst ein richtiger,
klickbarer Button statt eines unauffälligen Inline-Links.
Sveltia CMS unterstützt den alten "date"-Widget-Typ nicht mehr (wurde von
"datetime" mit ausgeblendeter Uhrzeit abgelöst). Betraf die beiden neuen
Ablaufdatum-Felder (Rabatt "bis" und Gutschein "bis") aus dem letzten
Commit — der komplette Adminbereich zeigte deswegen eine
Konfigurationsfehler-Seite statt dem Formular. Verifiziert per
Puppeteer-Test gegen den echten Build: Adminbereich lädt jetzt wieder
fehlerfrei.
- Neues Rabatt-System: Prozent-/Betrag-Rabatt mit optionalem Ablaufdatum,
Mengenrabatt-Staffel pro Produkt, sowie site-weite Gutscheincodes.
Wird live im Warenkorb/Checkout berechnet (src/data/rabatt.ts,
src/data/gutscheine.ts, cart.ts) und ist im Adminbereich direkt unter dem
Preis bearbeitbar (config.yml: "Rabatte" + neue Collection
"Gutscheincodes"). Effektiver Preis + Rabatt-Badge auf Produktkarten und
Produktseite sichtbar.
- Mengen-Stepper auf der Produktseite vergrößert (bereits vorbereitet,
jetzt mit Build/Test verifiziert).
- Zahlungsart im Checkout auf Platz 1, mit markenfarbigen, fertig
gestalteten Buttons (PayPal/Klarna/Banküberweisung).
- Unterkategorie-Seiten zeigen jetzt VanVans eigene Produktbeschreibung
und das echte Fotos des Produkts statt Platzhaltertext, mit kleinem
Link zur HasiDog-Universum-Seite statt großem Button.
Verifiziert per Puppeteer-Funktionstest gegen den echten Production-Build
(Rabatt-Berechnung, Mengenrabatt, Gutschein-Einlösung, Checkout-Summary,
keine Konsolenfehler).
- Farbschema/Schriftart der Website übernommen (Sveltias eigenes CSS-Variablen-
Theming-System genutzt: --sui-base-hue, --sui-primary-accent-color* auf den
Türkis-Akzent + Lila-Grundton der Seite gesetzt, Inter-Schriftart)
- Eigenes Logo + Seitentitel "Van's Shop – Adminbereich" auf dem Login-Bildschirm
- Icons pro Bereich in der Seitenleiste (Produkte/Kategorien/Versandkosten)
- Zahlenfelder ohne die klobigen Browser-Spinner-Pfeile
- Produktformular neu geordnet nach natürlichem Ablauf: Fotos → Name →
Beschreibung → Preis/Bestand (mit klareren Erklärtexten) → Kategorie →
Auszeichnungen → weitere Detailangaben → Versand → interner Code
Neu:
- Produkte können eigene Versandkosten je Land (DE/AT/CH/LU) bekommen, gelten nur bei
Einzelkauf (genau 1 Stück von 1 Produkt)
- Versandkosten-Staffel nach Warenwert je Land, von VanVan im Adminbereich bearbeitbar
(neuer Bereich "Versandkosten-Staffel"), greift bei mehreren Produkten/Stück
- Versandkostenfrei ab 75 € gilt immer, unabhängig von Einzelkauf/Staffel
- Checkout berechnet und zeigt jetzt die echten Versandkosten live beim Länderwechsel an
Kritischer Bugfix (unabhängig vom neuen Feature entdeckt):
- Warenkorb- und Checkout-Skripte haben "import" innerhalb von define:vars-Skripten benutzt,
was Astro als IIFE rendert (kein ES-Modul) — das hat in der echten Live-Version die ganze
Zeit zu "Cannot use import statement outside a module" geführt, wodurch Warenkorb und
Checkout praktisch nie funktioniert haben. Behoben durch Trennung: define:vars-Skript setzt
nur Werte auf window, separates <script type="module"> mit den echten Imports liest sie aus.
Mit echtem End-to-End-Test verifiziert (Artikel in Warenkorb legen, Land wechseln, Summe
prüfen) statt nur Screenshot.
- Persönliche Vorstellung jedes DIY-Plushies-Charakters auf der jeweiligen
Unterkategorie-Seite (dezente Box im Kartenstil), inkl. eigener HasiDog-Seite
mit "Mehr über HasiDog"-Button
- Beschreibungstexte "DIY Plushies" und "Häkelzubehör" angepasst (Startseite +
Kategorieseiten, gemeinsame Datenquelle)
- Shop-Filter erweitert: Unterkategorien jetzt gruppiert unter ihrer Hauptkategorie
wählbar, inkl. Filterlogik
- Shop-Bannerbild jetzt auch auf allen Kategorie- und Unterkategorie-Seiten,
gleiche Größe/Abstände/Responsivität wie im Shop
- Keine Design-Änderung: bestehende Farben, Typografie, Karten, Buttons, Abstände
vollständig erhalten, alles fügt sich nahtlos ins bestehende Layout ein
- Alle Änderungen in DE/EN/CH/FR umgesetzt, Link-Audit durchgeführt
qcigano