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
Message (`messageActive`)	Nachrichtenzeile ein-/ausschalten
Message Position (`messagePosition`)	Wo die Nachricht zwischen den anderen Widgets sitzt (kleinere Zahl = weiter oben)
Clock (`clockActive`)	Live-Countdown ein-/ausschalten
Clock Position (`clockPosition`)	Dasselbe für die Uhr
Steps (`stepsActive`)	Drei-Schritt-Zeitleiste ein-/ausschalten
Steps Position (`stepsPosition`)	Dasselbe für die Schritte
Space between elements (`layoutGap`)	CSS-Einheit — Abstand zwischen aktiven Teilen
Padding (`layoutPadding`)	CSS-Shorthand — inneres Padding des Wrappers
Margin (`layoutMargin`)	CSS-Shorthand — äußerer Margin des Wrappers
Skeleton loader (`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 Message

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 Clock

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)
Compact text order: orderFirst oder dispatchFirst (nur in Compact-Layout)
Variant: default (Kreise) oder boxes
Border width / radius: nur in der boxes-Variante
Date format: 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 Steps und Step 1 / Step 2 / Step 3

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

Active — nur Step 1 und Step 2, Step 3 immer sichtbar
Icon — aus der P2Lab-Icon-Bibliothek gewählt
Title — Snippet-Feld
Date — 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.