Korzystanie z paska

Ta strona opisuje codzienną pracę z paskiem: automatyczny odczyt celu, komunikaty, które przekonują, i dopasowanie wyglądu do motywu.

1. Pozwól Shiplume odczytać cel automatycznie

Jeśli masz już metodę darmowej wysyłki (na przykład Darmowa wysyłka od 200 zł), zostaw źródło progu na Automatic. Shiplume bierze najmniejszą kwalifikującą się minimalną kwotę zamówienia ze wszystkich stref, także “Reszta świata”, więc pasek zawsze pokazuje regułę, na którą klient faktycznie trafi na kasie. Zmienisz regułę wysyłki, pasek podąży za nią; nie ma nic do ręcznego synchronizowania.

Liczą się tylko metody z wymaganiem Minimalna kwota zamówienia (albo w wariancie z kuponem, “lub kupon” / “i kupon”). Metoda wymagająca tylko kuponu nie ma kwoty, do której można odliczać, i jest pomijana. Gdy Shiplume nie znajdzie kwalifikującej się metody, używa kwoty ręcznej, więc pasek działa, zanim skończysz konfigurować wysyłkę.

Nie masz jeszcze metody darmowej wysyłki? Ustaw źródło na Manual i wpisz kwotę. Później możesz wrócić do trybu automatycznego.

2. Wybierz, gdzie się pokazuje

Zaznacz Cart page, Checkout page albo oba w sekcji General. W koszyku większość klientów decyduje, czy dołożyć jeszcze jedną pozycję, więc to zwykle najskuteczniejsze miejsce. Pasek wymaga klasycznego koszyka i kasy (shortcode [woocommerce_cart] i [woocommerce_checkout]); na blokach Koszyk i Zamówienie się nie pokazuje.

3. Napisz komunikaty, które motywują

Użyj tokenu {amount} w komunikacie postępu, żeby zawsze pokazywał dokładną brakującą kwotę w walucie sklepu:

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

Potem napisz komunikat sukcesu na moment osiągnięcia celu. Bez tokenu, bo nie ma już czego dodawać:

Świetnie, masz darmową wysyłkę!

Oba krótkie. Komunikat postępu przekonuje, komunikat sukcesu potwierdza wygraną. Puste pole oznacza domyślny tekst z paczki.

Jak zachowuje się na żywo

WooCommerce przy każdej zmianie koszyka renderuje ponownie sumy koszyka i kasy, a razem z nimi pasek Shiplume. Świeży kod z serwera ma już poprawną szerokość i komunikat, więc pasek jest dokładny nawet bez JavaScriptu. Jedyny skrypt Shiplume to wykończenie: nasłuchuje zdarzeń WooCommerce updated_cart_totals, updated_checkout i updated_shipping_method i animuje wypełnienie od poprzedniej szerokości do nowej, żeby zmiana płynęła zamiast skakać. Skrypt nie ma zależności (bez własnego jQuery), ładuje się z defer w stopce i jest całkowicie pomijany przy prefers-reduced-motion.

• Dodajesz pozycje, pasek przesuwa się w stronę celu.
• Osiągasz cel, komunikat zmienia się na tekst sukcesu, a wypełnienie staje się jednolite (tam, gdzie ruch jest dozwolony, raz odtwarza się efekt przekroczenia mety).
• Opróżniasz koszyk albo nie ma celu, pasek nie wypisuje nic.

Własne kolory

W panelu nie ma ustawienia kolorów. Każdy kolor, rozmiar i promień to zmienna CSS w przestrzeni --nudge-* na elemencie .nudge, więc wygląd paska zmieniasz w arkuszu stylów motywu, bez ruszania znaczników:

.nudge {
  --nudge-pace-start: #6366f1; /* gradient wypełnienia: "w drodze" */
  --nudge-pace-end:   #22c55e; /* gradient wypełnienia: "prawie", jednolity po osiągnięciu celu */
  --nudge-fill:       var(--nudge-pace-end); /* kolor zapasowy */
  --nudge-track:      #e8eaed; /* niewypełniony tor */
  --nudge-line:       #15803d; /* znacznik mety */
  --nudge-success:    #15803d; /* komunikat sukcesu i pełne wypełnienie */
  --nudge-fg:         inherit; /* kolor tekstu komunikatu */
  --nudge-track-height: 0.75rem;
  --nudge-radius:     999px;
  --nudge-gap:        0.5rem;  /* odstęp między komunikatem a torem */
  --nudge-font-size:  0.95rem;
}

Pasek sam dopasowuje się do ciemnych schematów kolorów przez prefers-color-scheme: rozjaśnia tor i zieleń, żeby wypełnienie było czytelne. Wersja w tabeli sum (.nudge--inline) automatycznie używa nieco mniejszego toru i czcionki.

Dostępność i Core Web Vitals

Pasek to prawdziwy role="progressbar" z aria-valuenow/aria-valuemin/aria-valuemax i etykietą aria-label “Progress towards free shipping”. Czytelny komunikat jest w uprzejmym regionie na żywo (role="status", aria-live="polite", aria-atomic="true"), więc czytnik ekranu po zmianie koszyka odczyta całe nowe zdanie, nigdy nie po każdym naciśnięciu klawisza. Szerokość wypełnienia jest ustawiana inline, więc pasek jest poprawny od pierwszego malowania, a tor z góry rezerwuje pełną wysokość, dzięki czemu pasek nie dokłada nic do Cumulative Layout Shift.

Zmiana znaczników

Pasek renderuje się z pliku templates/progress-bar.php wewnątrz wtyczki. Shiplume nie wczytuje nadpisanej kopii z motywu, więc zmiana znaczników oznacza wtyczkę potomną albo fork, a nie szablon w twojmotyw/nudge/. Do zmian wizualnych wystarczą opisane wyżej zmienne --nudge-*, bez edycji PHP.

Rozszerzanie Shiplume

Dla programistów Shiplume udostępnia kilka hooków:

• nudge/threshold (filtr), ustalony cel darmowej wysyłki jako liczba zmiennoprzecinkowa, z tablicą ustawień jako drugim argumentem. Zwróć własną kwotę, żeby nadpisać zarówno wykrytą automatycznie, jak i ręczną.
• nudge/bar_context (filtr), dane renderowane przez szablon: context, percent, reached, message, threshold, total i remaining, z tablicą ustawień jako drugim argumentem. Tu przepiszesz komunikat albo przytniesz procent.
• nudge/bar_rendered (akcja), wywoływana z tym samym kontekstem i ustawieniami tuż przed wczytaniem szablonu.
• nudge/booted (akcja), wywoływana raz z instancją wtyczki po starcie Shiplume.

Nie ma filtra na same znaczniki, a szablonu nie da się nadpisać w motywie. Całą resztę konfigurujesz w WooCommerce > Shiplume, a wygląd zmieniasz opisanymi wyżej zmiennymi CSS.