Click & Collect und Filialverfügbarkeit: das Unified-Commerce-Frontend

Click & Collect ist längst kein Differenzierungsmerkmal mehr. In Deutschland ist es Standard-Erwartung. Wer eine Produktdetailseite aufruft, erwartet zu sehen: Ist das Produkt in meiner nächsten Filiale verfügbar? Kann ich es heute dort abholen?

Das Problem: dieser scheinbar einfache Usecase verbindet Echtzeit-Lagerbestand aus einem Filialverwaltungssystem, Geolokalisierung im Browser, eine Kartendarstellung, einen modifizierten Checkout-Flow für Abholung statt Versand, und ein Benachrichtigungssystem, wenn die Ware bereitsteht. Sechs Systeme, ein nahtloser Fluss im Frontend.

Dieser Post beschreibt, wie du Click & Collect, Filialverfügbarkeit und einen kanalübergreifenden Warenkorb als Composable-Frontend aufbaust - auf deinem bestehenden Stack, ohne Backend-Replatforming.

Das Multichannel Retail Growth Kit von Laioutr enthält alle beschriebenen Komponenten als produktionsreifes UI-Set.

Warum "Omnichannel" und "Unified Commerce" verschiedene Ziele sind

Omnichannel bedeutet: du bist auf mehreren Kanälen präsentiert (online, Filiale, App, Marktplatz) und diese Kanäle sind irgendwie verbunden. Unified Commerce bedeutet: Online und Filiale teilen sich dieselbe Datenbasis, dieselbe Checkout-Logik, denselben Kundendatensatz - und der Shopper erlebt das als nahtlos.

Der Unterschied ist nicht akademisch. In einem Omnichannel-Setup gibt es oft noch getrennte Systeme: ein E-Commerce-System mit eigenem Bestand, ein Filialsystem mit eigenem Bestand, und eine Integration dazwischen, die versucht, die Daten zu synchronisieren. In einem Unified-Commerce-Setup gibt es eine einzige Wahrheitsquelle für Bestand, Kunden und Preise.

Für das Frontend heißt das: in einem Omnichannel-Setup muss die Filialverfügbarkeit aus einem separaten System abgerufen werden, häufig mit Verzögerung und unklarer Aktualität. In einem Unified-Commerce-Setup kommt der Bestand live aus einer Quelle.

Das Multichannel Retail Growth Kit ist für beide Setups gebaut - die Komponenten abstrahieren, woher der Bestand kommt. Der Weg zu Unified Commerce wird einfacher, wenn das Frontend nicht an die bisherige Backend-Architektur gebunden ist.

Filialverfügbarkeit: die unterschätzte Komplexität

Was die Produktdetailseite zeigen muss

Eine Filialverfügbarkeits-Komponente auf der Produktdetailseite klingt einfach. In der Praxis muss sie:

1. Den Standort des Shoppers ermitteln (Geolokalisierung via Browser oder gespeicherte Präferenz)
2. Die nächstgelegenen Filialen mit dem gesuchten Produkt auf Lager abfragen
3. Lagerbestand pro Filiale in Echtzeit darstellen (oder mit akzeptabler Verzögerung)
4. Zwischen "verfügbar", "wenige auf Lager" und "nicht verfügbar" unterscheiden
5. Auf Klick eine Filialliste oder Karte zeigen mit Distanz, Adresse und Öffnungszeiten
6. Den Checkout-Flow vorbereiten: wenn "Abholen in Filiale X" gewählt wird, wechselt der Checkout in den Click-&-Collect-Modus

Jeder dieser Schritte ist ein Frontend-Zustand, der sauber implementiert werden muss. Fehlende Zustände - was passiert, wenn Geolokalisierung verweigert wird? Was, wenn alle Filialen in der Nähe keinen Bestand haben? - erzeugen Reibung und Abbrüche.

Im Multichannel Retail Growth Kit sind alle Bestandszustände, Fehlerzustände und Loading-States für die Filialverfügbarkeits-Komponente implementiert. Du konfigurierst, welche Backend-API den Bestand liefert - der Komponenten-Code bleibt stabil.

