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	Order	%todayDate%
2	Shipping	%shippingMinDate%
3	Estimated Delivery	%deliveryMinDate% - %deliveryMaxDate%

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

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

Varianten

Das Feld stepsVariant bietet zwei visuelle Stile:

• default — verbundene Knoten mit horizontalen Verbindungslinien
• arrows — Pfeil-förmige Schritt-Segmente, jedes auf das nächste zeigend

Konfigurierbare Farben und Größen

Die Karte Widget → Steps bietet:

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

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

• stepXIcon — Icon-Picker für den Schritt (Step 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 Date-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.