Statisches Boilerplate für die Entwicklung von Skins im koreanischen E-Commerce (HTMX + Vite + TypeScript)
(hebububu.github.io)Hallo, ich bin Entwickler und arbeite im Backend-Bereich des E-Commerce!
Im koreanischen E-Commerce wird das Frontend häufig als Skin auf Plattformen wie cafe24, Godomall & Shopby oder Makeshop aufgebaut.
Da dort meist nur statisches Serving bereitgestellt wird, ist der Einsatz von SPA-Frameworks wie React für kleine und mittlere Unternehmen oft schwierig.
In vielen Fällen werden noch Legacy-Stacks auf Basis von jQuery oder Handlebars verwendet, und oft fehlt jede sinnvolle Dateistruktur, sodass sich Dutzende von Dateien chaotisch in Ordnern verheddern. Auch die Wiederverwendung von Komponenten ist häufig schwierig.
Deshalb habe ich versucht, ein sauber strukturiertes E-Commerce-Boilerplate zu erstellen, das nur mit HTML/JS/CSS-Dateien auskommt.
Die Struktur ist so aufgebaut, dass ihr nur den API-bezogenen Code ergänzen und anbinden müsst!
Tech-Stack
- HTMX 2.0 — SPA-Navigation auf Basis von HTML-Fragmenten
- Vite 7 — Build-Tool + HMR-Entwicklungsserver
- TypeScript — unabhängige Bundles pro Komponente
- Embla Carousel — Parallax-Banner, Produktkarussells
- Reines CSS — Design-Token-System auf Basis von CSS Custom Properties ohne Tailwind
Umgesetzte Seiten
- Startseite (Banner-Karussell, Kategorien, Produktkarussell, Rankings, Reviews, Hinweise)
- Produktliste (Kategorie-Sidebar, Filter, Grid-Layout)
- Produktdetail (Bildergalerie, Options-Kaskade, Mengensteuerung, Tabs, Review-Lightbox)
- Board (Hinweise, FAQ, Beitragsdetail)
- Events (Eventliste, Countdown-Timer, Detailseite)
- Mein Bereich (Mitgliedsstufe, Bestellstatistiken, Coupons/Punkteguthaben)
- Bestellverlauf (Datumsfilter, Liste mit Bestellkarten)
Demo & Quellcode
- Demo: https://hebububu.github.io/static-htmx-ecommerce/
- GitHub: https://github.com/Hebububu/static-htmx-ecommerce
Ihr könnt das Projekt frei klonen und ohne Lizenz verwenden!
Feedback oder Ideen für Verbesserungen sind ebenfalls willkommen!
Noch keine Kommentare.