SAP Commerce Cloud ist stark darin, komplexe B2B- und B2C-Modelle auf einem Backend zu betreiben: me…
WEBSALE Storefront API + Laioutr: So funktioniert die Anbindung
WEBSALE betreibt eine eigene REST-basierte Storefront-API, die den Kern des Headless-Setups bildet. Laioutr setzt sich als Frontend Management Platform (FMP) direkt auf diese API: kein neues Backend, kein Datenduplikat, keine WEBSALE-seitige Konfiguration notwendig. Dieser Artikel zeigt, wie die Anbindung technisch funktioniert und was Marketing-Teams danach selbständig steuern können.
Was die WEBSALE Storefront-API liefert
Die WEBSALE Storefront-API ist eine REST-API, die alle relevanten Commerce-Daten nach außen öffnet:
- Produktdaten - Artikel, Varianten, Bilder, Preise, Bestände
- Kategoriestruktur - Navigation, Breadcrumb, Kategorie-Metadaten
- Warenkorblogik - Add-to-cart, Update, Remove, Gutscheine, B2B-Preislisten
- Kundenkonten - Login, Registration, Order-History, Adressen
- Checkout - mehrstufiger Checkout-Flow, Payment-Anbindung, Order-Confirmation
- Daten auch via S3/FTP - für Produktfeed-Exporte in CSV/JSON-Format
Diese API ist der Handover-Punkt. Laioutr konsumiert sie; WEBSALE liefert. Die Datenhaltung bleibt vollständig bei WEBSALE.
Wie Laioutr die Anbindung aufbaut
Laioutr nutzt einen konfigurierbaren Connect-Layer (Orchestr), der REST-APIs normalisiert und in ein einheitliches Frontend-Datenmodell überführt. Für WEBSALE bedeutet das:
Schritt 1 - API-Endpunkte konfigurieren
Im Laioutr-Cockpit werden die WEBSALE-API-Endpunkte hinterlegt (Base-URL, Auth-Token, Versionspfad). Kein Custom-Code notwendig; das Connector-Profil wird konfiguriert, nicht programmiert.
Schritt 2 - Datenmapping
Der Connect-Layer mappt WEBSALE-Datenstrukturen auf das interne Laioutr-Schema. Produkt-Array aus WEBSALE wird zum Standard-Product-Objekt, das alle Frontend-Komponenten verstehen. Dieses Mapping ist einmalig und danach stabil - spätere WEBSALE-API-Updates werden im Connect-Layer abgefangen, ohne dass Komponenten angepasst werden müssen.
Schritt 3 - Komponenten-Anbindung
Laioutrs 70+ E-Commerce-Komponenten (Produktliste, Produktdetail, Warenkorb-Drawer, Checkout-Flow, Account-Dashboard) sind gegen das normalisierte Schema geprüft. Sie laufen nach dem Mapping ohne Custom-Entwicklung.
Schritt 4 - Preview und Launch
Marketing-Teams sehen im Studio-Editor Live-Previews mit echten WEBSALE-Produktdaten. Was im Editor angezeigt wird, ist was live ausgeliefert wird.
Produktdaten: Live-API vs. Feed
Laioutr hat zwei Wege für Produktdaten:
Live-API (Standard): Produktabfragen gehen bei jedem Request direkt an die WEBSALE Storefront-API. Preisänderungen, Bestandsänderungen und Produktstatus sind sofort sichtbar, ohne Cache-Invalidierungslogik.
Feed-Modus (für Katalog-Seiten): Bei sehr großen Katalogen (10.000+ Produkte) kann Laioutr den WEBSALE-Datenfeed über S3/FTP einlesen und in einem optimierten Cache-Layer vorhalten. Kategorie-Seiten laden dann aus dem Cache, Detail-Seiten rufen Live-Preise und Bestände ab.
Kein Datenduplikat im Sinne einer eigenen Datenbank: Laioutr speichert keine Commerce-Daten dauerhaft. Der Cache-Layer ist ein Read-Through-Cache, kein eigenes PIM.
Warenkorb und Checkout
Der Warenkorb-Zustand wird per Session in WEBSALE verwaltet. Laioutr zeigt den Warenkorb-Drawer und triggert Add-to-cart, Update und Remove über die WEBSALE API. Der eigentliche Warenkorb-State lebt auf WEBSALE-Seite.
Für den Checkout gibt es zwei Optionen:
Option A - WEBSALE-Checkout: Laioutr führt den User bis zum Checkout-Schritt und übergibt dann an den nativen WEBSALE-Checkout. Zero-Touch für Bestelllogik und Payment.
Option B - Laioutr Headless Checkout: Laioutr betreibt einen eigenen Headless-Checkout-Layer, der WEBSALE-seitig die Order-Submission-API anspricht. Marketing hat volle Kontrolle über UX und Conversion-Optimierung des Checkout-Flows.
Welche Option besser passt, hängt vom Umfang der B2B-Logik (Preislisten, Freigabeprozesse, Kundengruppen-Preise) und dem gewünschten UX-Grad ab.
Kundenkonten
Login, Registration, Order-History, Adressverwaltung und Account-Einstellungen werden über die WEBSALE API abgewickelt. Laioutr liefert die UI-Komponenten für das Account-Dashboard, das Backend-seitige Datenhaltung liegt vollständig bei WEBSALE.
Das bedeutet: WEBSALE-Betreiber, die B2B-Kundengruppen, individuelle Preislisten oder Freigabe-Workflows nutzen, verlieren nichts. Diese Logik bleibt im WEBSALE-Backend; Laioutr präsentiert sie nur im neuen Frontend-Layer.
Was kein Datenduplikat bedeutet
Ein häufiges Missverständnis bei Headless-Setups: "Jetzt habe ich zwei Systeme, die ich synchron halten muss."
Mit Laioutr ist das falsch. Laioutr ist kein zweites Backend. Es gibt keine zweite Datenbank für Produkte, Preise oder Bestellungen. Der einzige persistente Speicher auf Laioutr-Seite ist der visuelle Page-Content (welche Komponenten sind auf welcher Seite, wie sind Hero-Banner, Landingpages und Kategorieseiten aufgebaut). Commerce-Daten kommen bei jedem Request aus WEBSALE.
EU-Hosting und DSGVO
Laioutr betreibt das Frontend-Layer in EU-Rechenzentren. Keine Datenübertragung in US-Jurisdiktionen, kein Schrems-II-Risiko für Commerce-Daten. Das WEBSALE-Backend läuft bereits in einem deutschen ISO-27001-zertifizierten Rechenzentrum. Das Gesamtkonstrukt ist vollständig EU-seitig.
Für DACH-Betreiber mit Enterprise-Kunden oder Privacy-sensitiven Sortimenten (Gesundheit, B2B-Verhandlungspreise) ist das kein Nice-to-have, sondern Pflicht.
Performance nach Anbindung
Laioutr liefert Frontend-Performance als Plattform-Eigenschaft:
- LCP-Median 1,2 s in Live-Frontends (Q2 2026 Field-Daten)
- Lighthouse 100 out-of-the-box (SSR + Edge-Caching)
- WCAG 3.0 / BFSG-konforme Basis-Komponenten - keine manuelle A11y-Arbeit nach der Anbindung
Die Performance-Eigenschaften kommen nicht von WEBSALE und nicht vom Custom-Code - sie sind Plattform-schicht.
Was Marketing-Teams danach steuern
Nach der Anbindung läuft das Marketing-Team im Studio-Editor selbständig:
- Hero-Banner ändern, ohne Engineer-Ticket
- Neue Landingpages aus Komponenten zusammensetzen (Live-Preview mit echten WEBSALE-Produktdaten)
- Kampagnenseiten in Stunden statt Sprints
- A/B-Tests auf Komponenten-Ebene starten
- Multi-Locale-Content für verschiedene Märkte parallel pflegen
Engineering definiert die Komponenten und Guardrails - Marketing komponiert.
Interne Links
FAQ
Muss WEBSALE-seitig etwas konfiguriert werden?
Nein. Die WEBSALE Storefront-API ist der einzige Touchpoint. Keine WEBSALE-seitige Plugin-Installation, kein Webhook-Setup durch WEBSALE.
Wie sicher ist die API-Verbindung?
API-Calls laufen über HTTPS, Tokens werden server-seitig in Laioutr verwaltet - nicht im Browser exponiert. Standard-Security-Best-Practice für API-First-Integrationen.
Brauche ich ein eigenes Next.js- oder Nuxt-Team?
Nein. Laioutr stellt den Frontend-Layer bereit, basierend auf Nuxt. Dein Team konfiguriert und komponiert, ohne eigene Framework-Expertise.
Wie viele WEBSALE-API-Calls macht Laioutr?
Das hängt vom Traffic und dem gewählten Caching-Modus ab. Mit Feed-Modus für Katalogsseiten und Live-API für Transaktions-Endpunkte (Warenkorb, Checkout, Account) ist das API-Volumen planbar und optimiert.
Was passiert, wenn WEBSALE die API-Version ändert?
Versionsupdates werden im Connect-Layer abgefangen. Komponenten-Code ändert sich nicht. Der Connect-Layer ist der einzige Anpassungspunkt bei API-Versionswechseln.