Vom Checkout bis zum Bordstein: ein Click-&-Collect-Accelerator für headless Commerce.
Der Click & Collect Accelerator ist eine produktionsreife Erweiterung auf Basis von Vue Storefront und Storefront UI, die headless eCommerce-Storefronts vollständige Buy-Online-Collect-in-Store-Funktionalität hinzufügt. Entwickelt vom Produktteam von Divante, verdichtet er einen typischerweise mehrere Sprints umfassenden Custom-Build zu einem einsatzbereiten, anpassbaren Modul.
Hintergrund
Click & Collect — oder BOPIS (Buy Online, Pick up in Store) — wurde 2020 zu einer der am schnellsten wachsenden Fulfillment-Präferenzen, da Kundinnen und Kunden die Geschwindigkeit und Bequemlichkeit der Online-Bestellung mit der taggleichen Abholung im Geschäft verbinden wollten. Händler mit physischen Standorten benötigten plötzlich dringend BOPIS-Funktionalität, und die meisten standen vor einem erheblichen Entwicklungsaufwand, um sie in ihre bestehenden Vue-Storefront-Implementierungen zu integrieren.
Das Produktteam von Divante erkannte darin ein Muster, das es sich lohnte, einmal und gründlich für das breitere Storefront-UI-Ökosystem zu lösen — anstatt es für jedes Kundenprojekt erneut aufzubauen.
Was wir entwickelt haben
Der Click & Collect Accelerator erweitert Vue Storefront um einen vollständigen BOPIS-Kaufablauf: Filialsuche und -auswahl auf der Produktseite, Verfügbarkeitsprüfung je Standort, Auswahl der Filialabholung im Checkout sowie Bestätigung und Abholhinweise nach dem Kauf. Die UX wurde mobile-first konzipiert, mit besonderem Augenmerk auf den Checkout-Ablauf, in dem Reibung am häufigsten zu Kaufabbrüchen führt.
Das Designsystem baut auf den Komponenten-Grundbausteinen von Storefront UI auf, erweitert um eigens entwickelte Karten- und Filialauswahl-Komponenten. Der gesamte Ablauf lässt sich über das Theming-System von Storefront UI individuell gestalten, ganz ohne zusätzlichen Designaufwand für die visuelle Identität eines bestimmten Händlers. Der Accelerator wurde als Open-Source-Beitrag für die Vue-Storefront-Community veröffentlicht.
Wichtigste Funktionen
- Filialfinder mit Kartenintegration und Suche nach Postleitzahl oder Ort
- Echtzeit-Bestandsverfügbarkeit je Filiale auf der Produktdetailseite
- Option zur Filialabholung im Checkout mit Schätzung der Abholzeit
- Abholhinweise und Filialkontaktdaten nach dem Kauf
- Mobile-first, vollständig barrierefreie UI auf Basis von Storefront-UI-Komponenten
- Anpassbar an jede Markenidentität über CSS-Custom-Properties