Konfiguracja

Nudge konfigurujesz na jednym ekranie: WooCommerce → Nudge. Podgląd na żywo pokazuje pasek w miarę zmiany ustawień.

Włącz pasek

Główny przełącznik. Gdy wyłączony, na front-endzie nic się nie ładuje. Gdy włączony, pasek pojawia się w wybranych miejscach — ale tylko gdy istnieje cel darmowej wysyłki do pokazania, a koszyk nie jest pusty.

Tryb progu

Jak Nudge ustala cel darmowej wysyłki:

• Automatyczny — odczytuje minimalną wartość zamówienia z włączonej metody darmowej wysyłki WooCommerce, używając najmniejszej kwalifikującej się kwoty wśród stref wysyłki. Dzięki temu pasek nadąża za realnymi regułami wysyłki; zmień metodę, a pasek podąży za nią.
• Ręczny — ustawiasz stałą kwotę sam, ignorując metody wysyłki.

Jeśli tryb automatyczny nie znajdzie kwalifikującej się metody darmowej wysyłki, wraca do kwoty ręcznej, więc pasek działa, gdy kończysz konfigurację wysyłki. Gdy nie ma żadnego celu, pasek ukrywa się zamiast pokazywać zepsuty lub zawsze ukończony stan.

Miejsca

Gdzie pasek się renderuje:

• Koszyk — na stronie koszyka.
• Zamówienie — na stronie zamówienia.
• Oba — koszyk i zamówienie.

Obsługiwane są zarówno klasyczne szablony, jak i bloki Koszyk/Zamówienie WooCommerce. W dowolnym innym miejscu użyj shortcode [nudge_bar].

Komunikaty

Dwa komunikaty, oba konfigurowalne:

• Komunikat postępu — pokazywany, gdy klient jest poniżej celu. Użyj tokenu {amount} w miejscu, gdzie ma pojawić się pozostała kwota, np. Dodaj jeszcze {amount}, aby uzyskać darmową wysyłkę!.
• Komunikat sukcesu — pokazywany, gdy koszyk osiągnie lub przekroczy cel, np. Masz darmową wysyłkę!.

Token {amount} jest podmieniany na żywo w miarę zmiany koszyka.

Kolory

Kolory paska to zmienne CSS, które ustawiasz w podglądzie na żywo — zwykle kolor toru, kolor wypełnienia (postępu) i kolor tekstu. Projekt jest świadomy trybu ciemnego, więc dostosowuje się do motywów zmieniających schemat kolorów.

Dostępność i ruch

Nie trzeba żadnych ustawień dostępności. Pasek to prawdziwy role="progressbar" z aria-valuenow, aria-valuemin i aria-valuemax oraz czytelną alternatywą tekstową, a animacja wypełnienia respektuje prefers-reduced-motion. Tor rezerwuje wysokość z góry — zero przeskoku układu.

Co widzi klient

Nudge oblicza różnicę między bieżącą wartością koszyka a celem, wypełnia pasek odpowiednio i renderuje na żywo w miarę dodawania lub usuwania pozycji. Po przekroczeniu celu przełącza się na komunikat sukcesu; po opróżnieniu koszyka lub usunięciu celu — ukrywa się.