B2B-Commerce-Portal: Punchout, Staffelpreise und Schnellerfassung im Frontend

Ein B2B-Onlineshop ist kein B2C-Shop mit einem Firmen-Login oben rechts. Wer Hersteller, Großhändler oder Distributor betreibt, kennt die echten Anforderungen: ein Einkauf im Kundenunternehmen hat Budgetgrenzen, Freigabe-Workflows und Kostenstellen. Der Katalog ist pro Kunde anders sichtbar. Die Preise sind verhandelt, gestaffelt oder kommen direkt aus dem ERP. Und ein Großteil der Bestellungen kommt nicht manuell, sondern via Punchout aus dem Procurement-System des Kunden.

Diese Anforderungen lassen sich mit einem Standard-Shop-Frontend nicht sauber abbilden. Aber sie verlangen auch kein jahrelanges Custom-Build-Projekt. Dieser Post zeigt, wie du die drei kritischsten B2B-Kaufprozess-Bausteine - Punchout, Staffelpreise und Schnellerfassung - als Frontend-Layer auf deinem bestehenden Backend umsetzt.

Alle genannten Komponenten findest du im B2B Growth Kit von Laioutr, das du als komplettes UI-Set auf deinen bestehenden Stack setzen kannst.

Was B2B-Commerce vom B2C-Frontend unterscheidet

Im B2C-Shop entscheidet eine Person, legt in den Warenkorb und zahlt. Im B2B laufen gleichzeitig mehrere Prozesse:

• Mehrere Besteller teilen sich eine Kundenorganisation mit unterschiedlichen Rollen
• Preise kommen aus ERP-Konditionstabellen, nicht aus einem einheitlichen Preislisten-System
• Bestellungen brauchen ab einem bestimmten Wert eine Genehmigung
• Beschaffer arbeiten mit Procurement-Systemen (SAP Ariba, Coupa, Jaggaer), die per Punchout in den Shop gehen
• Großkunden bestellen regelmäßig dieselben Artikel in großen Stückzahlen

Ein Frontend, das diese Realität nicht abbildet, erzwingt Workarounds: PDF-Angebote per E-Mail, telefonische Preisauskunft, manuelle ERP-Exporte. Jeder Workaround kostet Bearbeitungszeit auf deiner Seite und Reibung auf Seite deines Kunden.

Der Lösungsansatz von Laioutr als Frontend Management Platform (FMP) ist ein anderer: Der Frontend-Layer wird entkoppelt vom Backend und deckt die B2B-Logik durch konfigurierbare Komponenten ab, während das Backend - ob SAP, Shopware, commercetools oder OXID - unverändert bleibt.

Punchout (OCI/cXML): der unsichtbare B2B-Kanal

Was Punchout ist und warum er oft fehlt

Punchout bedeutet: der Einkäufer im Unternehmen verlässt sein Procurement-System (z.B. SAP Ariba), "punchet" in deinen Shop, befüllt dort seinen Warenkorb - und der Warenkorb wird als elektronisches Dokument zurück ins Procurement-System übertragen. Die Bestellung läuft dann durch den normalen Freigabeprozess des Kundenunternehmens, bevor sie bei dir als Bestellung ankommt.

OCI (Open Catalog Interface) ist der SAP-Standard dafür. cXML ist der offenere Standard, den Coupa und viele andere Systeme nutzen.

Warum Punchout im Frontend unterschätzt wird

Punchout wird häufig als Backend-Thema behandelt: ERP-Integration, Dokument-Format, Protokoll. Der Frontend-Anteil wird unterschätzt. Dabei ist der Punchout-Flow aus Kundensicht komplett ein Frontend-Erlebnis:

• Die Session-Übergabe (Kundenidentifikation, Konditionsdaten) muss im Frontend ausgewertet werden
• Der Katalog zeigt nur die vertraglich vereinbarten Produkte und Preise für diese Organisation
• Der "Warenkorb übertragen"-Button ist ein UI-Element, das OCI- oder cXML-konformes XML generiert und zurück an das Procurement-System überträgt
• Fehler im Flow (Session abgelaufen, falsche Konditionsdaten) erscheinen als Frontend-Fehlermeldungen

