Przegląd

Widget Estimated Delivery składa się z trzech niezależnych części. Każdą można niezależnie włączyć/wyłączyć, przestawiać kolejnością, restylizować i tłumaczyć. Wszystkie korzystają z tych samych danych — dzisiejszej daty, wyliczonego okna wysyłki, wyliczonego okna dostawy, odliczania cut-off — ale renderują je inaczej.

Trzy części

Widget	Cel	Najlepiej, gdy
Komunikat	Jednolinijkowiec z cut-offem i dniem nadania	Chcesz kompaktowe “wysyłka pn” obok przycisku Do koszyka
Zegar	Żywe odliczanie do dzisiejszego cut-offu	Chcesz pilności — “Zamów w ciągu 02:34:12 — wysyłka dziś”
Kroki	Trzy-krokowa oś czasu: zamówienie → wysyłka → dostawa	Chcesz pełniejszej, wizualnej prezentacji na karcie lub w koszyku

Nie musisz wybierać jednego. Widget renderuje wszystkie trzy w jednym kontenerze — wyłącz te, których nie potrzebujesz, i przestaw resztę. W koszyku możesz pokazać tylko komunikat, na karcie produktu wszystkie trzy.

Kompozycja

Wewnątrz widget to pojedynczy <div> opakowujący aktywne komponenty w wybranej kolejności. Kolejność kontrolujesz polem Position na każdym komponencie, a odstęp między nimi — polem Space between elements.

┌─ kontener widgetu ─────────────────────────────────────┐
│  [ Zegar ]                                             │  pozycja 0
│                                                        │
│  [ Kroki ]                                             │  pozycja 1
│                                                        │
│  [ Komunikat ]                                         │  pozycja 2
└────────────────────────────────────────────────────────┘

Każda część widgetu ma własne ustawienia koloru, fontu, ramki i skeleton loadera — mogą wyglądać zupełnie inaczej od siebie.

Skeleton loader

Widget jest renderowany po stronie serwera z datami, które storefront już zna, ale w bardzo dynamicznych konfiguracjach (np. za Varnishem) finalne daty pochodzą z lekkiej hydratacji client-side. Podczas tej fazy każda część pokazuje shimmer skeleton w swoim własnym kolorze tła — żeby układ się nie przesuwał. Skeleton można wyłączyć per widget w Layout → Skeleton loader.

Gdzie się renderuje

Ten sam widget renderuje się na:

• Karcie produktu — pod przyciskiem Do koszyka (domyślne umiejscowienie).
• Koszyku — raz na koszyk, zwykle nad podsumowaniem.
• Potwierdzeniu zamówienia — raz na podsumowaniu zamówienia.
• Stronie rejestracji — dobra do podkreślenia szybkiej dostawy dla nowych klientów.
• Dowolnej stronie CMS — przez dedykowany blok Estimated Delivery w Shopping Experiences.

Każdy kontekst niezależnie włącza/wyłącza widget przez własną zakładkę konfiguracji.

Dalej

• Komunikat
• Zegar
• Kroki