Fix für gemeldetes Problem: VanVans Code funktionierte nicht auf der Verwaltungsseite. Ursache
war ein dritter, komplett separater, gemeinsamer Code (6GAM4AST), den sich niemand gemerkt
hatte — VanVan gab stattdessen ihren normalen persönlichen Zugangscode ein, der dort aber nicht
galt. Jetzt auf ausdrücklichen Wunsch vereinheitlicht: die Verwaltungsseite prüft denselben
persönlichen Code wie der normale Seitenzugang (SITE_ACCESS_CODE_QCIGA/_VANVAN). Die tägliche
Neueingabe-Pflicht bleibt bestehen (eigene Sitzung mit 24h statt 90 Tagen Gültigkeit) — nur der
geprüfte Code ist jetzt kein separater dritter mehr. Das alte Secret VERWALTUNG_ACCESS_CODE wird
nicht mehr verwendet. Lokal mit wrangler pages dev end-to-end getestet (beide Codes + alter Code
korrekt abgelehnt).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Auf ausdrücklichen Wunsch NUR diese eine Zugangsseite (öffentliche Startseite und die
eingeloggte Verwaltung selbst bleiben unangetastet): zwei groß und gegenläufig rotierende,
warm golden bzw. violett eingefärbte Van's-Logo-Wasserzeichen im gesamten Fensterhintergrund,
plus das echte Logo als sich drehendes "Siegel" im Kästchen mit pulsierendem Glanz-Kreis und
drei zeitversetzt aufblitzenden Funkel-Emojis. Ziel: die tägliche Pflicht-Eingabe soll Freude
machen statt trockene Sicherheitsabfrage zu sein. Alle Animationen respektieren weiterhin
prefers-reduced-motion. Reine Design-Änderung, Formular-/Auth-Logik unverändert.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Technisches Accessibility-Audit ergab sechs behebbare Punkte, alle jetzt gefixt:
- Skip-to-Content-Link ganz oben auf jeder Seite (WCAG 2.4.1)
- Fehler-/Statusmeldungen (Checkout, Login, Rezension, Gate-/Verwaltungs-Code) jetzt mit
role="alert"/aria-live, damit Screenreader sie automatisch ansagen (WCAG 4.1.3)
- Warenkorb-Icon hatte fälschlich das "Konto"-Label geerbt, sagt jetzt korrekt "Warenkorb"
(WCAG 4.1.2/2.4.4), dafür t.nav.cart in allen 4 Sprachen neu ergänzt
- Sichtbarer Fokus-Ring beim Mengenfeld auf der Produktseite wiederhergestellt (WCAG 2.4.7)
- Placeholder-only Formularfelder (Gate-Zugangscode, Verwaltungs-Suche/Filter/Tracking) haben
jetzt echte Labels (sichtbar per sr-only-Klasse oder aria-label) statt nur Platzhaltertext
(WCAG 1.3.1/3.3.2)
- Übersprungene Überschriften-Ebenen (h1→h3 ohne h2) in Checkout, Warenkorb, Kontakt, Konto
korrigiert (WCAG 1.3.1)
Reine Accessibility-Nachrüstung, keine funktionale Änderung. Kleinstunternehmer-Ausnahme
(§3 Abs.3 BFSG) greift hier vermutlich, aber vorsorglich sauber umgesetzt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der Name "Tages-Code" konnte fälschlich als sich täglich änderndem/rotierendem Code
verstanden werden. Tatsächlich bleibt der Code dauerhaft gleich (6GAM4AST) — nur die
24h-Sitzung läuft ab, wodurch derselbe Code einmal pro Tag erneut eingegeben werden
muss. Reine Text-/Kommentar-Korrektur, keine Verhaltensänderung.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Auf ausdrücklichen Wunsch: /verwaltung/ + /api/verwaltung/* verlangen jetzt ZUSÄTZLICH zum
normalen 90-Tage-Seitenzugang einen zweiten, eigenen Code, den nur qciga und VanVan kennen —
und der nach 24 Stunden automatisch abläuft (muss also einmal täglich neu eingegeben werden).
Der Rest der Seite ist davon unberührt, nur die Bestellübersicht ist betroffen.
Bewusst als eigenständiges System (eigenes Cookie vandiy_verwaltung_session, eigenes Geheimnis
VERWALTUNG_SESSION_SECRET, eigener HMAC-Signaturcode statt geteiltem mit dem normalen
Seitenzugang) — gleiches Trennungsprinzip wie bei den Kundenkonten: ein Leck bei einer
Sitzungsart darf nie die andere gefährden.
Neue Dateien: functions/_shared/verwaltung-auth.js (Session-Logik), public/verwaltung-code.html
(Eingabemaske im selben Stil wie die Haupt-Zugangsseite). functions/_middleware.js prüft nach
erfolgreicher Haupt-Sitzung zusätzlich diese zweite Sitzung für /verwaltung*-Pfade. Beide
API-Routen (orders.js, orders/[id].js) prüfen die zweite Schranke zusätzlich eigenständig,
nach demselben Verteidigungs-in-der-Tiefe-Prinzip wie die bestehende Haupt-Prüfung.
Lokal vollständig durchgetestet (wrangler pages dev): kompletter Ablauf ohne jeden Zugang ->
Haupt-Gate -> Redirect zum Tages-Code -> falscher Code abgelehnt -> richtiger Code setzt
24-Stunden-Cookie -> Seite und API danach erreichbar. Bestätigt: der Rest der Seite bleibt
unberührt (kein Tages-Code nötig), UND dass VanVan mit nur dem Haupt-Zugang (ohne Tages-Code)
ebenfalls noch ausgesperrt bleibt, wie gewünscht.
Zwei neue Cloudflare-Secrets in Produktion gesetzt: VERWALTUNG_SESSION_SECRET (zufällig
erzeugt) und VERWALTUNG_ACCESS_CODE (der eigentliche Tages-Code, an qciga und VanVan zu
verteilen).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
context.waitUntil() lief in dieser Pages-Functions-Umgebung nicht zuverlässig zu
Ende, bevor die Anfrage beendet wurde - Bestellungen wurden korrekt gespeichert,
aber die Benachrichtigungs-Mail an [email protected] kam nie an.
Mit echten Live-Bestellungen verifiziert: mit waitUntil kam nichts bei Resend an,
mit await kam die Mail sofort und zuverlässig an.
Außerdem: "Auf Lager"-Feld im Produkt-Formular (Admin) steht jetzt über "Kategorie"
statt darunter, wie gewünscht.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
1) Gutscheincodes können jetzt im Adminbereich auf "nur einmal pro Person einlösbar"
gestellt werden. Wird serverseitig durchgesetzt (neue Spalte orders.gutschein_code +
Prüfung in functions/api/orders.js gegen die echte Bestelldatenbank, case-insensitiv
nach E-Mail-Adresse) — kann also NICHT durch Löschen von localStorage/einen anderen
Browser umgangen werden, anders als die bisherige rein clientseitige Rabattlogik.
Stornierte Bestellungen zählen nicht als "schon benutzt". Ausführlich getestet: echter
Browser-Checkout mit Einmal-Code funktioniert beim ersten Versuch, wird beim zweiten
Versuch (gleiche E-Mail) korrekt mit klarer Fehlermeldung abgelehnt, mit anderer E-Mail
weiterhin nutzbar.
2) Bestell-E-Mail-Benachrichtigung an [email protected]: recherchiert und
vorbereitet (existierte vorher nirgends im Code). Läuft über Resend (kostenlos bis
3.000 E-Mails/Monat), im Hintergrund per context.waitUntil() nach jeder neuen
Bestellung — verzögert nie die Antwort an die Kundschaft und kann eine Bestellung
niemals zum Scheitern bringen, selbst wenn der Versand fehlschlägt (mit ungültigem
Testschlüssel verifiziert: Bestellung bleibt trotzdem erfolgreich gespeichert). Wird
automatisch aktiv, sobald ein RESEND_API_KEY als Secret hinterlegt wird.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
1) Versandkostenfreigrenze ist jetzt länderabhängig statt einer einzigen Zahl für alle:
Deutschland 75 €, Österreich/Luxemburg 85 €, Schweiz 100 € (im Adminbereich unter
"Versandkosten-Staffel" änderbar). Betrifft Warenkorb (live je nach gewähltem Land),
Checkout-Berechnung, sowie alle Text-Hinweise (Topbar, FAQ, AGB) in allen 4 Sprachen.
2) Neues Feld "USt-IdNr." im Impressum (optional, admin-editierbar) — erscheint nur, wenn
ausgefüllt.
3) Impressum, AGB, Datenschutzerklärung, Widerrufsbelehrung und FAQ sind jetzt vollständig
im Adminbereich editierbar (neue Collection "⚖️ Rechtstexte & FAQ") statt fest im Code zu
stehen. Jede Rechtsseite besteht aus frei bearbeitbaren Abschnitten (Überschrift + Text) —
VanVan kann selbst Abschnitte ergänzen, ändern oder löschen. Freitext wird beim Anzeigen
sicher escaped (kein kaputtes HTML durch Tippfehler möglich) und nackte Links automatisch
klickbar gemacht. FAQ bleibt dabei weiterhin in allen 4 Sprachen separat pflegbar.
Ausführlich getestet: Freigrenze pro Land im echten Warenkorb verifiziert (Puppeteer,
84€ Warenwert -> DE kostenlos, AT/LU "noch 1€", CH "noch 16€"), Rechtstexte/FAQ/USt-ID
gegen den fertigen Build geprüft, EU-Streitschlichtung-Link-Bug (Satzzeichen wurde
mitverlinkt) gefunden und behoben.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Das Rund-Logo (schwarze Linien auf weißem Grund) wird per invert()+
mix-blend-mode:screen so eingefärbt, dass der weiße Kreis komplett
verschwindet und nur die Linienzeichnung als dezentes, leicht leuchtendes
Wasserzeichen übrig bleibt — kein Bildbearbeitungsprogramm nötig, rein CSS.
Riesig, zentriert, sehr langsam rotierend für einen dezenten Lebendig-Effekt.
Dazu ein wanderndes Glanzlicht auf der Zugangscode-Karte selbst, passend zum
Rest der Seite.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Ersetzt die (fehlerhaft auf die GANZE Domain wirkende) Cloudflare-Zero-
Trust-Access-Sperre durch eine eigene, schlanke Lösung nach dem bewährten
Vorbild von "Dogfather Universe": eine Pages-Functions-Middleware
(functions/_middleware.js) prüft bei jeder Anfrage ein HMAC-signiertes
Session-Cookie; ohne gültiges Cookie geht's zu public/gate.html (im Van's-
Design), wo ein Zugangscode eingegeben wird. Zwei getrennte Codes für qciga
und VanVan, 90 Tage gültig, danach neu eingeben. /admin/* ist komplett
ausgenommen — läuft weiter über das echte GitHub-OAuth-Login, das für
VanVan schon funktioniert.
Bonus: die drei separaten Vorschau-Seiten (demo-normal/demo-konto/demo-abo)
sind jetzt überflüssig und entfernt. Stattdessen gibt's ein schwebendes
Umschalter-Widget (Layout.astro), das NUR sichtbar ist, wenn das Gate-Cookie
vorhanden ist (also nur für uns beide) — auf jeder beliebigen Seite kann
per Knopfdruck zwischen "Normaler Besucher", "Angemeldete Kundin" und
"Abonnentin" gewechselt werden, ohne die Seite verlassen zu müssen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
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]>
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]>
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]>
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]>
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]>
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
