Schritte

Das Widget Schritte rendert den Lebenszyklus einer Bestellung als drei-stufige visuelle Zeitleiste. Es ist das vollständigste der drei Widgets — am besten auf Produktseite und Checkout, wo Kunden den gesamten Weg vor dem Klick auf “Kaufen” bestätigen möchten.

Die drei Schritte

Schritt	Titel (Standard)	Datum (Standard)
1	Bestellung	%todayDate%
2	Versand	%shippingMinDate%
3	Voraussichtliche Lieferung	%deliveryMinDate% - %deliveryMaxDate%

Jeder Schritt hat ein eigenes Icon (Icon-Picker), einen Titel (Snippet) und ein Datum (Snippet) — alle bearbeitbar in den Karten Widget → Schritt 1 / Schritt 2 / Schritt 3.

Die Schritte 1 und 2 haben einen Aktiv-Toggle, sodass Sie sie ausblenden können, wenn Sie nur das Lieferdatum hervorheben möchten. Schritt 3 (Lieferung) wird immer angezeigt.

Varianten

Das Feld Variante (stepsVariant) bietet drei visuelle Stile:

• Standard (default) — verbundene Knoten mit horizontalen Verbindungslinien
• Pfeile (arrows) — Pfeil-förmige Schritt-Segmente, jedes auf das nächste zeigend
• Kompakt (compact) — Symbol und Text nebeneinander, linksbündig; passt der Text nicht daneben, wird er unter das Symbol umgebrochen

Konfigurierbare Farben und Größen

Die Karte Widget → Fortschrittsbalken bietet:

• stepsVariant — default, arrows oder compact
• stepsTitleColor / stepsTitleFontSize
• stepsDateColor / stepsDateFontSize
• stepsBackground / stepsBorderColor
• stepsWithIcons — Toggle für die Icon-Spalte
• stepsIconColor / stepsIconBackground
• Skeleton: stepsSkeletonBackground / stepsSkeletonShimmerDarkColor / stepsSkeletonShimmerLightColor

Jede Schritt-Karte (Schritt 1 / Schritt 2 / Schritt 3) ergänzt:

• stepXIcon — Icon-Picker für den Schritt (Schritt 1 standardmäßig regular-shopping-basket)
• stepXTitle — Snippet-Feld (P2LabEstimatedDelivery.widget.steps.stepX.title)
• stepXDate — Snippet-Feld (P2LabEstimatedDelivery.widget.steps.stepX.date)

Datums-Snippets

Das Datum-Feld eines Schritts ist ebenfalls ein Snippet, sodass Sie Platzhalter mischen können. Ändern Sie z. B. das Datum von Schritt 3 von:

%deliveryMinDate% - %deliveryMaxDate%

auf eine einzelne Schätzung:

~%deliveryMaxDate%

oder ein relatives Label:

in %deliveryMaxDays% %transDays%

Vollständige Platzhalter-Liste: Reference → Snippet-Variablen.

Kombination mit den anderen Widgets

Häufiges Setup auf der Produktseite:

1. Schritte oben (stepsPosition: 0) — visuelle Bestätigung des Weges
2. Uhr in der Mitte (clockPosition: 1) — Dringlichkeit
3. Nachricht unten (messagePosition: 2) — Tooltip mit Disclaimern

Im Warenkorb reicht oft nur das Widget Schritte.