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]>
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]>
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]>
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]>
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.
- 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.
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.
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