Echtzeit vs. Near-Realtime: was ist akzeptabel

Filialbestand in echter Echtzeit abzufragen - d.h. bei jedem Seitenaufruf live aus dem Filialsystem - ist technisch möglich, hat aber Konsequenzen für Performance und Systemlast. Eine Produktdetailseite mit 50 Filialen und Echtzeit-Abfrage erzeugt 50 API-Calls pro Seitenaufruf.

Eine pragmatische Lösung: Bestände mit einem kurzen Cache-TTL (5-15 Minuten) cachen, bei Click-&-Collect-Reservierung aber immer live prüfen. Das Frontend zeigt dann "in der Regel verfügbar" statt einer Live-Zahl, und erst im Checkout-Moment wird der aktuelle Bestand verifiziert.

Das ist ein akzeptabler Kompromiss für die meisten Retail-Szenarien. Ausnahme: Hochfrequenz-Artikel mit hohem Bestandsumsatz (Elektronik-Bestseller, Saisonware). Dort lohnt sich eine kürzere TTL oder ein Echtzeit-Websocket-Kanal für den Bestandswert.

Click & Collect: der Flow aus Kundensicht

Schritt für Schritt

Ein vollständiger Click-&-Collect-Flow aus Kundensicht:

1. Produkt auf der Produktdetailseite gefunden, Filialverfügbarkeit geprüft
2. "Abholen in Filiale X" ausgewählt
3. Checkout: Lieferadresse entfällt, stattdessen Filialdaten (Adresse, Öffnungszeiten) und optionale Abholzeitfenster-Auswahl
4. Bestellung abgeschlossen, Bestätigungs-E-Mail mit Abholcode
5. Benachrichtigung (E-Mail oder Push), wenn Ware bereitgestellt ist
6. Abholung in der Filiale: Abholcode vorzeigen, Ware mitnehmen

Jeder dieser Schritte hat einen Frontend-Anteil. Besonders unterschätzt: Schritt 5. Die Bereitstellungs-Benachrichtigung muss vom Filialsystem getriggert werden, aber das Frontend ist die Schnittstelle, über die der Kunde seinen Abholcode und den Status sieht.

Click & Reserve vs. Click & Collect

Zwei ähnliche, aber unterschiedliche Flows:

• Click & Collect: Artikel wird direkt bestellt und bezahlt, wird in der Filiale für die Abholung reserviert und bereitgestellt
• Click & Reserve: Artikel wird kostenlos reserviert (keine Vorauszahlung), wird in der Filiale bereitgestellt, Bezahlung erfolgt bei Abholung

Click & Reserve ist besonders bei höherpreisigen Artikeln beliebt, wo Kunden die Ware vorher in der Filiale sehen und anfassen wollen, bevor sie bezahlen. Das Multichannel Retail Growth Kit enthält beide Flows als separate Checkout-Varianten.

Ship-from-Store

Ship-from-Store ist der umgekehrte Weg: ein Online-Auftrag wird nicht vom Zentrallager, sondern von der nächstgelegenen Filiale mit Bestand versandt. Für den Kunden sieht das aus wie ein normaler Online-Kauf mit Lieferung. Im Hintergrund wird der Auftrag an das Filialsystem weitergeleitet, das als Mini-Lager fungiert.

Ship-from-Store ist eine Inventory-Optimierungsmaßnahme - Filialen mit hohen Beständen bei bestimmten Produkten können online zur Lieferbasis werden, ohne dass der Onlineshop-Bestand aufgestockt werden muss. Das Frontend muss dafür nicht viel leisten: die Versandoption "Schnelllieferung aus nächster Filiale" als Checkout-Option darstellen.

Filialfinder: mehr als eine Karte

Was ein guter Filialfinder leistet

Der Filialfinder ist häufig eine der meistbesuchten Seiten eines Retail-Onlineshops. Kunden suchen nach:

