Konzeptprojekt2026
Demo: Genusshof Lärchmoser
Vorher/Nachher-Demo für den Handel: ein Hofladen mit Bestellung per E-Mail im Stand von 2012 und seine Neufassung als Shop auf echtem WooCommerce, dessen Verwaltung offensteht.
Konzept, Gestaltung, Entwicklung
Vorher und nachher
Beide Fassungen stehen live nebeneinander. Ein Klick auf einen Rahmen öffnet sie zum Durchklicken.
Das Problem
Ein Direktvermarkter verkauft Speck, Kasnudeln und Honig an Leute, die den Hof kennen, und im Netz endet das bei einer Baukastenseite mit Bestellung per E-Mail, die jemand am Abend von Hand beantwortet. Wer über einen Shop nachdenkt, fürchtet dabei zweierlei zu Recht: ein System, das ohne Entwickler nicht mehr zu pflegen ist, und einen Verkauf, den niemand kontrolliert.
Die Lösung
Ein erfundener Hofladen im Gurktal, zweimal gebaut. Die alte Fassung reproduziert einen Baukasten-Auftritt von 2012 mit Laufschrift, Besucherzähler und Bestellung per E-Mail. Die neue ist eine statisch ausgelieferte Storefront vor einem echten WooCommerce, das in einem Container im Homelab hinter einem Cloudflare Tunnel läuft: Sortiment, Warenkorb, Kassa und ein Produktberater am Sprachmodell. Beide Fassungen sind live, eine Leiste oben schaltet zwischen ihnen um.
Womit es gebaut ist
Next.js · TypeScript · Tailwind CSS · Cloudflare Workers · WordPress · WooCommerce · Docker · Cloudflare Tunnel · OpenRouter · Playwright
Das Ergebnis
100
Lighthouse für Zugänglichkeit, Best Practices und SEO
23
Produkte aus der Store-API des WooCommerce
86
automatisierte Tests
- Lighthouse auf allen acht Kernseiten der Neufassung: Zugänglichkeit, Best Practices und SEO je 100, Performance je nach Lauf zwischen 96 und 100; axe ohne einen einzigen Verstoß.
- 23 Produkte, 16 Varianten und 6 Kategorien holt der Export zur Bauzeit aus der Store-API des WooCommerce. Ist das Backend nicht erreichbar, baut er aus einem mitgelieferten Abzug weiter, statt abzubrechen.
- Bestellungen entstehen wirklich in WooCommerce: Der Warenkorb geht an einen eigenen Endpunkt, der jede Position gegen die Store-API prüft, ob es die Ware gibt, ob sie lieferbar ist und ob der Preis auf den Cent stimmt. Dem Browser wird nichts geglaubt.
- Der Produktberater kennt das Sortiment, antwortet mit klickbaren Produktkarten und legt auf Wunsch in den Warenkorb; Kontaktdaten laufen nie durch das Sprachmodell. Begrenzt auf zehn Anfragen je Adresse und zehn Minuten und dreihundert am Tag.
- Die Verwaltung des Shops steht offen: wp-admin mit Benutzer demo und Passwort laerchmoser-demo, Rolle auf Produkte und Bestellungen beschränkt, Datenbank stündlich zurückgesetzt.
- 86 automatisierte Tests: 35 Playwright-Prüfungen der Neufassung samt axe, 23 gegen die Worker-Schnittstelle, 20 auf Katalog-, Versand- und Beraterlogik und 8 auf der alten Fassung.
- Live unter demo.bleier-solutions.com/hofladen/, die alte Fassung unter /hofladen/alt/.
Was zu sehen ist
Vorher · Nachher · Verwaltung
Alle Namen, Preise und Erzeugnisse sind erfunden. Der Betrieb existiert nicht.
Was die Neufassung anders macht
Zuerst der Hof, dann das Sortiment: Wer direkt vom Erzeuger kauft, entscheidet über Herkunft, nicht über eine Filterliste. Preise, Varianten und Lagerstände stehen nicht im Quelltext, sondern kommen aus WooCommerce, wo sie jemand ohne Entwickler pflegt. Der Warenkorb liegt im Browser, die Bestellung wird serverseitig nachgerechnet, bevor sie angelegt wird. Der Produktberater beantwortet Fragen nach Jause, Geschenk oder Versand aus dem echten Katalog und empfiehlt nur, was es gibt. Bezahlt wird nichts, die Zahlungsart ist eine Attrappe mit deutlichem Hinweis.
Selbst im Backend arbeiten
Der Zugang zur Verwaltung ist offen, und das ist der eigentliche Punkt dieser Demo: Ein Shop ist nicht die Schauseite, sondern die Arbeit dahinter. Wer einen Preis ändert, ein Produkt anlegt oder eine Bestellung bearbeitet, sieht die Änderung nach dem nächsten Bau in der Storefront. Die Rolle kann Produkte und Bestellungen und sonst nichts, Mailversand ist abgeschaltet, und stündlich setzt ein Cron die Datenbank auf den Ausgangsstand zurück. Es ist also nichts kaputtzumachen, was nicht zur vollen Stunde wieder heil wäre.
Was übertragbar ist
Die Trennung ist der Beleg: WooCommerce trägt Sortiment, Preise und Bestellungen, die Storefront ist statisch und liegt am Rand des Netzes. Der Betrieb arbeitet in einer Oberfläche, die er kennt, ohne dass die Kundschaft je ein WordPress zu sehen bekommt. Dieselbe Aufteilung trägt jeden Shop mit ein paar hundert Artikeln. Zahlungsanbieter, Versandetiketten und die Anbindung an eine Kassenlösung kommen im echten Projekt dazu; hier sind sie erfunden.
Etwas Ähnliches für Ihren Betrieb?
Schreiben Sie kurz, worum es geht. Sie bekommen innerhalb eines Werktags eine Einschätzung mit Preisrahmen und Dauer.