demo-tga-shop/README.md

tga-shop — PMPNZNG Storefront (Astro)

Astro-Konvertierung des PMPNZNG-Merch-Mockups. Phase „Mockup-Port" — statische Ausgabe aus lokalen Produktdaten. Später wird die Produkt-/Bestell-/Checkout-Schicht durch ein Medusa-v2-Backend + Stripe ersetzt (siehe ../ARCHITEKTUR-UND-PLAN.md).

Stack

• Astro 5 (output: static) — kein Framework-Overhead, Vanilla-JS-Inseln.
• Vanilla CSS mit Design-Tokens (src/styles/global.css, aus dem Mockup übernommen).
• Client-JS (public/shop.js): Warenkorb (localStorage), Passwort-Gate, Toasts, Galerie, Größenwahl, Mobile-Menü, Instagram-Kacheln.

Entwickeln

npm install
npm run dev        # http://localhost:4321
npm run build      # → dist/  (statisch)
npm run preview

Passwort-Vorschau: Die Seite ist per Gate geschützt. Passwort: Hoyaaa (in public/shop.js, Konstante PASS_WORD). Vor Go-live entfernen oder serverseitig lösen.

Struktur

src/
├── data/products.ts        # EINZIGE Produkt-Quelle (Medusa-ersetzbar; Preis in Cent)
├── layouts/Base.astro      # Head, Header/Nav, Marquee, Footer, JSON-LD, Script-Injektion
├── pages/
│   ├── index.astro         # Startseite      (aus Mockup portiert)
│   ├── shop.astro          # Katalog         (aus Mockup portiert)
│   ├── produkt/[slug].astro# Produktdetail   (datengetrieben aus products.ts)
│   ├── produkt/online-workshop.astro  # Digitalprodukt (bespoke Seite)
│   ├── warenkorb · checkout · bestellung-erfolgreich
│   └── ueber-uns · faq · impressum · datenschutz
└── styles/global.css       # Design-System (Tokens → Reset → Components)
public/
├── shop.js                 # Client-Logik (Vanilla)
└── product-images/         # Produktfotos + freigestellte PNGs + Insta

Bekannte To-dos (Mockup-Port → Produktiv)

• Checkout ist simuliert (leert nur den Warenkorb). → Stripe via Medusa anbinden.
• Produktdaten liegen lokal in products.ts. → durch Medusa-API ersetzen (Schema ist bereits nah an Medusa: priceCents, sizes=Varianten, productType).
• Recht: AGB & Widerruf fehlen noch (nur Impressum/Datenschutz aus Mockup).
• Design wird separat überarbeitet (Tokens in global.css → OKLCH-Migration möglich).
• Passwort-Gate vor Launch entfernen.
• Beim Medusa-Anschluss: Node-Adapter + output: 'server' in astro.config.mjs.