Uhr
Das Widget Uhr ist der Dringlichkeits-Treiber: ein lebendiger, tickender Countdown, der zeigt, wie viel Zeit bis zur heutigen Cutoff-Zeit verbleibt. Sobald das Cutoff überschritten wird, rollt der Countdown auf das Cutoff des nächsten Werktags.
Was es anzeigt
Abschnitt betitelt „Was es anzeigt“Order in the next 02 hours 14 minutes 39 seconds for dispatch MonDer Text setzt sich aus vier Beschriftungen zusammen (konfigurierbar pro Sales Channel in der Karte Widget → Uhr):
- Bestellen Sie in den nächsten — Beschriftung vor dem Countdown
- Bestellen Sie in den nächsten mit Tagen — alternative Beschriftung, wenn der Countdown mehr als einen Tag umfasst (
%days% %transDays%) - Zum Versand — Beschriftung nach dem Countdown
- Datum — das formatierte Versanddatum (Standard:
%shippingMinDate%)
Layout-Varianten
Abschnitt betitelt „Layout-Varianten“Die Uhr unterstützt zwei Layouts und zwei Varianten:
clockLayout | Verhalten |
|---|---|
default | Gestapelt: Versandinfo oben, Countdown unten |
compact | Nebeneinander: Info links, Countdown rechts |
Für das Compact-Layout wählen Sie zusätzlich Kompakte Textreihenfolge:
orderFirst— Zeile “Bestellen Sie in den nächsten” zuerst, dann die VersandzeiledispatchFirst— Versandzeile zuerst, dann “Bestellen Sie in den nächsten”
Variante
Abschnitt betitelt „Variante“clockVariant | Verhalten |
|---|---|
default (Kreise) | Stunden/Minuten/Sekunden als animierte SVG-Fortschrittskreise |
boxes | Ziffern als Box-Zahlen mit konfigurierbarer Rahmenbreite und -radius |
Konfigurierbare Farben und Größen
Abschnitt betitelt „Konfigurierbare Farben und Größen“Die Karte Widget → Uhr bietet einen vollständigen Satz an Styling-Feldern:
- Icon: Toggle
clockWithIcon,clockIcon(Icon-Picker),clockIconColor,clockIconSize - Hintergrund:
clockBackground,clockCircleBackground - Text:
clockTextColor,clockTextFontSize - Ziffern:
clockDigitsColor,clockDigitsFontSize - Einheiten (s / m / h):
clockUnitsFontSize - Kreis-Zeiger (Default-Variante):
clockCircleHoursColor,clockCircleMinutesColor,clockCircleSecondsColor - Box-Rahmen (Boxes-Variante):
clockBorderWidth,clockBorderRadius - Skeleton-Loader:
clockSkeletonBackground,clockSkeletonShimmerDarkColor,clockSkeletonShimmerLightColor
Der Icon-Picker nutzt die P2Lab-Icon-Bibliothek — suchen Sie nach “truck”, “shopping-basket”, “clock” usw.
Datumsformat
Abschnitt betitelt „Datumsformat“Der Countdown tickt in Echtzeit, das Versanddatum daneben wird jedoch mit einem Datumsformat pro Widget gerendert (clockDateFormat). Wählen Sie aus der langen Liste PHP-ähnlicher Formate (d/m, D, jS M, l, j F, …) oder wählen Sie Standard, um das globale Format aus der Tab Einstellungen zu erben.
Wenn das Cutoff noch nicht überschritten ist
Abschnitt betitelt „Wenn das Cutoff noch nicht überschritten ist“Heute ist Werktag, aktuelle Zeit liegt vor dem Cutoff: Die Uhr zählt zur heutigen Cutoff-Zeit herunter und die Versand-Beschriftung zeigt heute.
Wenn das Cutoff überschritten ist
Abschnitt betitelt „Wenn das Cutoff überschritten ist“Heute ist Werktag, das Cutoff ist aber bereits vorbei, oder heute ist Nicht-Werktag (z. B. Wochenende / Feiertag): Die Uhr zählt zum nächsten Cutoff des nächsten Werktags herunter und die Versand-Beschriftung zeigt das entsprechende Datum (z. B. Mon).
Wenn der Countdown mehr als 24 Stunden überspannt (z. B. Bestellung Freitagabend für Montagsversand), wird die alternative Beschriftung Bestellen Sie in den nächsten mit Tagen verwendet und die Tagesanzahl wird neben den Stunden/Minuten/Sekunden angezeigt.
Skeleton-Loader
Abschnitt betitelt „Skeleton-Loader“Da die genaue verbleibende Zeit von der Uhr des Benutzers abhängt, wird der Wert client-seitig berechnet. Bis dahin (typisch wenige hundert Millisekunden) zeigt die Uhr ein Shimmer-Skeleton — Farben konfigurierbar in derselben Karte. Global über den Toggle Layout → Skelett-Lader deaktivieren.