• Standort und Wegbeschreibung
• Aktuellen Öffnungszeiten (inkl. Feiertagsänderungen)
• Verfügbarkeit eines bestimmten Produkts in dieser Filiale
• Services der Filiale (Reparatur, Beratung, Barrierefreiheit)
• Termin-Buchung (Beratungsgespräch, Click-&-Reserve-Abholung)

Ein Filialfinder, der nur Name, Adresse und Öffnungszeiten zeigt, ist eine verpasste Chance. Die Verbindung zum Produktkatalog - "Ist Produkt X gerade in dieser Filiale auf Lager?" direkt im Filialfinder beantworten zu können - ist ein Feature, das Abbrüche deutlich reduziert.

Das Multichannel Retail Growth Kit enthält Filialfinder-Komponenten mit Karten-Integration, Öffnungszeiten-Kalender, Filial-Detailseite und einer Produktverfügbarkeits-Verknüpfung.

Performance des Filialfinders

Karten-Widgets sind ein bekanntes Performance-Problem: Google Maps oder Mapbox laden mehrere hundert Kilobyte JavaScript, blockieren LCP und ziehen Core Web Vitals nach unten.

Die Lösung: Karten per Intersection Observer lazy-loaden - nur wenn die Kartenkomponente im Viewport ist, wird das Karten-Widget initialisiert. Davor zeigt eine statische Kartenvorschau (Screenshot oder statisches Bild) den Ort, ohne Skript-Last.

Diese Optimierung ist im Multichannel Retail Growth Kit ab Werk implementiert.

Kanalübergreifender Warenkorb

Versand und Abholung mischen

Ein Kunde kauft drei Artikel. Artikel 1 und 2 sollen nach Hause geliefert werden. Artikel 3 möchte er morgen in der Filiale abholen. Ein kanalübergreifender Warenkorb erlaubt genau das: verschiedene Fulfillment-Typen in einer Bestellung.

Das klingt komfortabel, ist aber technisch anspruchsvoll:

• Der Warenkorb muss Fulfillment-Typen pro Line-Item tracken
• Die Checkout-Summary zeigt sowohl Lieferadresse als auch Abholinformationen
• Die Bestätigung muss beide Fulfillment-Typen klar kommunizieren
• Das Backend muss die gemischte Bestellung in zwei Teilaufträge aufteilen (einer fürs Lager, einer für die Filiale)

Das letzte Punkt ist ein Backend-Concern - das Frontend visualisiert die Aufteilung, entscheidet sie aber nicht. Das Multichannel Retail Growth Kit enthält einen Warenkorb, der Versand-/Abholmixe darstellt und einen Checkout-Flow, der beide Typen getrennt behandelt.

Loyalty und Coupons kanalübergreifend

Kundenkarte-Punkte, Coupons und Loyalty-Programme müssen in einem Unified-Commerce-Setup kanalübergreifend funktionieren: Punkte gesammelt in der Filiale sind auch online einlösbar und umgekehrt. Das Frontend stellt das dar, aber die Quelle ist dein Loyalty-Backend.

Das Multichannel Retail Growth Kit enthält Loyalty-Komponenten (Punktestand, Coupon-Eingabe, digitale Kundenkarte), die an dein Loyalty-System angebunden werden.

Der composable Frontend-Layer als Enabler

Der entscheidende Punkt: alle beschriebenen Flows erfordern kein neues Backend-System. Sie erfordern ein Frontend, das die Daten aus den bestehenden Systemen (Filialsystem, ERP, Loyalty-System, OMS) zusammenführt und als nahtlosen Kundenerlebnisfluss darstellt.

Genau das ist die Aufgabe einer Frontend Management Platform (FMP): der Frontend-Layer, der sich mit jedem Backend-System verbindet, ohne es zu ersetzen. Laioutr spricht mit deinem bestehenden Stack - Shopify, Shopware, commercetools, OXID, Sylius und 50+ weitere Backends. Dein Backend bleibt. Dein Frontend wird modern.

