Korzystanie z paska

Ten przewodnik obejmuje umieszczanie paska, pisanie komunikatów, które konwertują, oraz użycie shortcode w niestandardowych miejscach.

1. Pozwól Nudge odczytać cel automatycznie

Jeśli masz już metodę darmowej wysyłki (np. Darmowa wysyłka powyżej 200 zł), pozostaw tryb progu na Automatyczny. Nudge odczytuje najmniejszą kwalifikującą się minimalną wartość zamówienia wśród stref, więc pasek zawsze pasuje do reguły, którą klient faktycznie napotka przy zamówieniu. Gdy zmienisz regułę wysyłki, pasek podąży za nią — nic nie trzeba synchronizować ręcznie.

Nie masz jeszcze metody darmowej wysyłki? Przełącz na Ręczny i wpisz kwotę. Później możesz wrócić do trybu automatycznego.

2. Wybierz, gdzie się pokazuje

Ustaw miejsce na Koszyk, Zamówienie lub Oba. Koszyk to miejsce, gdzie większość klientów decyduje, czy dołożyć jeszcze jedną pozycję, więc daje największy efekt. Pasek działa zarówno na klasycznych szablonach, jak i na blokach Koszyk/Zamówienie, bez dodatkowej konfiguracji.

3. Napisz komunikaty, które motywują

Użyj tokenu {amount}, aby komunikat zawsze pokazywał dokładną różnicę:

Dodaj jeszcze {amount}, aby uzyskać darmową wysyłkę!

Następnie napisz komunikat sukcesu na moment osiągnięcia celu:

Świetnie — masz darmową wysyłkę!

Oba krótkie. Komunikat postępu przekonuje; komunikat sukcesu potwierdza wygraną.

4. Umieść pasek gdziekolwiek za pomocą shortcode

[nudge_bar]

Wstaw [nudge_bar] na dowolną stronę, wpis lub widget — obszar mini-koszyka, sidebar, landing page. Renderuje postęp bieżącego koszyka do darmowej wysyłki i ukrywa się, gdy koszyk jest pusty lub nie ma celu, więc nigdy nie pokazuje zepsutego paska w nieoczekiwanym miejscu.

Jak zachowuje się na żywo

• Gdy klient dodaje pozycje, pasek renderuje się ponownie i animuje w kierunku celu.
• Gdy koszyk osiągnie cel, komunikat przełącza się na tekst sukcesu.
• Gdy koszyk jest opróżniony lub nie ma celu, pasek ukrywa się całkowicie.

Wszystko to działa na maleńkim skrypcie bez zależności — Nudge nie dodaje jQuery.

Dostępność i Core Web Vitals

Pasek to prawdziwy role="progressbar" z aria-valuenow/min/max i alternatywą tekstową, więc technologie wspomagające w sensowny sposób ogłaszają postęp. Tor rezerwuje wysokość przed renderowaniem wypełnienia (zero CLS), a animacja respektuje prefers-reduced-motion.