Kroki

Widget Kroki renderuje cykl życia zamówienia jako trzy-krokową wizualną oś czasu. To najpełniejszy z trzech widgetów — najlepiej działa na karcie produktu i w checkoucie, gdzie klient chce potwierdzić całą drogę przed kliknięciem “Kup”.

Trzy kroki

Krok	Tytuł (domyślny)	Data (domyślna)
1	Order	`%todayDate%`
2	Shipping	`%shippingMinDate%`
3	Estimated Delivery	`%deliveryMinDate% - %deliveryMaxDate%`

Każdy krok ma własną ikonę (icon picker), tytuł (snippet) i datę (snippet) — wszystkie edytowalne w kartach Widget → Step 1 / Step 2 / Step 3.

Kroki 1 i 2 mają przełącznik Active, więc można je ukryć, jeśli chcesz wyróżnić tylko datę dostawy. Krok 3 (dostawa) jest zawsze pokazany.

Warianty

Pole stepsVariant oferuje dwa style wizualne:

default — połączone węzły z poziomymi liniami łączącymi
arrows — segmenty kroków w kształcie strzałek, każdy wskazujący na następny

Konfigurowalne kolory i rozmiary

Karta Widget → Steps udostępnia:

stepsVariant — default lub arrows
stepsTitleColor / stepsTitleFontSize
stepsDateColor / stepsDateFontSize
stepsBackground / stepsBorderColor
stepsWithIcons — przełącznik kolumny ikon
stepsIconColor / stepsIconBackground
Skeleton: stepsSkeletonBackground / stepsSkeletonShimmerDarkColor / stepsSkeletonShimmerLightColor

Każda karta kroku (Step 1 / Step 2 / Step 3) dodaje:

stepXIcon — icon picker dla kroku (Krok 1 domyślnie ma regular-shopping-basket)
stepXTitle — pole snippetu (P2LabEstimatedDelivery.widget.steps.stepX.title)
stepXDate — pole snippetu (P2LabEstimatedDelivery.widget.steps.stepX.date)

Snippety dat

Pole date kroku jest też snippetem, więc możesz mieszać placeholdery. Na przykład zmień datę kroku 3 z:

%deliveryMinDate% - %deliveryMaxDate%

na pojedynczą estymatę:

~%deliveryMaxDate%

albo na etykietę relatywną:

za %deliveryMaxDays% %transDays%

Pełna lista placeholderów: Reference → Snippet variables.

Łączenie kroków z innymi widgetami

Częsty układ na karcie produktu:

Kroki na górze (stepsPosition: 0) — wizualne potwierdzenie drogi
Zegar w środku (clockPosition: 1) — pilność
Komunikat na dole (messagePosition: 2) — tooltip z disclaimerami

W koszyku często wystarczy sam widget Kroki.