Das B2B Growth Kit enthält Punchout-Komponenten, die sowohl OCI als auch cXML unterstützen. Die Session-Initialisierung, die Katalog-Filterung nach Kundensegment und der Übertragungsprozess sind als fertige Bausteine implementiert und konfigurierbar - du musst das Protokoll nicht selbst implementieren.

Was du für Punchout auf Backend-Seite brauchst

Punchout setzt voraus, dass dein Backend:

• Kundenkonditionen (Preise, Verfügbarkeiten, Katalog-Ausschnitte) über eine API zurückgeben kann
• Punchout-Sessions per Token oder SAML authentifizieren kann
• Bestellungen im cXML- oder OCI-Format empfangen und verarbeiten kann

Das ist typischerweise eine Backend-Aufgabe. Wenn dein Shop oder ERP das noch nicht unterstützt, ist Punchout kein Frontend-Problem - es ist ein Backend-Problem. Der Frontend-Layer kann nur das abbilden, was das Backend liefert.

Staffelpreise: jeder Kunde sieht seine Konditionen

Die Realität hinter Staffelpreisen

"Staffelpreise" klingt einfach: bei Menge 1-9 kostet das Stück X Euro, bei 10-49 kostet es Y Euro. In der Praxis ist es komplexer:

• Konditionen kommen oft direkt aus dem ERP (SAP Condition Records, Shopware Customer Groups, commercetools Price Selectors)
• Derselbe Artikel kann pro Kundenorganisation unterschiedliche Staffeln haben
• Manche Konditionen sind zeitgebunden (Saisonrabatte, Aktionspreise)
• Netto-/Brutto-Umschaltung muss funktionieren, weil Einkäufer netto rechnen, aber der Shop manchmal Bruttopreise zeigt

Ein sauber implementiertes Staffelpreis-Frontend:

1. Ruft beim Laden der Produktdetailseite die Konditionen für den aktuell eingeloggten Kunden ab
2. Zeigt die Staffeln visuell klar (Mengenschwellen, Preis pro Einheit, Gesamtpreis bei aktueller Menge)
3. Aktualisiert die Preisanzeige in Echtzeit, wenn die Mengeneingabe verändert wird
4. Stellt Netto/Brutto umschaltbar dar

Technische Integration ohne Frontend-Custom-Code

Mit der Laioutr Frontend Management Platform und dem B2B Growth Kit verbindet sich die Staffelpreis-Komponente direkt mit der Pricing-API deines Backends. Du konfigurierst, welche API-Felder auf welche UI-Elemente gemappt werden - der Komponenten-Code selbst ändert sich nicht. Das ist der Unterschied zu einem Custom-Build, bei dem jede Backend-Eigenheit als neuer Frontend-Code endet.

Und weiter: die Staffelpreis-Komponente lebt in deiner UI-Library. Sobald du sie einmal konfiguriert hast, kannst du sie in jedem Frontend deiner Marken und Märkte verwenden, ohne sie neu zu bauen.

Was häufig schiefgeht

Zwei typische Probleme beim Staffelpreis-Frontend:

• Preise werden gecacht, obwohl sie kundenindividuell sind: ein anderer Einkäufer der gleichen Organisation sieht dann falsche Konditionen. Lösung: Preise niemals im CDN cachen, immer per Kundenkontext laden.
• Die Mengeneingabe im Quick-Order-Flow und die Staffelpreis-Anzeige auf der Produktdetailseite sind nicht synchronisiert. Ergebnis: Einkäufer sieht in der Schnellerfassung keine Staffelinfo und bestellt eine suboptimale Menge. Lösung: Staffelpreis-Komponente auch im Quick-Order-Context verfügbar machen.

Schnellerfassung (Quick Order): Großmengen in Sekunden

Wer Quick Order braucht

Schnellerfassung ist das wichtigste Differenzierungs-Feature eines B2B-Shops gegenüber einem Consumer-Shop. Wer regelmäßig dieselben Artikel nachbestellt, will nicht jedes Mal durch Kategoriebäume navigieren. Schnellerfassung bedeutet: Artikel-Nummer oder EAN eingeben, Menge eingeben, zum Warenkorb hinzufügen. Fertig.

