Ausgangslage

Einen reduzierten Möbel-Onlineshop auf Basis von FLSStart entwickeln und in WordPress gut pflegbar machen. Dazu gehören der Bereich «Rooms», Produkte, Produktseiten, Warenkorb und Checkout sowie ein klar gekennzeichneter Demo-Lieferablauf. Die Gestaltung soll auf Desktop und Smartphone überzeugen.

Umsetzung

Frontend: Responsiv gestaltete Komponenten mit FLSStart und SCSS, semantische Templates und ein einheitliches Designsystem sind in ein individuelles WordPress-Theme eingeflossen. Inhalte: Der Bereich «Rooms» ist ein eigener Inhaltstyp mit SCF-Feldern. WooCommerce verwaltet Produkte, Kategorien, Lagerbestand, Warenkorb, Checkout und Bestellungen.

Shopablauf: Umgesetzt und geprüft sind Kategoriefilter, Mengenanpassung, Lagerbestandsprüfung, Warenkorb-Drawer, Checkout und Bestellbestätigung. Die Auswahl einer Nova-Poshta-Filiale oder eines Paketautomaten ist als Demoablauf gekennzeichnet. Animationen nutzen IntersectionObserver; FLS Parallax kommt nur in den Hero-Bereichen der Start- und Rooms-Seiten zum Einsatz. prefers-reduced-motion wird berücksichtigt.

Herausforderungen

Die redaktionellen Animationen sollten das Einkaufserlebnis nicht bremsen. Grosse Einstiegsbilder führten zunächst zu einer mobilen LCP von 31,5 Sekunden und rund 40 MB Seitengewicht. Im finalen Stand sank die visuelle Datenmenge auf etwa 1,9 MB; Lighthouse Performance auf Mobilgeräten erreichte 93, LCP 2,7 Sekunden und CLS 0.

Zusätzlich waren eine klare Trennung von individuellen Inhalten und WooCommerce-Daten, einheitliches responsives Design von 390 bis 1920 px und die Migration in eine separate WordPress-Installation mit eigener Datenbank erforderlich.

Ergebnis

Ein responsiver WooCommerce-Demo-Shop auf solve.mike-dev.com.ua. Startseite, Bereich «Rooms», Zimmerdetail, Shop, Produktseiten, Warenkorb, Checkout und Bestellbestätigung wurden bei 390, 768, 1440 und 1920 px geprüft – ohne horizontalen Überlauf, fehlende Bilder oder Konsolenfehler. Build und WordPress-Bereitstellung wurden ebenfalls geprüft.

Demo-Hinweis: Es werden keine echten Zahlungen verarbeitet. Die Lieferung mit Nova Poshta ist als Demoablauf umgesetzt; für eine Anbindung an die Produktions-API werden Zugangsdaten des Händlers benötigt.