Clock
The Clock widget is the urgency driver: a live, ticking countdown that shows how much time is left before today’s cutoff. When the cutoff is passed, the countdown rolls over to the next working day’s cutoff.
What it shows
Section titled “What it shows”Order in the next 02 hours 14 minutes 39 seconds for dispatch MonThe text is composed from four labels (configurable per sales channel on the Widget → Clock card):
- Order in the next — label before the countdown
- Order in the next with days — alternative label used when the countdown spans more than one day (
%days% %transDays%) - For dispatch — label after the countdown
- Date — the formatted dispatch date (defaults to
%shippingMinDate%)
Layout variants
Section titled “Layout variants”The Clock supports two layouts and two variants:
Layout
Section titled “Layout”clockLayout | Behaviour |
|---|---|
default | Stacked: dispatch info on top, countdown below |
compact | Side-by-side: info on the left, countdown on the right |
For the compact layout you also choose Compact text order:
orderFirst— “Order in the next” line first, then the dispatch linedispatchFirst— dispatch line first, then “Order in the next”
Variant
Section titled “Variant”clockVariant | Behaviour |
|---|---|
default (circles) | The hours/minutes/seconds are drawn as animated SVG progress circles |
boxes | The digits are rendered as boxed numbers, with configurable border width and border radius |
Configurable colours and sizes
Section titled “Configurable colours and sizes”The Widget → Clock card exposes a full set of styling fields:
- Icon:
clockWithIcontoggle,clockIcon(icon picker),clockIconColor,clockIconSize - Background:
clockBackground,clockCircleBackground - Text:
clockTextColor,clockTextFontSize - Digits:
clockDigitsColor,clockDigitsFontSize - Units (s / m / h labels):
clockUnitsFontSize - Circle hands (default variant):
clockCircleHoursColor,clockCircleMinutesColor,clockCircleSecondsColor - Box borders (boxes variant):
clockBorderWidth,clockBorderRadius - Skeleton loader:
clockSkeletonBackground,clockSkeletonShimmerDarkColor,clockSkeletonShimmerLightColor
The icon picker uses the P2Lab icon library — search “truck”, “shipping-basket”, “clock” etc.
Date format
Section titled “Date format”The countdown ticks in real time but the dispatch date next to it is rendered using a date format you can pick per widget (clockDateFormat). Pick from the long list of PHP-style formats (d/m, D, jS M, l, j F, …) or select Default to inherit the global format from the Settings tab.
When the cutoff hasn’t been passed
Section titled “When the cutoff hasn’t been passed”Today is a working day, current time is before the cutoff: the clock counts down to today’s cutoff time, and the dispatch label shows today.
When the cutoff has been passed
Section titled “When the cutoff has been passed”Today is a working day but the cutoff is already in the past, or today is a non-working day (e.g. weekend / holiday): the clock counts down to the next working day’s cutoff, and the dispatch label shows the corresponding date (e.g. Mon).
If the countdown spans more than 24 hours (e.g. ordering Friday evening for Monday dispatch), the Order in the next with days label is used and the day count is shown alongside the hours/minutes/seconds.
Skeleton loader
Section titled “Skeleton loader”Because the exact remaining time depends on the user’s clock, the value is computed client-side. Until that happens (typically a few hundred milliseconds), the clock renders a shimmer skeleton — colours configurable in the same card. Disable it globally with the Layout → Skeleton loader toggle if you prefer.