Shopflare ist ein statischer E‑Commerce‑Prototyp und eine praxisnahe Referenz für moderne Frontend- und Jamstack-Architekturen. Der Quellcode ist öffentlich auf GitHub verfügbar (Link im Footer).
Ziel dieses Projekts ist es, eine klar strukturierte, performante und erweiterbare Grundlage für Shop‑Frontends zu demonstrieren.
Dieses Repository zeigt, wie ein statisch generiertes Shop-Frontend sauber umgesetzt werden kann:
- kategorisierte Produktübersichten
- Detailseiten pro Artikel
- Warenkorb-Seite als Einstieg in den Checkout-Flow
- rechtliche Seiten (Impressum, Datenschutz)
- wiederverwendbare Layouts und klare Datenstruktur
- Eleventy (11ty) für Static Site Generation
- Alpine.js für leichtes Interaktivitäts-Handling
- Bulma CSS für UI-Basis und schnelle Komponentenstruktur
- Startseite mit Produktdarstellung
- Kategorieseiten mit Slug-basiertem Routing
- Produktdetailseiten aus zentraler Datenquelle
- Warenkorb-Ansicht als eigene Route
- Rechtstexte mit separatem Legal-Layout
- Build-Ausgabe in
_site/
- Datenhaltung über
src/_data/(Produkte, Kategorien, Slugs) - Seiten-Templates in
src/*.njk - Wiederverwendbare Layouts in
src/_includes/layouts/ - Assets zentral unter
src/assets/
Das Projekt ist bewusst so aufgebaut, dass eine spätere Umstellung von statischen JSON-Daten auf externe Datenquellen unkompliziert möglich ist.
Dieses Projekt demonstriert insbesondere:
- saubere Template-Architektur mit 11ty
- strukturierte Datenmodellierung für Content-getriebene Seiten
- konsistente URL-Strategie (Kategorie- und Produkt-Slugs)
- Trennung von Daten, Darstellung und Layout-Logik
- pragmatische UI-Umsetzung mit leichtgewichtiger Interaktivität
Empfohlene nächste Schritte für eine produktionsnähere Version:
- Cloudflare D1 Integration statt lokaler Produkt-JSON
- Suche & Filter (Volltext, Preis, Sortierung)
- Persistenter Warenkorb (LocalStorage + optional Server-Sync)
- Checkout-Anbindung (z. B. Stripe)
- Bestands- und Verfügbarkeitslogik
- SEO-Upgrade (JSON-LD, OpenGraph, Meta-Optimierung)
- Internationalisierung (DE/EN)
- Testing & QA (Lighthouse, E2E, CI)
pnpm install
pnpm exec eleventy --serveAnschließend ist das Projekt lokal mit Live-Reload verfügbar.
Dieses Projekt ist Open Source und steht unter der MIT-Lizenz. Der Code darf gemäß MIT-Lizenz verwendet, adaptiert und weiterverbreitet werden. Die vollständige Lizenz finden Sie in LICENSE.
Kontakt: Bei Interesse an Anpassungen, Integrationen oder Zusammenarbeit kontaktieren Sie mich gern (Kontaktinformationen im Impressum).