Beispiel-HTML-Dummy

Um die Ratschläge aus den Modulen auch konkret zu demonstrieren, habe ich mit ecbf.shop einen Beispiel-HTML-Dummy mit typischen Online-Shop-Funktionalitäten gebaut. Selbstverständlich ist es kein echtes E-Commerce-Projekt, in den echten Waren bezahlt, gekauft und verschickt werden. Genauso wenig steht hinter der Demo ein bestimmtes oder überhaupt irgendein Shop-System. Vielmehr ist der Prototyp bewusst einfach und abstrakt gehalten, im Kern nur HTML, CSS und JavaScript, um die Grundlage von z. B. dem Bau von Themes in Systemen wie z. B. Magento und Shopware zu sein.

Screenshot des Beispielshops mit offenen Dev Tools

Der Dummy ist – wie gesagt – unter ecbf.shop öffentlich einsehbar und sein Code ist quelloffen hier zu finden: https://github.com/e-commerce-barrierefrei/ecbf-shop. Soweit ich nicht andere Skripte benutzt oder angepasst habe, die eigene Lizenzen mitbringen, kann der Code sehr gerne frei benutzt, kopiert und angepasst werden (Creative Commons Zero).

Lokaler Start

Um den Prototyp lokal lauffähig zu machen, ist folgendes Tooling nötig:

Klonen des Repositories
Wenn noch nicht vorhanden, muss NodeJS installiert werden: www.nodejs.org
Ausführen von npm install, um alle Abhängigkeiten zu installieren
Ausführen von npm start, um den kleinen Webserver, den das verwendete Projekt ParcelJS mitbringt, zu starten
Der lokale Server steht nun unter http://localhost:1234/ zur Verfügung.

Verfügbare Seiten

Neben der offensichtlichen Startseite gibt es aktuell folgende Seitentypen in der Demo

Einzelproduktseite
Bestellseite: Diese ist entweder direkt aufrufbar oder ansteuerbar, wenn man Waren in den Warenkorb legt und auf „Bestellen“ drückt
Suchergebnisseite: Diese ist entweder direkt aufrufbar oder das Ergebnis einer Nutzung der Combobox im Seitenheader als normales Suchfeld

Debug-Parameter

Für eine bessere Entwicklung, Untersuchung und Demonstration von bestimmten Zuständen habe ich einen debug-URL-Parameter eingesetzt, der folgende Werte annehmen kann:

?debug=cookiedialog öffnet den Cookiedialog
?debug=warenkorb öffnet den Warenkorb
?debug=warenkorb-vorausgefuellt öffnet dem Warenkorb und befüllt ihn mit zwei Waren
?debug=nur-hover-hauptnav demonstriert eine Hauptnavigation, die ihre Unterpunkte im Desktopdesign nur per Mausdrüberfahren anzeigt und somit nicht voll tastaturzugänglich ist
?debug=combobox öffnet die Vorschlagsliste der Combobox programmatisch
?debug=karussell-autostart startet das Marketing-Karussell auf der Startseite automatisch; allerdings wird in diesem Zustand auch ein Schalter zum Pausieren der Folienwechsel sichtbar.

Aktualisierungen

Mein Ziel ist es, die Beispielimplentierung ecbf.shop stetig weiterzuentwickeln, natürlich auf Grundlage neuer Modulinhalte, aber auch da durch das konkrete Repository hoffentlich ein fruchtbarer Austausch zu den zugänglichsten E-Commerce-Lösungen entsteht.