Das Multi-Brand-/Multi-Market-Produkt von Laioutr erlaubt außerdem, denselben Komponenten-Pool für mehrere Retail-Brands und Ländermärkte zu betreiben - eine UI-Library, alle Marken und Märkte.

Für Shopware als Backend gibt es zusätzlich den dedizierten Pillar Headless Frontend für Shopware, der die spezifische Integration dokumentiert.

FAQ: Unified-Commerce-Frontend

Was brauche ich an Backend-Infrastruktur für Echtzeit-Filialverfügbarkeit? Du brauchst eine API, die Bestandsabfragen pro Produkt und Filiale beantwortet. Das kann dein bestehendes Filialsystem, ein OMS (Order Management System) oder ein einfaches Bestandsverwaltungs-Backend sein. Was es tut: auf Anfrage "Wie viele Stück von Artikel X sind in Filiale Y?" antworten. Der Laioutr Frontend-Layer verbindet sich mit dieser API und rendert den Zustand.

Wie aufwändig ist die Click-&-Collect-Integration? Die Frontend-Seite - Checkout-Flow, Bestätigung, Abholcode-Anzeige - ist im Multichannel Retail Growth Kit enthalten. Der Aufwand liegt auf Backend-Seite: dein OMS oder Filialsystem muss Click-&-Collect-Aufträge empfangen und den Status (bereitgestellt, abgeholt) zurückgeben können. Typische Implementierungszeit mit vorhandenem Backend: 2 bis 4 Wochen.

Können wir Click & Reserve einführen, ohne den ganzen Checkout-Flow umzubauen? Ja. Click & Reserve ist im Multichannel Retail Growth Kit eine separate Checkout-Variante, die neben dem normalen Kauf-Checkout existiert. Du konfigurierst, welche Produkte und Filialen für Click & Reserve freigeschaltet sind - der restliche Checkout bleibt unverändert.

Unsere Filialdaten liegen in einem Legacy-System ohne API. Was dann? Dann ist der erste Schritt eine einfache Middleware oder ein Proxy, der die Filialdaten abfragt und als REST- oder GraphQL-API exponiert. Das ist Backend-Arbeit, keine Frontend-Arbeit. Der Laioutr Frontend-Layer kann sich sobald mit der API verbinden, wie sie vorhanden ist.

Funktioniert das auch für große Retail-Ketten mit 200 und mehr Filialen? Ja. Die Filialfinder-Komponente im Multichannel Retail Growth Kit ist für große Filialnetze optimiert - mit PLZ-/Stadtsuche und Radius-Filterung, damit die Liste handhabbar bleibt. Die Performance-Optimierungen (Lazy-Loading der Karte, gecachte Bestandsdaten) sind speziell für hohe Filialzahlen entworfen.

Fazit: Unified Commerce braucht ein Unified Frontend

Click & Collect, Filialverfügbarkeit, Ship-from-Store, Loyalty, kanalübergreifender Warenkorb - das sind keine Einzelfeatures, die du nacheinander in deinen bestehenden Shop einbaust. Sie sind Ausdruck einer einheitlichen Kauferfahrung, die Online und Filiale als einen Kanal behandelt.

Das Multichannel Retail Growth Kit liefert alle Komponenten dafür als produktionsreifes Set, das auf deinem bestehenden Stack läuft. Kein Replatforming, kein monatelanges Greenfield-Projekt.

Die gesamte Übersicht aller branchenspezifischen Growth Kits findest du im Hub zu den UI Growth Kits.

Wenn du sehen willst, wie die Komponenten auf deinem Backend aussehen, vereinbare eine Demo.

Laioutr ist die [Frontend Management Platform (FMP)](https://www.laioutr.com/composable-headless-frontend) für Composable Commerce. Das [Multi-Brand-/Multi-Market-Produkt](https://www.laioutr.com/product/multi-brand-multi-market) erlaubt Retail-Ketten, einen Komponenten-Pool für alle Marken und Ländermärkte zu betreiben.