55 lines
2.4 KiB
Markdown
55 lines
2.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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`.
|
|
```
|