Bisher waren nur Preis, Rabatt-% und ein paar Verhaltensregeln im CMS
editierbar — Namen, Vorteilstexte und die Teddy-Vergabe-Intervalle steckten
fest im Code. Jetzt ist pro Abo-Stufe (Klein/Mittel/Groß) direkt im
Adminbereich einstellbar:
- Name & Vorteilstext der Stufe, in allen 4 Sprachen einzeln
- Ob die Stufe aktuell überhaupt neu buchbar ist (bestehende Abonnent:innen
behalten ihre Vorteile trotzdem, im Kundenkonto wird die Stufe nur für neue
Buchungen ausgegraut mit "Derzeit nicht buchbar")
- Nach wie vielen Monaten es den kleinen/großen Teddy gibt (ersetzt die vorher
fest verankerten 6-/12-Monats-Abstände)
- Welches Produkt als "kleiner"/"großer" Teddy für die Prämien-Einlösung
verwendet wird (Produktauswahl statt festem Slug im Code)
Alle Berechnungen (Meilensteine, Fortschrittsanzeige) laufen jetzt komplett
über diese Admin-Werte statt über Konstanten im Code. Konto-Plan-Karten in
allen 4 Sprachen zeigen die admin-gepflegten Texte live an.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Drei Mitgliedschaftsstufen (Klein 4,99€/5%, Mittel 9,99€/10%, Groß 19,99€/20%)
mit automatischem Bestellrabatt und Teddy-Prämien nach Meilensteinen (12-Monats-
Rhythmus bzw. 6+12 bei Groß). Preise/Rabatte und alle Admin-Regeln (Kombinier-
barkeit mit anderen Rabatten, Fortsetzung bei Wiederanmeldung, Monate über
Stufen zusammenzählen, kostenloser Versand bei Prämie) sind über Decap CMS
einstellbar (src/content/abo-einstellungen.json).
Neuer "Mein Abo"-Bereich im Kundenkonto (6. Nav-Kachel) mit Plan-Vergleich,
Live-Status (Laufzeit, nächste Zahlung, Rabatt, Fortschritt bis zur nächsten
Prämie), Einlösen-Buttons für freigeschaltete Teddys, Kündigen/Wechseln sowie
einer übersetzten Benachrichtigungsliste. Dazu ein extra hervorgehobener
"Mein Abo verwalten"-Button neben Abmelden in der Kopfkarte.
Warenkorb/Checkout rechnen den Abo-Rabatt korrekt in die Summe ein und stellen
eingelöste Teddys als 0€-Gratisposition dar. Alles in 4 Sprachen (DE/EN/CH/FR).
Unterwegs zwei echte Bugs gefunden und behoben: addMonateISO() vermischte
lokale Zeit mit toISOString() (UTC) und verlor dadurch bei jeder Monats-
verlängerung reproduzierbar einen Tag; die Checkout-Positionsliste zeigte für
Gratis-Prämien fälschlich den vollen Preis statt 0€.
Wie beim Treuebonus gilt: Speicherung aktuell im localStorage des Geräts
(Phase 1) statt einer echten geräteübergreifenden Datenbank — folgt mit der
Zahlungsanbindung in Phase 2.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neue eigene Kiste "Treuebonus" im Kundenkonto (5. Nav-Tab, grüner Akzent)
zeigt den Fortschritt ("X von 10 Bestellungen") mit Fortschrittsbalken und
Restanzahl-Hinweis, nach Freischaltung eine Erfolgsmeldung mit Link zum
Warenkorb. Es zählen ausschließlich erfolgreich abgeschickte, bezahlte
Bestellungen (in Phase 1: jede erfolgreich abgeschlossene Demo-Bestellung
im Checkout) — abgebrochene Bestellungen zählen nie mit.
Sobald der Bonus aktiv ist, erscheint im Warenkorb ein Hinweis-Banner und
bei jedem Artikel eine Auswahl ("Für 20% Treuebonus auswählen") — es kann
immer nur EIN Artikel gewählt werden (Radiobutton-Verhalten über alle
Positionen hinweg). Der Rabatt fließt automatisch in Warenkorb- und
Checkout-Summe ein (neue treuebonusDiscount()-Funktion in scripts/cart.ts,
in totalDiscount() eingerechnet). Nach erfolgreichem Bestellabschluss wird
die Belohnung als eingelöst markiert und der Fortschrittszähler beginnt
wieder bei 0 — beides dauerhaft im Konto (localStorage, Phase 1) gespeichert
und eindeutig diesem Kundenkonto zugeordnet.
Neue Funktionen in scripts/account.ts: registriereAbgeschlosseneBestellung(),
setTreuebonusArtikel(), treuebonusEinloesen(), treueFortschritt(). Beide
Zustandsübergänge (Fortschritt zählen vs. Belohnung einlösen) end-to-end
über den echten Checkout-Ablauf getestet und verifiziert.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neuer Button lädt die Rechnung als echte PDF-Datei herunter — komplett
clientseitig mit jsPDF + jspdf-autotable (beide MIT-lizenziert, per
dynamic import erst beim Klick nachgeladen, kein Einfluss auf die normale
Seitenladezeit). Zeigt exakt dieselben Daten wie der "Rechnung ansehen"-
Dialog (Rechnungsnummer/-datum, Verkäufer, Empfänger, Artikeltabelle,
Gesamtbetrag, §19-UStG-Hinweis), sauber formatiert mit Kopfzeile, zwei
Spalten für Verkäufer/Empfänger und einer echten Tabelle. Datei heißt
"Rechnung-<Bestellnummer>.pdf". Mit Node-Testskript verifiziert, dass die
PDF-Erzeugung fehlerfrei ein valides PDF mit korrekten Umlauten liefert.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Größeres Profilbild in der "Mein Konto"-Karte. Alle vier Navigations-
Knöpfe (Bestellungen/Offene Sendungen/Wunschliste/Meine Daten) haben jetzt
denselben besonderen Stil wie vorher nur "Meine Daten": wanderndes Verlaufs-
licht in der eigenen Akzentfarbe, pulsierender Glanzrand, funkelndes
Sternchen und Farbverlauf-Text — nur die Farbe unterscheidet sich pro
Knopf. Der "Meine Daten"-Inhaltsbereich (Profilkarte) bekommt dieselbe
"mega besondere" Behandlung wie die Begrüßungs-Karte (wandernder Verlaufs-
rand, Farbschein, Glanz-Sweep, Sternchen). Bestellkarten bekommen einen
passenden dezenten Glanz-Sweep und pulsierenden Schein in ihrer Status-
farbe für ein stimmigeres Gesamtbild.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die Zahl im "Bestellungen"-Kasten zeigte bisher alle Bestellungen, obwohl
der Tab selbst nur die angekommenen anzeigt. Jetzt stimmen Zahl und Liste
überein. "Offene Sendungen" zählt entsprechend alles, was noch nicht
abgeschlossen ist (nicht nur "versendet"), passend zum Tab-Filter.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der bisherige "Rechnung (PDF)"-Knopf war ein toter Link (href="#"). Jetzt
öffnet "Rechnung ansehen" pro Bestellung ein natives Dialog-Fenster direkt
auf der Seite mit vollständiger Rechnung: Rechnungsnummer/-datum,
Verkäufer, Rechnungsempfänger (live mit dem aktuellen Kontonamen befüllt),
Artikeltabelle mit Einzel-/Gesamtpreisen und dem §19-UStG-Hinweis — kein
Herunterladen nötig, schließbar per Kreuz, Schließen-Knopf oder Klick auf
den abgedunkelten Hintergrund.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Wandernder Mehrfarb-Verlaufsrand, sanfter Farbschein im Hintergrund, ein
Glanz-Sweep, der regelmäßig durchläuft, ein pulsierender Leucht-Ring um
den Avatar und zwei funkelnde ✨-Sternchen — dieselbe Formsprache wie beim
"Meine Daten"-Knopf, nur größer und ruhiger für gute Lesbarkeit.
Respektiert prefers-reduced-motion.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher zeigte der Bestellungen-Tab ALLE Bestellungen (Überschneidung mit
"Offene Sendungen"). Jetzt ist es eine echte Trennung: "Bestellungen"
zeigt nur bereits angekommene/abgeschlossene, "Offene Sendungen" nur die
noch nicht angekommenen. Eigene Leermeldung, falls noch keine Bestellung
angekommen ist.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der echte Name war bisher versehentlich ebenfalls editierbar. Jetzt steht
er als reine Anzeige in derselben Tabelle wie E-Mail und Lieferadresse —
änderbar bleibt ausschließlich der optionale Benutzername (Spitzname).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Sanft wanderndes Mehrfarb-Verlaufslicht im Hintergrund, pulsierender
Glanzrand, funkelndes ✨-Sternchen und ein Farbverlauf-Text — hebt sich
jetzt deutlich von den anderen drei Knöpfen ab, ohne kitschig zu wirken.
Respektiert prefers-reduced-motion.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher war "Bestellungen" beim Öffnen der Seite automatisch aktiv. Jetzt
ist standardmäßig KEIN Knopf gedrückt — man muss selbst auswählen, was man
sehen möchte. Solange nichts angeklickt ist, steht direkt "Zuletzt
angesehen" da. "Meine Daten" ist jetzt ein vierter, gleichwertiger Tab-
Knopf (👤, goldener Akzent) statt permanent sichtbar — genau wie
Bestellungen/Wunschliste/Offene Sendungen erscheint das Profilformular
erst nach Klick.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die Schnellnav-Leiste sprang bisher nur zum Abschnitt (der Rest blieb
sichtbar). Jetzt sind es echte Filter-Tabs: Klick auf "Bestellungen" /
"Wunschliste" / "Offene Sendungen" blendet alle anderen Bereiche komplett
aus und zeigt nur den ausgewählten. "Offene Sendungen" filtert zusätzlich
innerhalb der Bestellungen auf noch nicht abgeschlossene. Der aktive Tab
bleibt farbig hinterlegt und unterstrichen erkennbar. Start-Ansicht:
Bestellungen-Tab aktiv.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die drei losen "Bestellungen/Wunschliste/Offene Sendungen"-Kästchen waren
nur Zahlen ohne Verbindung zu den Abschnitten weiter unten. Jetzt sind sie
eine zusammenhängende Leiste direkt über "Meine Bestellungen" — jedes
Segment ist ein echter Sprunglink zum passenden Abschnitt (📦 Bestellungen,
🩵 Wunschliste, 🚚 Offene Sendungen), mit eigener Akzentfarbe je Segment und
einem Hover-Unterstrich, der die Klickbarkeit deutlich macht.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher unterschied sich der Status nur durch eine kleine, ähnlich gefärbte
Pille — auf einen Blick kaum zu erkennen. Jetzt bekommt jede Bestellkarte
einen eigenen farbigen Rand plus dezenten Farbschein passend zum Status
(Blau = versendet/unterwegs, Grün = abgeschlossen/angekommen, Gold = in
Bearbeitung/Versand wird vorbereitet, Violett = bezahlt), zusätzlich ein
Icon direkt in der Status-Pille (🚚 unterwegs, ✅ angekommen, usw.) — genau
wie schon bei den Zahlungskarten im Checkout.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher gab es nur ein "Benutzername"-Feld, das überall (Begrüßung, Header,
Rezensionen) angezeigt wurde. Jetzt gibt es zwei getrennte Felder: einen
festen "Name" (Pflichtangabe, z.B. für Bestellungen) und einen optionalen
"Benutzername (Spitzname)" als Bonus, falls man lieber mit einem Spitznamen
statt dem echten Namen angezeigt werden möchte.
Überall, wo bisher nur der Benutzername angezeigt wurde (Header-Konto-Menü,
Begrüßung im Dashboard, Rezensions-Autorenname, "angemeldet als"-Hinweis),
gilt jetzt: Spitzname bevorzugt, sonst echter Name als Rückfalloption
(neue anzeigeName()-Hilfsfunktion in scripts/account.ts).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Jede Zahlungsart-Karte hat jetzt einen deutlich sichtbaren Farbschein in
der jeweiligen Markenfarbe (auch im Ruhezustand, nicht erst bei Hover),
einen feinen Farbstreifen am oberen Rand und einen dezenten Glanz-Sweep
beim Hover — wirkt hochwertiger/"geiler", bleibt aber gedeckt genug fürs
dunkle Gesamtdesign. Kreditkarte (Visa/Mastercard) bekommt einen eigenen
Gold-Akzent statt der bisherigen, kaum sichtbaren Farbe.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Nach Recherche zu den Markenrichtlinien von PayPal, Klarna, Visa und
Mastercard: Zahlungsoptionen im Checkout zeigen jetzt echte Markenlogos in
den offiziellen Farben (PayPal- und Klarna-Icon, Visa-Wortmarke auf Weiß,
Mastercard-Kreise in Rot/Orange unverändert nebeneinander) statt grober
Buchstaben-/Emoji-Platzhalter — genau die Verwendung, die die jeweiligen
Markenrichtlinien für die Kennzeichnung akzeptierter Zahlungsarten
vorsehen. Dieselbe PayPal-Grafik jetzt auch beim Social-Login auf der
Anmeldeseite statt eines schlichten "P".
Zusätzlich: Ein Vorschau-Link auf der Anmeldeseite meldet mit einem Demo-
Konto an und führt direkt zum Kundenbereich-Dashboard — bleibt dauerhaft
erreichbar, damit VanVan und wir jederzeit sehen können, wie der Bereich
für angemeldete Kund:innen aussieht, ohne das Formular jedes Mal
auszufüllen.
Der Phase-1-Demo-Hinweis auf Checkout- und Anmeldeseite steht jetzt am
Ende der Seite statt direkt unter der Überschrift, damit zuerst der
fertige, professionelle Eindruck zählt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Nach Recherche zu üblichen Anmelde-Standards bei deutschen Online-Shops:
Ergänzt Social-Login-Buttons für Google, Apple und PayPal (PayPal explizit
wegen seiner Marktdominanz bei Zahlungen in DE/DACH), da Social Login
Registrierung/Login deutlich beschleunigt und laut Studien die Conversion
spürbar erhöht. Die Buttons sind noch nicht funktional (kein OAuth ohne
eigenes Backend) — ein Klick zeigt stattdessen ehrlich einen Phase-2-
Hinweis, statt eine Anmeldung vorzutäuschen.
Zusätzlich: Passwort-Sichtbarkeits-Toggle (Augen-Icon, eine der
wirkungsvollsten Login-UX-Verbesserungen laut UX-Recherche), "Angemeldet
bleiben"-Checkbox, sowie ein DSGVO-konformer Hinweis mit Link zur
Datenschutzerklärung unterhalb des Formulars. Gastbestellung ("Neu hier?")
war als gleichwertige Alternative schon vorhanden und bleibt bestehen —
Gastbestellung gilt laut EDPB-Empfehlung als Standard neben der freiwilligen
Registrierung.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Beim Einbau der Kundenbewertungen in den Shop-Filter (voriger Commit) landete
ein "import" mitten in einem define:vars-Skript, das aber gar keine Module
unterstützt. Dadurch brach das komplette Filter-Skript auf allen 4 Sprachen
mit einem SyntaxError ab, sobald es geladen wurde – Kategorie-Dropdown,
Mindestbewertung-Dropdown und Sortierung reagierten dadurch gar nicht mehr
auf Klicks. Die lokal gespeicherten Kundenbewertungen werden jetzt in einem
eigenen, echten Modul-Skript direkt danach eingerechnet.
Zusätzlich: horizontaler Scrollbalken im Dropdown-Menü entfernt (nur noch
vertikal scrollbar), wie gewünscht.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher musste VanVan Bewertungen manuell im CMS eintragen. Jetzt können
angemeldete Kund:innen Rezensionen direkt auf der Produktseite abgeben
(inkl. Herzen-Sternebewertung und Text). Die Durchschnittsbewertung wird
automatisch berechnet und überall live eingebunden: Produktkarten
(shop-weit), Produktdetailseite, Shop-Filter/Sortierung nach Bewertung
und die Kundenstimmen-Sektion auf der Startseite.
Neu dazu: ein Kontobereich fürs Login (Demo-Login per E-Mail), Profilfoto-
Upload, wählbarer Benutzername, und ein Header-Kontomenü, das nur bei
Anmeldung erscheint. Jede Bestellung im Konto-Dashboard hat einen
"Rezension schreiben"-Link, der direkt zur Produktseite führt und dort
per Bestellnummer verknüpft wird; im Profil ist dann sofort sichtbar,
welche Bestellungen schon bewertet wurden.
Technisch als reines Frontend/localStorage-System umgesetzt (kein Backend
in dieser Phase), analog zum bestehenden Warenkorb-Muster. Admin-CMS-Feld
für manuelle Bewertungen entfernt, da Rezensionen jetzt ausschließlich von
Kund:innen kommen (auch aus rechtlichen Gründen: keine Fake-Bewertungen).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Im Filter "Mindestbewertung" wurden bisher schlichte 🩵-Emojis angezeigt. Grund:
das war ein natives <select>, und in der browsereigenen Auswahlliste lassen
sich weder Farbverlaeufe noch eigene Grafiken darstellen - der Browser rendert
dort nur das System-Emoji in seiner festen hellblauen Farbe.
Ersetzt durch dasselbe eigene Dropdown, das schon der Kategorie-Filter nutzt.
Dadurch erscheinen jetzt die echten HeartRating-Herzen mit dem Marken-Verlauf
von Lila (--c-purple-glow) nach Babyblau (--c-accent) - auch im geschlossenen
Knopf, sobald eine Bewertung gewaehlt ist. Der Verlauf bekam zusaetzlich einen
weichen Zwischenton, damit er im kleinen Herz-Format nicht hart umschlaegt,
sondern wirklich wie eine Mischung beider Farben wirkt.
Die Dropdown-Logik ist dabei fuer BEIDE Filter zu einem gemeinsamen Code
zusammengefasst worden (statt zweimal fast dasselbe): beide verhalten sich
identisch, oeffnen sich gegenseitig zu, schliessen bei Klick daneben und bei
Escape - nur noch eine Stelle zum Pflegen.
Im Browser funktional geprueft: 5 Optionen, oeffnet/schliesst korrekt, 10
Verlaufsherzen in der Liste, Auswahl setzt den Filterwert und uebernimmt die
Herzen in den Knopf, gegenseitiges Schliessen funktioniert. Gilt fuer alle 4
Sprachen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
1. Neue Seite /konto/angemeldet/ (alle 4 Sprachen): zeigt, was Kund:innen nach
dem Anmelden sehen - Begruessung, Kennzahlen, Bestellhistorie mit farbigem
Bestellstatus, Sendungsverfolgung (echter DHL-Link), Rechnung/Nochmal-
bestellen, Wunschliste, "Zuletzt angesehen" und Profildaten. Klar als
Vorschau gekennzeichnet: es gibt noch kein echtes Login und keine Datenbank
(Phase 2), die Bestellungen sind Beispieldaten fuer die Gestaltung. Von der
Login-Seite aus verlinkt, damit die Ansicht ueberhaupt erreichbar ist.
2. "Ueber die Kreative": der erste Abschnitt ihrer Geschichte ("Meine Reise
begann mit einer einzigen Masche") steht jetzt direkt neben dem Foto statt
darunter. Foto bleibt beim Lesen sichtbar (sticky), die restlichen
Abschnitte folgen wie bisher darunter.
3. Kategorie-Seiten: der farbige Kreis um das Emoji bei "Hauptkategorie" ist
entfernt, das Emoji steht jetzt frei neben der Ueberschrift.
Dabei gefundener und behobener eigener Fehler: das noetige "align-items: start"
fuer das neue Nebeneinander-Layout hat im gestapelten Handy-Layout die
Grid-Zeile zu niedrig berechnet, wodurch das Foto 80px in den Text darunter
ragte (per Messung im Browser nachgewiesen, nicht nur per Screenshot geraten).
Jetzt sauber auf Bildschirme ab 901px begrenzt - Handy misst 24px Abstand.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neue HeartRating-Komponente (Herzen statt Sterne, Lila-Babyblau-Verlauf wie
der Rest der Markenoptik) + komplettes Rezensions-System:
- Produktkarten: Bewertungszeile (Herzen + Anzahl) unter dem Titel, nur wenn
Bewertungen vorhanden sind.
- Produktseite: volle "Kundenrezensionen"-Sektion mit Durchschnitt und
einzelnen Rezensionen (Name, Herzen, Datum, Text) bzw. "Noch keine
Bewertungen"-Hinweis.
- Shop-Filter: neuer "Mindestbewertung"-Filter im Filter-Sidebar + neue
Sortierung "Beste Bewertung".
- Startseite: "Was unsere Kund:innen sagen"-Sektion mit Gesamtbewertung und
den 3 neuesten Rezensionen - erscheint automatisch, sobald die erste echte
Bewertung existiert.
- Adminbereich: neues Feld "Bewertungen" pro Produkt (Name/Herzen/Text/Datum),
mit deutlichem Hinweis, dass hier nur echte Kundenrueckmeldungen eingetragen
werden duerfen - erfundene Bewertungen sind in Deutschland/der EU gesetzlich
verboten (UWG). Deshalb bewusst OHNE Beispiel-Bewertungen im Code: alle
Bereiche starten leer und blenden sich automatisch ein, sobald VanVan die
erste echte Rezension eintraegt.
Mit temporaeren Testdaten end-to-end durchgetestet (Herzen-Darstellung,
Rezensions-Section, Filter, Startseiten-Sektion) und vor dem Commit wieder
aus den echten Produktdaten entfernt. Gilt fuer alle 4 Sprachen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die zwei ueberlappenden Kreise (Visa/Mastercard-Anmutung) beim
Kreditkarte-Zahlungsoption wirkten wie ein fremdes Marken-Logo statt einem
neutralen eigenen Icon. Ersetzt durch ein schlichtes SVG-Kartensymbol, im
gleichen Stil wie die anderen Zahlungsarten-Icons (PayPal/Klarna).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Zwei Fotos betroffen:
1. "Ueber die Kreative"-Seite: eine alte, spezifischere CSS-Regel
(.intro .portrait-frame.portrait img) hat lautlos die bereits einmal
gefixte 2:3-Bildkorrektur wieder auf 1:1 zurueckgesetzt (per Computed-
Style-Debug bestaetigt: ratio war 1/1 statt 2/3). Diese Regel stammte aus
einem laengst ersetzten Layout (Foto+Text nebeneinander), das nirgends
mehr benutzt wird, ausser eben ungewollt hier durch geteilte Klassennamen.
aspect-ratio aus dieser Regel entfernt, die 2/3-Regel greift jetzt wieder.
2. Startseite "Die Kreative"-Bereich (vanvan-portrait.png, 1122x1402 ≈ 4/5):
nutzte noch die allgemeine 1:1-Regel und schnitt das Foto ebenfalls
quadratisch zu. Eigenes Seitenverhaeltnis (4/5) ergaenzt, width/height
Attribute korrigiert (640x800 statt 640x640) fuer korrekte Bildproportion
schon vor dem CSS-Laden.
Per Screenshot auf Desktop und Mobil verifiziert: beide Fotos jetzt komplett
sichtbar, inkl. Oktopus- und Schildkroeten-Plushie.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der native <select> mit optgroups zeigte Kuh/Hase/Wal/Oktopus/Schildkroete/
Pinguin zwar technisch an, aber in der schmucklosen Browser-eigenen Liste
kaum erkennbar (kein Kontrast, keine Struktur). Ersetzt durch ein eigenes,
zum Rest der Seite passendes Dropdown (Verlaufsrand-Look wie beim
Sprach-Umschalter): Hauptkategorien mit Icon als Gruppen-Header, Tier-
Unterkategorien darunter eingerueckt mit denselben freundlichen Namen wie auf
den Kategorie-Seiten ("Kuh „Frieda"", "Hase „HasiDog"" usw.) statt schlichtem
Kategorienamen. Filterlogik, URL-Preset (?kategorie=) und Barrierefreiheit
(role=listbox/option, aria-selected) unveraendert erhalten. Gilt fuer alle 4
Sprachen, gebaut und per Screenshot in offenem und geschlossenem Zustand
geprueft.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Beide Beschriftungen waren identisch schlichter grauer Kleinschrift-Text, kaum
von normalem Fliesstext zu unterscheiden. Jetzt: "Unterkategorien" bekommt ein
kleines Icon + zwei kurze Verlaufslinien als dezenten Trenner, "Hauptkategorie"
zusaetzlich einen Farbverlaufs-Icon-Kreis (Kategorie-Icon) und einen schmalen
Leucht-Trenner darunter, der die eigentliche Produktreihe einleitet - bewusst
mit den schon vorhandenen Marken-Verlaufsfarben statt neuer Effekte.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Auf Wunsch geprueft, was in den Rechtstexten laut Gesetz zwingend stehen muss
(unabhaengig von VanVans persoenlichen Daten, die weiterhin als Platzhalter
bleiben). Ergaenzt:
- Impressum: veraltete Rechtsgrundlage "§ 5 TMG" korrigiert zu "§ 5 DDG"
(Digitale-Dienste-Gesetz hat das TMG im Mai 2024 abgeloest).
- AGB § 4: Kreditkarte als Zahlungsart ergaenzt (ist seit heute im Checkout
echt waehlbar, fehlte aber noch im Rechtstext).
- AGB § 10: Pflicht-Vorbehalt fuer zwingende Verbraucherschutzvorschriften
bei Rechtswahl deutschen Rechts gegenueber EU-Verbraucher:innen (Art. 6
Rom-I-VO).
- Datenschutzerklaerung: fehlenden Pflichtabschnitt "Kontaktformular" als
eigenen Verarbeitungszweck ergaenzt, Widerrufsrecht der Einwilligung
(Art. 7 Abs. 3 DSGVO), Pflichthinweis zu automatisierter Entscheidungs-
findung/Profiling (Art. 22 DSGVO) und konkretere Beschwerderecht-Formulierung
(Art. 77 DSGVO) ergaenzt.
- Versand & Zahlung (alle 4 Sprachen): Pflichthinweis auf Schweizer
Einfuhrumsatzsteuer/Zollgebuehren bei CH-Lieferungen ergaenzt (Art. 246a
EGBGB verlangt vorvertragliche Information ueber Zusatzkosten) sowie
Kreditkarte in den Zahlungsarten.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Beim Durchgehen aller FAQ-Antworten gegen den tatsaechlichen Seiteninhalt
aufgefallen: Kreditkarte ist seit heute ein echtes, waehlbares Zahlungsmittel
im Checkout, fehlte aber noch in der FAQ und auf der Versand&Zahlung-Seite.
Ausserdem: Sendungsverfolgung wird auf der Konto-Seite genannt, fehlte aber in
der FAQ-Antwort zum Kundenkonto. Zusaetzlich professioneller/konkreter
formuliert, aber ausschliesslich mit bereits vorhandenen Infos (keine neuen
Behauptungen erfunden):
- Versandkosten-Frage verweist jetzt auf die Versand&Zahlung-Seite fuer die
Staffelung unterhalb der 75-Euro-Grenze.
- Pflege-Antwort nennt konkrete, handhäkel-typische Pflege (Handwaesche,
kein Trockner, liegend trocknen).
- Widerruf-Antwort nennt die 14-Tage-Frist explizit und den Hinweis "bei
Standardartikeln gilt es regulaer" (1:1 aus der Widerrufsbelehrung-Seite
uebernommen).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Standen bisher als freier Text neben dem Formular. Jetzt in einer eigenen Karte
mit demselben Verlaufsrand-Look wie der Rest der Seite, zusaetzlich mit einem
sanften Akzent-Glow (wie bei den Charakter-Story-Boxen) und kleinen Icons vor
den Ueberschriften, damit die wichtigen Kontaktinfos etwas mehr Aufmerksamkeit
bekommen, ohne aus dem Design zu fallen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh) zeigten die Story-Box
und die Platzhalterkarten darunter in zwei getrennten <section>-Bloecken -
dadurch addierten sich zwei section-Innenabstaende zu einem viel zu grossen
Zwischenraum (im Vergleich zur Hase-Seite, wo Story-Box und echte Produktkarte
in derselben Sektion stehen). Platzhalterkarten stehen jetzt in derselben
Sektion wie die Story-Box, Abstand ist ueberall einheitlich eng.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der letzte Commit hatte Story-Boxen komplett an ein zugeordnetes Produkt
gekoppelt - das entfernte zwar wie gewuenscht HasiGott/Mama Hase (Hase-Familie
hat bereits HasiDog als Produkt), loeschte aber ungewollt auch die Box des
Haupt-Charakters bei Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh).
Jetzt bekommt immer der erste/Haupt-Charakter einer Familie eine Story-Box,
zusaetzliche Charaktere weiterhin nur mit echtem Produkt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher wurden auf den Tier-Familien-Seiten Vorstellungsboxen für ALLE im Admin
angelegten Charaktere gezeigt, auch ohne zugeordnetes Produkt (z.B. HasiGott,
Mama Hase auf der Hase-Seite ohne echte Ware). Auf Wunsch entfernt: die
Story-Boxen erscheinen jetzt nur noch für Charaktere, denen im Admin auch
wirklich ein Produkt zugeordnet ist - genau wie die Shop-Karten darunter.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
"Über die Kreative" (und potenziell andere Menüpunkte) konnte bei
mittleren Fensterbreiten (zwischen ca. 860-1100px) in eine zweite Zeile
umbrechen — durch die kürzlich vergrößerte Kopfzeile plus den neuen
Installieren-Button wurde es dort schlicht zu eng für die Hauptnavi.
Fix: white-space:nowrap auf den Menüpunkten (bricht nie mehr um) +
den Umschaltpunkt zum Hamburger-Menü von 860px auf 1100px angehoben,
damit auf mittleren Breiten gar nicht erst versucht wird, alles
nebeneinander reinzuquetschen, sondern rechtzeitig auf das kompakte
Menü umgeschaltet wird. Geprüft: bei 1100px sauberer Wechsel zum
Hamburger-Menü, kein Umbruch und kein horizontaler Überlauf mehr bei
1150-1600px.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Badges ("NEU", "HANDGEMACHT" ...) sitzen direkt auf Produktfotos mit
unterschiedlichsten Hintergründen — die alte, sehr transparente Pille
ging auf manchen Fotos optisch unter. Gleiche Farben/gleicher Stil,
aber kräftigerer (deutlich weniger transparenter) Hintergrund + eigener
Rand + dezenter Schlagschatten hinterm Text für Kontrast auf jedem
Untergrund.
Den eigentlichen Grund für das wacklige Verhalten beim Installieren des
Admin-Bereichs gefunden: Sveltia CMS liest selbst den "logo"-Eintrag in
config.yml (eigentlich nur fürs Branding IN der CMS-Oberfläche gedacht)
und fügt daraus automatisch EIGENE Icon-/Manifest-Verknüpfungen in den
<head> ein — u.a. ein live generiertes, eigenes Manifest als blob:-URL
— NACH unseren eigenen. Zwei "rel=manifest"-Links gleichzeitig sind
technisch erlaubt, aber welcher beim Installieren gewinnt, war nicht
zuverlässig vorhersagbar. Das erklärt, warum es mal geklappt hat und
mal nicht, unabhängig vom Icon-Inhalt selbst.
Fix: ein MutationObserver entfernt Sveltias eigene, automatisch
eingefügte Icon-/Manifest-Verknüpfungen sofort wieder, sobald sie
auftauchen — übrig bleiben ausschließlich unsere eigenen (Favicon =
echtes Logo, Install-Icon = lila V). Verifiziert: nach vollständigem
Laden inkl. Sveltia sind nur noch unsere 5 eigenen Verknüpfungen im
<head> vorhanden, 0 Installability-Errors.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neue Reihenfolge: Kategorie → Auszeichnungen → Unterkategorie →
Charakter → Preis (danach unverändert wie bisher weiter). Reiner
Reihenfolge-Tausch, keine Felder inhaltlich verändert.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Klarstellung: Favicon (Browser-Tab, Lesezeichen) zeigt wieder das echte
VanVan-Logo, wie überall sonst auf der Seite. Nur das Icon, das beim
Installieren als App auf dem PC/Handy verwendet wird (icon-192/512 +
maskable-Varianten, apple-touch-icon), bleibt das eigens gestaltete
lila "V" von eben.
Dafür die favicon-16x16/32x32-Einträge aus beiden Web-App-Manifesten
entfernt (die enthielten noch das jetzt wieder logo-basierte Favicon)
— die Manifeste referenzieren jetzt ausschließlich die V-Icons, damit
beim Installieren garantiert nie versehentlich das Logo statt des V
gezogen wird. Erneut auf 0 Installability-Errors geprüft.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Das Foto-Karussell auf den Produktkarten (Shop-Grid, Startseite, Sale,
Charakter-Kacheln, "Weitere Modelle" — überall wo ProductCard.astro
verwendet wird) lässt sich jetzt zusätzlich zu den ‹/›-Pfeilen auch per
Wisch-Geste bedienen: Finger auf dem Handy oder Maus ziehen am PC.
Technisch über die Pointer-Events-API (deckt Touch UND Maus mit
derselben Logik ab). Ein Wisch zählt erst ab einer Mindeststrecke und
nur bei überwiegend horizontaler Bewegung, damit normales Scrollen der
Seite nicht versehentlich als Wisch missverstanden wird. Da die ganze
Karte ein Link ist, wird der nachfolgende Klick nach einem echten Wisch
unterdrückt — sonst würde man ungewollt zur Produktseite springen, nur
weil man durch die Fotos blättern wollte.
Gleiches Wischen jetzt auch auf der Produktdetailseite selbst, für das
große Hauptbild (springt zum nächsten/vorherigen Thumbnail).
Verifiziert: Wisch ändert das Bild UND verhindert nachweislich die
Navigation; normale Klicks navigieren weiterhin korrekt; die Pfeil-
Buttons funktionieren unverändert (kein Regressionsfehler).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Falls das Problem beim Installieren (falsches/generisches Icon) am
Foto-Logo lag, ersetzt dieses Icon-Set es testweise durch ein rein
vektoriell gezeichnetes "V"-Symbol — glänzender Lila-zu-Türkis-Verlauf
(exakt die Markenfarben --c-purple/--c-purple-glow/--c-accent der
Seite), abgerundetes App-Icon-Quadrat, weicher Farbschimmer im
Hintergrund für einen "premium" statt flachen Look. Kein Systemfont
nötig (komplett aus Formen gezeichnet), dadurch garantiert überall
identisch. Nebeneffekt: die Dateien sind jetzt auch viel kleiner (z.B.
512px-Icon: 39 KB statt vorher von einem 380-KB-Foto abgeleitet) —
falls die Dateigröße beim Installieren mit reinspielte, hilft das
zusätzlich.
Alle anderen Dateien (Manifest, Service Worker, Installations-Button)
unverändert — die Dateinamen blieben exakt gleich, nur der Bildinhalt
wurde ersetzt. Lokal erneut auf 0 Installability-Errors geprüft
(Chrome DevTools Protocol), sowohl Hauptseite als auch Adminbereich.
An der Cloudflare-Access-Sperre (Login-Pflicht für die ganze Seite)
wurde NICHTS geändert — die Seite bleibt genauso privat/unsichtbar
für Außenstehende wie bisher, nur das Icon selbst wurde ersetzt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Klarstellung zur gestrigen Änderung: die persönliche Vorstellung
("Hallo, ich bin Frieda...") ist reiner Text ohne Kaufversprechen und
wird jetzt wieder für JEDEN im Admin definierten Charakter gezeigt,
auch bevor ein passendes Produkt existiert (Frieda, Sam, Siggi, Gaby,
Pingi sind wieder mit ihrem echten Vorstellungstext auf ihren Seiten
zu sehen). Die "Mehr über mich"-Schaltfläche bleibt aber weiterhin nur
bei Charakteren mit hinterlegtem Link (aktuell nur HasiDog).
Die eigentliche Shop-Karte (Foto/Preis/Kaufinfos) bleibt dagegen streng
wie gestern festgelegt: die gibt es nach wie vor NUR für Charaktere mit
echtem, im Admin zugeordnetem Produkt — kein Vorstellungstext täuscht
mehr einen kaufbaren Artikel vor. Ohne Produkt erscheinen stattdessen
die bereits vorbereiteten, namenlosen "Kommt bald"-Karten darunter.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Wichtige Verhaltensänderung: ein Charakter (aus dem Kategorien-Bereich im
Admin) ist ab jetzt nur noch eine VORBEREITETE Definition. Er erscheint
auf der Seite NUR, wenn ihm im Admin tatsächlich ein Produkt mit genau
diesem Charakter-Code zugeordnet wurde (das Feld "Charakter" am
Produkt = seine "Rolle"). Ohne zugeordnetes Produkt taucht er nirgends
mehr auf — auch nicht mehr als Platzhalter-Karte mit seinem Namen.
Konkret: HasiGott und Mama Hase verschwinden von der Hase-Seite, weil
für sie (noch) keine Produkte im Admin angelegt wurden. Sobald VanVan
ein Produkt mit charakter: hasigott anlegt, erscheint er automatisch.
Familien ganz ohne Produkte (Kuh, Wal, Oktopus, Schildkröte, Pinguin)
zeigen weiterhin die bereits vorbereiteten, namenlosen "Kommt bald"-
Karten (unverändert) — nur die NAMENTLICHE Vorab-Anzeige einzelner
Charaktere ohne Produkt entfällt.
Zusätzlich: der "Mehr über mich"-Button in der Story-Box hatte keinen
erklärenden Text — man wusste nicht, wohin/wozu er führt. Jetzt steht
davor "Wenn du mehr über mich erfahren möchtest, dann klicke [hier →]"
in allen 4 Sprachen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Vollständige Prüfung der ganzen Website durchgeführt (auf Wunsch:
"nicht einen einzigen Fehler finden"): jede Seite mit Listen (Shop-
Grid, Startseite, Sale, Kategorie-/Unterkategorie-Seiten, Footer,
Navigation) zieht ihre Einträge bereits vollständig aus den
Admin-Inhalten (products/*.json, categories/*.json) — neue Produkte,
Kategorien, Unterkategorien und Charaktere erscheinen automatisch,
ohne dass Code angefasst werden muss. Mit einem echten Test bestätigt:
testweise eine komplett neue Unterkategorie samt Charakter angelegt
(wie VanVan es im Admin tun würde) → Seite erschien automatisch,
korrekt in allen 4 Sprachen, inkl. Eintrag auf der übergeordneten
Kategorie-Seite. Testdaten danach wieder exakt zurückgesetzt.
Einzige echte Lücke gefunden: das `bannerName`-Feld (aus dem letzten
Update, überschreibt die große Bannerüberschrift mit dem bekanntesten
Charakternamen) existierte zwar im Code/in den JSON-Dateien, aber
NICHT im Admin-Formular — ich hatte es bislang nur selbst direkt in
die Dateien geschrieben. VanVan hätte es also für neue Tier-Familien
nicht selbst setzen können. Jetzt als eigenes Feld "Name im großen
Banner oben (optional)" direkt unter dem normalen Namen der
Unterkategorie ergänzt, mit erklärendem Hinweistext.
Alle anderen Admin-Formulare (Produkte, Gutscheine, Partnercodes,
Versandkosten-Staffel, Bankverbindung) 1:1 gegen ihre Datenmodelle
geprüft — keine weiteren Lücken gefunden.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Analog zu "Hase" → "HasiDog" bekommen jetzt auch die restlichen fünf
Tier-Familien ihren Charakternamen als große Bannerüberschrift statt
des Artnamens: Kuh → Frieda, Wal → Sam, Oktopus → Siggi,
Schildkröte → Gaby, Pinguin → Pingi.
Die restliche Seitenstruktur (Story-Box + Kartenreihe) brauchte keine
Änderung — die Vorlage war schon vollständig datengetrieben und zeigt
automatisch für JEDE Familie mit Charakteren dieselbe Optik wie bei
Hase. Da bei diesen fünf Familien noch keine echten Produkte hinterlegt
sind, erscheint (wie bei HasiGott/Mama Hase auf der Hase-Seite auch)
nur die vorbereitete Platzhalter-Karte, aber noch keine Story-Box —
die blendet sich automatisch ein, sobald VanVan im Admin ein passendes
Produkt anlegt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
- Bannerüberschrift zeigt wieder "HasiDog" statt "Hase" (bannerName
erneut gesetzt).
- Die weiße "HasiDog"-Überschrift in der Story-Box darunter entfernt —
war doppelt, weil der cyanfarbene Obertitel ("Hallo, ich bin HasiDog.")
den Namen schon nennt. Das ist eine allgemeine Änderung an der
Story-Box-Vorlage (gilt für alle Charaktere/Familien, nicht nur Hase),
da die Überschrift überall strukturell redundant war.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die Icons/Manifeste waren schon vorbereitet, aber es gab keinen echten
Weg, die Installation auch zu STARTEN, ohne das kleine, leicht zu
übersehende Icon im Browser selbst zu suchen. Jetzt:
- Ein Service Worker (public/sw.js) ist Voraussetzung dafür, dass
Browser die Seite überhaupt als "installierbare App" erkennen. Bewusst
minimal gehalten: strikt "network-first" — bei bestehender Verbindung
wird IMMER zuerst das echte Netzwerk gefragt, der Cache dient nur als
Rückfalllösung, wenn wirklich keine Verbindung besteht. Dadurch besteht
KEIN Risiko, dass der Adminbereich veraltete Inhalte zeigt, während man
online ist — als Bonus funktionieren bereits besuchte Seiten aber auch
kurz offline (mit echtem Offline-Test geprüft).
- Neuer "Installieren"-Button direkt in der Kopfzeile (Hauptseite) bzw.
unten rechts (Adminbereich) — erscheint automatisch, sobald der
Browser eine Installation wirklich anbietet, verschwindet danach
wieder bzw. bleibt komplett versteckt, wenn schon als App installiert.
Ein Klick reicht, kein Suchen im Browser-Menü mehr nötig.
- Beide Bereiche (Hauptseite + Admin) nutzen dieselben, bereits
vorhandenen Logo-Icons/Manifeste — landet also mit dem echten
VanVan-Logo auf dem Startbildschirm/Desktop.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der Adminbereich hatte zwar schon einen Favicon-Link, aber kein eigenes
Web-App-Manifest — wer /admin/ als App installiert hat, bekam deshalb
ein automatisch generiertes Platzhalter-Icon statt des echten VanVan-
Logos (gleiches Problem wie zuvor schon auf der Hauptseite behoben).
Neues manifest.webmanifest für den Adminbereich verlinkt jetzt dieselben
Logo-Icons wie die Hauptseite (inkl. maskable-Varianten).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Logo, Markenname, Hauptnavigation, Sprachumschalter, Konto-/Warenkorb-
Icons sowie die zweite Kategorien-Leiste darunter sind jetzt insgesamt
etwas größer/luftiger (Schriftgrößen, Icon-Maße, Innenabstände moderat
erhöht) — wie gewünscht "bissl größer" statt eines kompletten Redesigns.
Dabei einen kleinen, durch die Vergrößerung ausgelösten Folgefehler
gleich mitbehoben: auf schmalen Handy-Breiten (<480px) hätte der neue,
größere Header nicht mehr komplett reingepasst und den Menü-Button (☰)
rechts aus dem sichtbaren Bereich geschoben, unerreichbar für Klicks.
Neue Media Query verkleinert dort gezielt Logo/Markentext und blendet
den Sprachumschalter-Text (bleibt nur der Globus) sowie den Pfeil aus —
geprüft: kein horizontales Überlaufen mehr bei 420px, 700px und
Desktop-Breite.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die Bannerüberschrift zeigte "HasiDog", direkt gefolgt von der
Story-Box, die den Namen nochmal als eigene Überschrift zeigt ("Hallo,
ich bin HasiDog. HasiDog ...") — wirkte doppelt. Banner zeigt jetzt
wieder den Familiennamen "Hase" (bannerName-Override entfernt, das
Feld selbst bleibt im Datenmodell bestehen, falls später mal gebraucht).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Fix: Auf der Haupt-Shop-Seite (/shop/) wirkten Produktkarten in derselben
Reihe unterschiedlich groß, je nachdem wie lang Titel/Beschreibung waren.
Ursache: jede Karte steckt dort zusätzlich in einem .product-slot-Div
(fürs Filtern/Sortieren per JS). CSS Grid streckt dieses Div zwar auf die
volle Zeilenhöhe, die Karte DARIN füllte diese Höhe aber nicht aus (ein
normales <div> reicht "stretch" nicht an sein Kind weiter). Jetzt ist
das Slot-Div selbst ein Flex-Container, wodurch sich die Karte darin auf
die volle Höhe ausdehnt — alle Karten einer Reihe sind jetzt exakt
gleich groß, unabhängig von der Textlänge.
Admin: "🚚 Eigene Versandkosten je Land" steht jetzt direkt unter
"🏷️ Rabatte" (vorher lag "Auf Lager" dazwischen).
Die "🤝 Partner-Rabattcodes" bereits vorhandene Sektion sitzt weiterhin
direkt unter "🎟️ Gutscheincodes" in der linken Bereichsliste (per
Screenshot verifiziert) — falls sie nicht sichtbar war, lag es an
gecachtem Admin-Tab, nicht an fehlender Konfiguration.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Mehrere Feinschliff-Punkte auf den Tier-Familien-Seiten (z.B. "Hase"):
- Abstand zwischen der Story-Box und der Kartenreihe verkleinert (vorher
durch zwei separate Section-Umrandungen unnötig groß) — beide Bereiche
teilen sich jetzt eine gemeinsame Section statt zwei gestapelte.
- Platzhalter-Karten (Charaktere ohne Foto) bekommen jetzt exakt die
gleiche Bildhöhe wie eine Karte mit echtem Foto (vorher griff nur die
allgemeine Mindesthöhe, wirkte kleiner/anders proportioniert).
- Neues optionales Feld `bannerName` an der Unterkategorie: überschreibt
NUR die große Bannerüberschrift (Breadcrumb/Chips bleiben unverändert)
— für "Hase" jetzt auf "HasiDog" gesetzt, den bekanntesten Charakter
der Familie.
- Unterkategorie-Seiten ganz ohne Produkte/Charaktere (z.B. Maschen-
markierer, Holzknöpfe) zeigen jetzt schon 3 vorbereitete Platzhalter-
Karten im selben Kartenstil statt nur einer nackten Textzeile — die
Seite "sieht schon fertig aus", auch bevor echte Produkte da sind.
Nebenbei einen Bug behoben: bei Unterkategorien ohne Charaktere, aber
MIT echten Produkten, erschien vorher zusätzlich fälschlich der
"noch keine Produkte"-Hinweis über der echten Produktreihe.
Neu: Mini-Bildkarussell direkt auf jeder Produktkarte (Shop-Grid,
Charakter-Kacheln, "Weitere Modelle", Sale-Seite, Startseite — überall
wo ProductCard verwendet wird). Sobald ein Produkt mehrere Fotos hat
(Admin-Bereich erlaubt das bereits über das Foto-Listenfeld), erscheinen
dezente ‹/›-Pfeile plus Punkte-Indikator direkt auf der Karte, ganz ohne
erst die Produktseite öffnen zu müssen.
Neu: Partner-Rabattcodes können im Admin jetzt gezielt auf "gilt NICHT
für Artikel, die schon im Sale sind" gestellt werden (giltAufSale:
false) — der Rabatt berechnet sich dann nur noch auf den regulär
bepreisten Teil des Warenkorbs, damit sich der Partner-Rabatt nicht
zusätzlich auf einen bereits reduzierten Preis obendrauf summiert.
Standardverhalten (Feld leer/true) bleibt wie bisher unverändert.
Alle Änderungen lokal mit Test-Daten durchgespielt (mehrere Testfotos,
Testprodukt im Sale + Partnercode mit/ohne giltAufSale, leere
Unterkategorie-Seite) und vor dem Commit wieder zurückgesetzt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neben dem allgemeinen Gutscheincode gibt es jetzt einen zweiten,
unabhängigen "Partner-Rabattcode"-Slot — für Codes, die VanVan gezielt
mit einzelnen Streamer:innen/Content-Creator:innen aushandelt. Kund:innen
lösen ihn genauso ein wie einen Gutschein (eigene, optisch identische Box
direkt unter dem Gutschein im Warenkorb bzw. im Checkout), beide Codes
können unabhängig voneinander gleichzeitig aktiv sein und ihre Rabatte
werden addiert (auf die Zwischensumme gedeckelt, damit der Preis nie
unter 0 € fällt).
Admin (Sveltia CMS): neuer Bereich "🤝 Partner-Rabattcodes", getrennt von
den allgemeinen Gutscheinen geführt. Pro Code lässt sich hinterlegen, zu
welcher Partnerin/welchem Partner er gehört (nur für VanVans eigene
Übersicht, wird Kund:innen nirgends gezeigt), Prozent- ODER Betrags-
Rabatt, optionales Ablaufdatum, ein "Aktiv"-Schalter zum Pausieren ohne
Löschen, sowie ein freies Notizfeld für die vereinbarten Konditionen
(z.B. Provision) — echtes automatisches Auswerten, wer wie oft welchen
Code einlöst, bräuchte ein eigenes Backend (Phase 2) und ist bewusst
nicht Teil dieser rein statischen Umsetzung.
Nebenbei einen bestehenden Bug behoben: die define:vars-Variablenliste
im Checkout-Skript war bei EN/CH/FR unvollständig (discountLabel,
couponInvalid, Klarna-/Bank-Texte fehlten) — dadurch wären dort Teile
der Checkout-Seitenleiste als "undefined" gerendert worden. Jetzt an
die vollständige Liste der DE-Version angeglichen.
Neu erstellte Dateien lokal mit Test-Codes durchgespielt (Gutschein +
Partnercode gleichzeitig eingelöst, Rabatte korrekt addiert, Admin-
Formular mit allen Feldern geprüft) und wieder auf leere Listen
zurückgesetzt vor dem Commit.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher wurde als Icon nur Astros Standard-Platzhalter-SVG (ein Pfeil-Symbol,
kein eigenes Branding) verlinkt. Weil kein Web-App-Manifest mit Icons
hinterlegt war, generierten Browser beim "Auf PC installieren" automatisch
einen Buchstaben-Kreis ("V") als App-Icon statt des echten Logos.
Aus dem vorhandenen public/logo.png automatisch alle nötigen Icon-Größen
erzeugt (favicon.ico mit 16/32/48px, Apple-Touch-Icon 180px, sowie 192px/
512px normal + eigene "maskable"-Varianten mit Weißraum-Sicherheitszone,
damit runde/eckige OS-Zuschnitte beim Installieren nicht den Rand des
Logos abschneiden). Neues manifest.webmanifest verlinkt alle Icons plus
Name/Theme-Farbe für die Installation. Layout.astro und der
Admin-Bereich verlinken jetzt überall das echte Logo statt des alten
Platzhalters.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die "Hallo, ich bin ..."-Box wirkte leer und generisch. Ohne Text zu
ändern, bekommt sie jetzt: ein großes, dezentes Anführungszeichen als
Wasserzeichen oben rechts (im Marken-Verlauf Cyan/Lila/Rosa), einen
sanften Farbschimmer rund um die ganze Box statt des flachen
Standard-Schattens, eine leicht verlaufsgefärbte Überschrift und einen
eigens gestalteten "hier"-Button im Akzent-Verlauf statt schlichtem
Outline-Rahmen (inkl. Hover-Anhebung). Bleibt ruhig/professionell,
fügt sich in den bestehenden Kartenstil der Seite ein.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher bekam jeder Charakter einer Tier-Familie (z.B. Hase) automatisch
seine eigene Story-Box, auch wenn für ihn noch gar kein Produkt existiert.
Das wirkte unfertig (z.B. HasiGott und Mama Hase zeigten volle
Persönlichkeitstexte, obwohl beide noch keine Produkte haben). Jetzt
erscheint die Story-Box nur noch für Charaktere mit mindestens einem
zugeordneten Produkt (aktuell also nur HasiDog). Die kompakten Karten
darunter (mit Platzhalter-Foto und "Produkte folgen bald") bleiben für
alle Charaktere sichtbar, damit die Familie als Ganzes trotzdem gezeigt
wird.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Das Feld für produktspezifische Versandkosten existierte bereits, war
aber kaum zu finden: es stand ganz unten im Formular (nach Lieferzeit)
und war zusätzlich hinter Sveltias "+ Add"-Checkbox versteckt (weil das
Objektfeld selbst required:false hatte). Jetzt direkt nach "Auf Lager"
platziert und ohne required:false auf dem Objekt, sodass die vier
Länder-Preisfelder sofort sichtbar sind, genau wie bei "Name" und
"Beschreibung". Hinweistext zusätzlich präzisiert (verweist jetzt
namentlich auf den Bereich "Versandkosten-Staffel").
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher stand die persönliche Charaktergeschichte (Hallo-ich-bin-Text)
direkt in derselben Karte wie Foto und Kaufinfos. Jetzt zweigeteilt:
- Oben: jede Geschichte in einer eigenen, vollen Breite Karte
(character-stories/.character-story), übereinander gestapelt.
- Darunter: eine Kartenreihe wie im Shop-Grid, die für Charaktere mit
echtem Produkt direkt die vorhandene ProductCard-Komponente wiederverwendet
(Foto, Badges, Preis, Kurzbeschreibung — 1:1 wie überall sonst im Shop),
für Charaktere ohne Produkt ein passender Platzhalter im gleichen
Kartenstil. Keine Geschichten mehr in dieser Reihe.
Verifiziert per Puppeteer: alle drei Geschichten-Boxen ohne Preis, alle
drei Shop-Karten ohne Geschichtstext, HasiDog-Karte zeigt echten Preis
(42,00 € durchgestrichen, 25,00 €) über die wiederverwendete ProductCard-
Komponente.
Die großen abwechselnden Foto/Text-Boxen (voller Formularbreite je
Charakter, viel Leerraum bei kurzem Text) sind ersetzt durch kompakte
Karten im exakt gleichen Stil wie die Produktkarten im Shop-Grid: Foto
oben, Text darunter in voller Kartenbreite, alle Charaktere einer Familie
nebeneinander in einer Reihe statt einzeln untereinander.
Betrifft alle Tier-Familien (Hase, Kuh, Wal, Oktopus, Schildkröte,
Pinguin) — wächst weiterhin automatisch mit, sobald neue Charaktere
ergänzt werden. Die "Über die Kreative"-Seite nutzt dieselbe .intro-
CSS-Klasse für ihr eigenes Layout und ist unangetastet geblieben.
Verifiziert per Puppeteer: alle drei Hase-Karten korrekt (Foto, Text,
Link), "Über die Kreative" weiterhin fehlerfrei und unverändert.
Auf den Tier-Familien-Seiten (z.B. /shop/diy-plushies/hase/) standen Foto
und Text bisher als freischwebende Elemente nebeneinander, ohne Rahmen.
Jetzt bekommen beide Seiten die gleiche Verlaufsrand-"Kisten"-Optik wie
die Produktkarten im Shop-Grid — zwei gleichwertige, gerahmte Boxen
nebeneinander statt unauffälligem Text neben einem randlosen Foto.
Zusätzlich: HasiDog (1. Charakter der Hase-Familie) hat jetzt den Text
links und das Foto rechts (vorher umgekehrt) — die Abwechslung für
weitere Charaktere (HasiGott, Mama Hase, ...) bleibt erhalten, nur die
Startseite ist gespiegelt.
Verifiziert per Puppeteer-Screenshot: alle drei Hase-Charaktere zeigen
jetzt beide Karten im Verlaufsrand-Stil, HasiDog korrekt mit Text links.
Innerhalb eines Portrait-Frames (z.B. Charakter-Box ohne zugeordnetes
Produkt wie HasiGott/Mama Hase) hatte der Platzhalter keinen Rahmen/Ring,
während echte Fotos schon den dunklen Ring + Akzent-Leuchtrand hatten
(.portrait-frame img). Jetzt bekommt .img-placeholder innerhalb eines
Portrait-Frames genau denselben Rahmen — behält dabei seine eigene
Flex-Zentrierung für den "Produktfoto folgt"-Text.
Verifiziert per Puppeteer: Platzhalter hat jetzt denselben box-shadow-
Ring wie echte Fotos, Textzentrierung (display:flex) bleibt erhalten.
.price-old hatte nur in ProductCard.astro (Produktkarten im Shop-Grid)
eine CSS-Regel — auf der Produktdetailseite fehlte sie sitesweit
komplett, der alte Preis stand deshalb dort einfach nur normal daneben
statt durchgestrichen zu sein. Jetzt global definiert, gilt überall.
Verifiziert per Puppeteer: text-decoration ist jetzt line-through.
Ursache gefunden: wenn der Lagerbestand komplett im Warenkorb war, bekam
der "In den Warenkorb"-Button den kompletten langen Hinweissatz als
Text ("Maximale verfügbare Menge ist bereits im Warenkorb"). Der Button
wurde dadurch riesig (3 Zeilen) und hat die danebenliegende
Mengen-Steuerung samt "+"-Button optisch verschluckt — auf schmalen
Bildschirmen war der "+" komplett unsichtbar.
Fix: Der Button bekommt jetzt eine kurze Beschriftung ("Bereits im
Warenkorb"), der ausführliche Satz steht weiterhin im separaten
Hinweistext darunter. Zusätzlich .qty-row jetzt mit flex-wrap
abgesichert, damit ein zu langer Button-Text künftig einfach umbricht
statt die Mengen-Steuerung zu überlagern.
Verifiziert per Puppeteer auf schmalem Viewport (420px): "+" jetzt
sichtbar und klickbar, Button zeigt Kurztext, Hinweis zeigt weiterhin
den vollen Satz.
Die Chip-Reihe war linksbündig statt zentriert und nutzte einfache
Einzelfarb-Pillen. Jetzt mittig auf der Seite und im selben
Verlaufsrand-Stil wie die Karten der Seite (cyan → lila → rosa,
sanftes Leuchten, Hover-Anhebung) — wirkt dadurch "speziell" und
markentypisch, bleibt aber ruhig genug für den professionellen
Gesamtlook.
Verifiziert per Puppeteer-Screenshot.
Missverständnis aus einer früheren Anfrage korrigiert: die Überschrift
zwischen den Unterkategorie-Chips und der Produktreihe sollte das Wort
"Hauptkategorie" zeigen (spiegelbildlich zur "Unterkategorien"-
Beschriftung darüber), nicht den Kategorienamen ("DIY Plushies")
wiederholen. Jetzt im exakt gleichen dezenten Stil wie
"Unterkategorien" — beide Beschriftungen sind jetzt visuell symmetrisch.
Verifiziert per Puppeteer: Seite zeigt "UNTERKATEGORIEN" und
"HAUPTKATEGORIE" als passendes Beschriftungs-Paar.
Seit der Umstellung auf "eine Seite pro Tier-Familie" hießen die Chips
nur noch generisch (Kuh, Hase, Wal, ...). Jetzt zeigen sie zusätzlich
den ersten/bekanntesten Charakter der Serie in Anführungszeichen — z.B.
"Hase „HasiDog"" — behalten dabei aber die neue Datenstruktur
(Subcategory.characters) bei, damit Familien mit mehreren Charakteren
(wie Hase: HasiDog, HasiGott, Mama Hase) technisch weiterhin
funktionieren.
Neue Helper-Funktion subcategoryChipLabel() in categories.ts, pro
Sprache mit den richtigen Anführungszeichen (DE/CH „...", EN "...",
FR « ... »).
Verifiziert per Puppeteer: alle 6 Chips zeigen exakt die gewünschten
Labels.
Die Checkboxen standen bisher außerhalb des Zwei-Spalten-Layouts, über
die volle Formularbreite. Jetzt stehen sie direkt im Anschluss an
"Gemäß §19 UStG..." in derselben (rechten) Spalte — wie gewünscht direkt
unter der Bestellübersicht statt separat darunter.
Verifiziert per Puppeteer-Screenshot (Desktop + schmale Ansicht).
- Produktseite: Mengen-Stepper und manuelle Eingabe sind jetzt auf den
tatsächlichen Lagerbestand begrenzt (zählt bereits im Warenkorb
liegende Menge desselben Produkts mit). Ist das Maximum schon
erreicht, wird der "In den Warenkorb"-Button deaktiviert und zeigt
"Maximale verfügbare Menge ist bereits im Warenkorb"; bei wenig Rest-
bestand (≤5) erscheint stattdessen "Nur noch X auf Lager".
- Warenkorb-Seite: der "+"-Button bei der Mengenauswahl ist ebenfalls auf
den Lagerbestand begrenzt.
- Als zusätzliche Absicherung greift das Limit jetzt auch direkt in
addToCart()/updateQuantity() selbst (cart.ts) — unabhängig davon,
welche Oberfläche die Funktion aufruft, kann so nie mehr Menge als
Bestand ins localStorage gelangen.
Verifiziert per Puppeteer an einem Produkt mit Bestand 2: 6× auf "+"
klicken bleibt bei 2, manuelles Eintippen von 999 wird auf 2 geklemmt,
nach dem Hinzufügen ist der Button deaktiviert, der "+"-Button im
Warenkorb erhöht nicht weiter — keine Konsolenfehler.
"3. Bestellübersicht" stand bisher als eigener Block über die volle
Formularbreite unterhalb beider Spalten. Jetzt steht sie direkt in der
rechten Spalte, gestapelt unter "2. Kontakt & Lieferadresse" — beide
Spalten (Zahlungsart links, Kontakt + Bestellübersicht rechts) füllen
dadurch die gemeinsame Karte deutlich ausgewogener.
Verifiziert per Puppeteer-Screenshot gegen den echten Build.
Die vorherige gestrichelte Linie wirkte noch zu "einfach nur Striche".
Jetzt fließt ein sanfter, an den Rändern ausblendender Verlauf in den
drei Marken-Farben (wie der Karten-Rand der Seite) über die volle
Breite, mit einem kleinen glänzenden Knopf in der Mitte — eine dezente
Anspielung auf's Nähen/Basteln, passend zur Marke, ohne aufdringlich zu
wirken.
Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
Passend zum "Bastelbedarf"-Charme: die Trennung zwischen Warenkorb-
Positionen ist jetzt ein gestrichelter Verlaufs-Stich in Marken-Akzent
und Lila statt einer kaum sichtbaren grauen 1px-Linie — fällt deutlich
mehr auf, bleibt aber dezent genug für den professionellen Rest der
Seite.
Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
Jeder Artikel im Warenkorb hat jetzt eine Checkbox "Jetzt kaufen". Nur
angehakte Artikel zählen zur Zwischensumme, zum Versand, zum Gutschein
und zum Checkout — abgewählte Artikel bleiben sichtbar (leicht
abgedunkelt, mit "Bleibt im Warenkorb, wird noch nicht gekauft"-Hinweis)
im Warenkorb liegen, ohne mitgekauft zu werden. Die Auswahl wird pro
Artikel gespeichert (localStorage) und bleibt bis zur nächsten Änderung
bestehen. Der Checkout übernimmt automatisch nur die ausgewählten
Artikel.
Verifiziert per Puppeteer: Abwählen eines Artikels reduziert Summe/
Rechnungsliste sofort korrekt, Checkout zeigt nur den ausgewählten
Artikel, keine Konsolenfehler.
Die Zwischensumme-Box zeigte bisher nur die Endsumme, ohne die
einzelnen Artikel aufzulisten. Jetzt steht dort — genau wie beim
Checkout — eine kompakte Rechnungsübersicht (Menge × Artikel →
Zeilenpreis) direkt über der Zwischensumme.
Verifiziert per Puppeteer mit zwei verschiedenen Artikeln im Warenkorb:
Positionsliste zeigt korrekte Mengen/Preise, keine Konsolenfehler.
Der Adminbereich nutzte für Überschriften bisher nur Inter (Sans-Serif),
während die eigentliche Website durchgängig Fraunces als markante
Serifenschrift für Überschriften verwendet (--font-head). Jetzt zieht
sich diese Schrift auch durch den Adminbereich — über die stabilen HTML-
Tags (h1/h2/h3) gesetzt statt über Sveltias interne, ungeschützte
Klassennamen, bleibt also robust gegen künftige Sveltia-Updates.
Verifiziert per Puppeteer: H1 nutzt jetzt "Fraunces, Playfair Display,
Georgia, serif", keine Konfigurationsfehler.
Bisher war jeder Charakter (HasiDog, Frieda, Sam, ...) eine eigene
Unterkategorie mit eigener Seite. Das passte nicht mehr, sobald eine
Familie mehrere Charaktere bekommt (HasiDog, HasiGott, Mama Hase) — die
sollten alle auf EINER Seite erscheinen, nicht auf drei getrennten.
Neues Modell:
- Unterkategorie = die ganze Tier-Familie (z.B. "hase", "kuh", "wal"),
nicht mehr ein einzelner Charakter.
- Jede Familie hat jetzt ein "characters"-Array (categories.ts,
config.yml) — beliebig viele Charaktere, jeder mit eigenem Namen,
Vorstellungstext und optionalem "Mehr über mich"-Link.
- Produkte bekommen ein neues optionales Feld "charakter", das sie einem
bestimmten Charakter innerhalb der Unterkategorie zuordnet (Product.
charakter in products.ts + Adminbereich-Feld).
- Die Unterkategorie-Seite zeigt jetzt JEDEN Charakter als eigene Box
untereinander, mit automatisch abwechselnder Foto-/Text-Seite (1. links,
2. rechts, 3. wieder links, ...). Ein Charakter ohne zugeordnetes
Produkt zeigt trotzdem schon seine Box (nur ohne Foto) — die Seite
"wächst" mit, sobald neue Charaktere/Produkte dazukommen, für jede
Tier-Familie (Hase, Kuh, Wal, Oktopus, Schildkröte, Pinguin).
- "Hase" hat jetzt drei Charaktere (HasiDog mit echtem Produkt, HasiGott
und Mama Hase als Platzhalter-Boxen).
- Unterkategorien-Chips zeigen jetzt sauber die Familiennamen (Kuh, Hase,
Wal, ...) statt "Kuh „Frieda"" etc.
- Alte, verwaiste /hasidog/-Seite entfernt (war durch die Umstellung
kaputt und nirgends mehr verlinkt).
Verifiziert per Puppeteer gegen den echten Build: /shop/diy-plushies/hase/
zeigt alle drei Charaktere korrekt alternierend, Ein-Charakter-Familien
(Kuh etc.) funktionieren unverändert, Adminbereich lädt ohne
Konfigurationsfehler, alte Hase-URLs geben korrekt 404.
- 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.
- Zwei neue Unterkategorien unter "Hase" angelegt: "HasiGott" und "Mama
Hase", jeweils mit eigenem Charaktertext, bereit für echte Produktfotos
sobald VanVan sie im Adminbereich hinzufügt.
- Neue Logik: Innerhalb einer Tier-Familie (gleicher Slug-Präfix, z.B.
"hase-*") wechselt die Vorstellungsbox jetzt automatisch die Seite ab —
1. Mitglied Foto links/Text rechts (HasiDog, unverändert), 2. Mitglied
Foto rechts/Text links (HasiGott), 3. wieder links (Mama Hase), und so
weiter für alle künftigen Varianten.
- Kategorie-Seiten (z.B. "DIY Plushies") zeigen jetzt eine
Hauptkategorie-Überschrift zwischen der Unterkategorien-Chip-Reihe und
der eigentlichen Produktreihe darunter.
Verifiziert per Puppeteer gegen den echten Build: neue Seiten laden
fehlerfrei, HasiDog bleibt korrekt "nicht gespiegelt" (1. Familienmitglied),
Hauptkategorie-Überschrift sitzt an der richtigen Stelle.
- Akzentfarbe im Adminbereich von einfarbigem Türkis auf einen echten
Lila-Babyblau-Mix umgestellt: normale Buttons/aktive Felder sind
babyblau, Hover-/Fokus-/Auswahl-Zustände kippen ins Lila (gleicher
Violett-Ton wie die Verlaufsränder auf der Website) — dadurch zieht
sich der Farbmix durch die ganze Oberfläche statt nur eine Einzelfarbe
zu sein.
- Hinweistext bei "Rabatte" ergänzt: macht klar, dass nichts selbst
ausgerechnet werden muss — die Website berechnet den neuen Preis
automatisch, sobald oben rechts auf "Speichern" geklickt wird.
Verifiziert per Puppeteer-Login in den echten Adminbereich (Access
Token): Farben korrekt übernommen, keine Konfigurationsfehler, Text
sichtbar.
- 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.
- Breadcrumb-Schrift siteweit leicht vergrößert; die aktuelle Ebene
(Hauptkategorie auf Kategorie-/Produktseiten, Unterkategorie auf
Unterkategorie-Seiten) ist jetzt fett/weiß hervorgehoben statt nur
gleichförmig grau — auf allen Kategorie-, Unterkategorie- und
Produktseiten in allen 4 Sprachen.
- Unterkategorie-Seiten (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin)
zeigen jetzt eine "Weitere Modelle"-Überschrift über der Produktreihe
unterhalb des featured Produkts — die Seite ist jetzt sichtbar darauf
ausgelegt, dass mit der Zeit beliebig viele weitere Varianten pro Serie
dazukommen, nicht nur ein einzelnes Vorzeige-Produkt.
Verifiziert per Puppeteer-Screenshot inkl. Test mit einem zweiten Produkt
in derselben Unterkategorie (danach wieder entfernt) — Layout skaliert
sauber.
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.