Typische Nutzer: Einkäufer in Produktionsbetrieben, Lagerleiter mit fixen Nachbestelllisten, Filialleiter die Stammartikel aufstocken.

Drei Varianten in einem Kit

Das B2B Growth Kit enthält drei Schnellerfassungs-Varianten, die denselben Backend-Endpunkt bedienen:

1. Zeilenbasierte Eingabe: Felder für Artikelnummer und Menge, beliebig viele Zeilen, "Alle in den Warenkorb" als ein Action. Optimal für Einkäufer, die die Artikel-IDs im Kopf haben.

2. CSV-Upload: Tabellen-Export aus Excel oder dem eigenen Warenwirtschaftssystem hochladen - der Shop erkennt Artikelnummern und Mengen automatisch. Optimal für große Bestelllisten aus dem Betrieb.

3. Bestelllisten und Warenkorb-Vorlagen: Gespeicherte Listen aus Vorbestellungen als Vorlage. "Monatsbestellung Werk Hamburg" mit einem Klick laden und anpassen. Optimal für wiederkehrende Standardbestellungen.

Validierung im Frontend

Quick Order darf nicht stumm scheitern. Wenn eine Artikelnummer nicht gefunden wird, wenn eine Mindestbestellmenge unterschritten wird oder wenn ein Artikel für diese Kundenorganisation nicht freigegeben ist - das muss sichtbar und erklärend kommuniziert werden, bevor der Einkäufer auf "In den Warenkorb" drückt.

Das klingt selbstverständlich, ist aber in Custom-Builds häufig eine Nachpflege-Aufgabe. Im B2B Growth Kit sind Validation-Feedback und Fehler-States für alle drei Quick-Order-Varianten implementiert.

Freigabe-Workflows und Angebotsanfrage

B2B-Kaufprozesse enden nicht beim Klick auf "Kaufen". Zwei weitere Flows gehören zum vollständigen Frontend:

Freigabe-Workflow (Approval)

Wenn ein Einkäufer eine Bestellung über einem definierten Budgetlimit anlegt, geht sie nicht direkt raus, sondern in einen Genehmigungsprozess. Im Frontend bedeutet das:

• Einkäufer legt Bestellung an, sieht "Wartet auf Genehmigung"
• Genehmiger bekommt Benachrichtigung, sieht offene Genehmigungen in seinem Konto-Bereich
• Genehmiger genehmigt oder lehnt ab, mit optionaler Begründung
• Einkäufer sieht Status-Update

Das Budget-Limit und die Genehmiger-Struktur kommen aus deinem Backend. Das Frontend-Layer sorgt für den sichtbaren Workflow ohne eigene Logik.

Angebotsanfrage (RFQ)

Nicht jede B2B-Bestellung läuft zu Listenpreisen. Für individuelle Großeinkäufe oder neue Produkte braucht es einen RFQ-Prozess (Request for Quotation). Im Frontend:

• Einkäufer fügt Artikel zum Angebotsentwurf hinzu (kein Warenkorb, sondern Angebot)
• Kommentarfeld für Mengen, Liefer- und Preisvorstellungen
• Angebot geht an deinen Vertrieb, der antwortet mit einem verbindlichen Angebot
• Einkäufer kann das Angebot annehmen und in eine Bestellung umwandeln

Das B2B Growth Kit enthält beide Flows als fertige Komponenten. Die Anbindung an dein Workflow-Backend (ERP, OMS, oder einfach eine E-Mail-Benachrichtigung) konfigurierst du im Laioutr Studio.

Self-Service als Entlastung für dein Support-Team

Jede Frage, die ein Einkäufer per Telefon oder E-Mail stellt, kostet dich Bearbeitungszeit. Typische B2B-Self-Service-Funktionen, die diesen Aufwand reduzieren:

• Auftragshistorie mit Lieferstatus und Tracking-Link
• Lieferschein- und Rechnungs-Download
• Retouren-Anfrage (RMA) ohne Telefon
• Wiederkehrende Bestellungen ("Diese Bestellung wiederholen")
• Ansprechpartner mit direktem Kontaktlink

