Widget

Die Tab Widget ist die umfangreichste — sie steuert alles, was der Kunde sieht: welche Widgets aktiv sind, ihre Reihenfolge, ihre Farben und Schriften sowie den Tooltip neben der Nachricht.

Die rechte Seite zeigt eine Live-Vorschau, die bei jeder Änderung neu rendert. Iterieren Sie über das Styling, ohne den Storefront neu zu laden.

Karte Layout

Steuert die Komposition des Widgets — welche Teile gerendert werden, in welcher Reihenfolge, und wie sie verteilt werden.

Feld	Zweck
Nachricht (`messageActive`)	Nachrichtenzeile ein-/ausschalten
Nachrichtenposition (`messagePosition`)	Wo die Nachricht zwischen den anderen Widgets sitzt (kleinere Zahl = weiter oben)
Uhr (`clockActive`)	Live-Countdown ein-/ausschalten
Uhrenposition (`clockPosition`)	Dasselbe für die Uhr
Schritte (`stepsActive`)	Drei-Schritt-Zeitleiste ein-/ausschalten
Schritteposition (`stepsPosition`)	Dasselbe für die Schritte
Abstand zwischen Elementen (`layoutGap`)	CSS-Einheit — Abstand zwischen aktiven Teilen
Polsterung (`layoutPadding`)	CSS-Shorthand — inneres Padding des Wrappers
Rand (`layoutMargin`)	CSS-Shorthand — äußerer Margin des Wrappers
Skelett-Lader (`skeletonLoaderActive`)	Master-Schalter für Shimmer-Skeleton

Positionen sind einfache Ganzzahlen — 0, 1, 2. Setzen Sie eine aktive Komponente auf eine niedrigere Zahl, um sie nach oben zu verschieben.

Karte Nachricht

Standard-Aussehen für die Nachrichtenzeile plus den Nachrichtentext. Platzhalter im Snippet siehe Widgets → Nachricht.

Felder: messageColor, messageBackground, messagePadding, messageBorderWidth, messageBorderColor, messageBorderRadius, messageBorderStyle, messageFontSize, messageText plus drei Skeleton-Farben.

Der Tooltip ist das kleine Icon (und das Popover dahinter), das der Platzhalter %tooltip% einfügt.

Felder: tooltipIconColor, tooltipIconBackground, tooltipTextColor, tooltipTextBackground, tooltipTextFontSize, tooltipMinWidth, tooltipMaxWidth, tooltipText.

Karte Uhr

Die Uhr hat die meisten Optionen — zwei Layouts, zwei Varianten und ein separates Icon. Visuelle Unterschiede siehe Widgets → Uhr.

Wichtige Felder:

Layout: default (gestapelt) oder compact (nebeneinander)
Kompakte Textreihenfolge: orderFirst oder dispatchFirst (nur in Compact-Layout)
Variante: default (Kreise) oder boxes
Rahmenbreite / -radius der Ziffernboxen: nur in der boxes-Variante
Datumsformat: Override des globalen Datumsformats pro Uhr
Snippets: clockOrderInTheNext, clockOrderInTheNextWithDays, clockForDispatch, clockForDispatchDate
Farben: clockBackground, clockTextColor, clockIconColor, clockDigitsColor, clockCircleBackground, clockCircleHoursColor, clockCircleMinutesColor, clockCircleSecondsColor
Größen: clockTextFontSize, clockDigitsFontSize, clockUnitsFontSize, clockIconSize

Karten Fortschrittsbalken und Schritt 1 / Schritt 2 / Schritt 3

Die Karte Fortschrittsbalken steuert das Gesamtaussehen der Zeitleiste (Variante, Titel-/Datums-Typografie, Icon-Stil). Jeder Schritt hat dann eine eigene Karte mit:

Aktiv — nur Schritt 1 und Schritt 2, Schritt 3 immer sichtbar
Symbol — aus der P2Lab-Icon-Bibliothek gewählt
Titel — Snippet-Feld
Datum — Snippet-Feld

Siehe Widgets → Schritte für Standardwerte und Platzhalter.

Live-Vorschau

Die rechte Spalte der Widget-Tab zeigt eine funktionierende Vorschau der aktuellen Konfiguration. Die Vorschau verwendet Beispieldaten (heute + ein paar Tage, ein Beispiel-Cutoff), damit Sie sehen, wie das Layout auf Farb-, Größen- und Reihenfolge-Änderungen reagiert.

Die Vorschau ist read-only — jede Bearbeitung läuft über das Formular links. Verwenden Sie sie als finale Prüfung vor dem Klick auf Speichern.