Das sind keine Komfort-Features. Sie bestimmen, ob dein Kundendienst 50 oder 500 B2B-Anfragen pro Woche bearbeitet.

Performance und Compliance ohne Nachrüstung

B2B-Portale laufen oft auf veralteten Stacks, die WCAG und Core Web Vitals nachträglich eingebaut haben. Das kostet Zeit und produziert technische Schulden.

Im B2B Growth Kit sind Trust, Compliance und Performance als Querschnitt in allen Komponenten eingebaut:

• WCAG 2.1 AA und BFSG-ready ab Werk (keine nachträgliche Accessibility-Nachrüstung)
• LCP-Median unter 1,2 Sekunden im Live-Frontend
• SEO- und Schema.org-Markup in Produkt- und Kategorieseiten
• Multi-Locale und DSGVO-konform, EU-gehostet

Fragen zum B2B-Commerce-Frontend

Was muss ich an meinem Backend ändern, um das B2B Growth Kit einzusetzen? Das Kit setzt als Frontend-Layer auf deinen bestehenden Stack. Du brauchst keine Backend-Änderung, solange dein Backend die nötigen APIs bereitstellt (Produkte, Preise, Bestelllogik, Kundendaten). Was häufig fehlt, sind kundenindividuelle Preis-APIs - das ist dann ein Backend-Thema, kein Frontend-Thema.

Funktioniert Punchout auch mit cXML, wenn unsere Großkunden Coupa nutzen? Ja. Die Punchout-Komponenten im B2B Growth Kit unterstützen sowohl OCI (SAP-Standard) als auch cXML. Welche Standards dein Backend auf Empfängerseite unterstützt, bestimmt, welche Procurement-Systeme anbindbar sind.

Können wir Staffelpreise und Punchout gleichzeitig nutzen? Ja. In einer Punchout-Session werden die Konditionen aus deinem Backend für den jeweiligen Kunden geladen - inklusive Staffelpreise. Punchout und Staffelpreis-Anzeige sind dieselbe Konditions-Logik, nur in einem anderen Session-Kontext.

Wie lange dauert die Implementierung typischerweise? Ein vollständiges B2B-Portal mit Punchout, Staffelpreisen, Quick Order und Freigabe-Workflow ist typischerweise in 4 bis 8 Wochen live - abhängig von der Komplexität der Backend-APIs und der Anzahl der Marken und Märkte.

Können wir auch nach dem Launch neue Seiten hinzufügen? Ja. Das ist einer der Kern-Vorteile der Laioutr Frontend Management Platform: Marketing kann neue Landingpages und Seiten direkt im Editor zusammenstellen, ohne Developer-Ticket. Der Ausgangspunkt ist immer das B2B Growth Kit als Komponenten-Basis.

Fazit: Frontend-Layer, nicht Custom-Build

B2B-Commerce-Portale scheitern häufig nicht an fehlenden Features, sondern an der Zeit, die es braucht, diese Features zu bauen und zu pflegen. Jede B2B-Eigenheit - Punchout, Staffelpreise, Freigaben - endet als Custom-Code, der beim nächsten Backend-Update gewartet werden muss.

Der andere Weg: ein composable Frontend mit fertig entwickelten B2B-Komponenten auf deinem bestehenden Stack. Kein Replatforming, kein Greenfield-Projekt, kein Lock-in.

Das B2B Growth Kit enthält alle beschriebenen Komponenten als testbares, produktionsreifes UI-Set. Eine Übersicht aller acht branchenspezifischen Kits findest du im Hub zu den UI Growth Kits.

Wenn du wissen willst, welche Komponenten für deinen Stack und dein Backend passen, reden wir kurz.

Laioutr ist die [Frontend Management Platform (FMP)](https://www.laioutr.com/composable-headless-frontend) für Composable Commerce. Das [Content-Management-Produkt](https://www.laioutr.com/product/content-management) ermöglicht deinem Marketing-Team, Seiten im Editor zu komponieren, ohne Developer-Abhängigkeit.