Korzystanie z paska
Ten przewodnik konfiguruje przyklejony pasek i wyjaśnia dokładnie, co widzą klienci podczas przewijania.
1. Wybierz pozycję
Dział zatytułowany „1. Wybierz pozycję”Otwórz WooCommerce → Anchor i wybierz Dół lub Górę. Dół to zwykły wybór — na telefonie jest w zasięgu kciuka, a na desktopie nie przeszkadza nagłówkowi.
2. Zdecyduj, gdzie działa
Dział zatytułowany „2. Zdecyduj, gdzie działa”Ustaw Desktop i Mobile niezależnie. Częsty układ to tylko mobile: długie karty produktów na telefonach spychają główny przycisk dodania do koszyka wysoko ponad zagięcie, więc przyklejony pasek opłaca się tam najbardziej. Strony desktopowe często dłużej trzymają główny przycisk w widoku, więc część sklepów zostawia go wyłączonym.
3. Dostrój próg przewijania
Dział zatytułowany „3. Dostrój próg przewijania”Ustaw, jak daleko poniżej głównego przycisku dodania do koszyka klient musi przewinąć, zanim pasek się pojawi. Zacznij umiarkowanie: na tyle, by pasek nie błyskał, gdy główny przycisk jest jeszcze na ekranie, ale na tyle wcześnie, by był obecny, gdy klient czyta specyfikację lub opinie niżej.
4. Wybierz elementy
Dział zatytułowany „4. Wybierz elementy”Przełącz miniaturę, cenę i pole ilości. Trzymaj pasek smukły — tytuł i przycisk zakupu są zawsze, dodaj tylko dodatki, których potrzebują Twoi klienci. Pole ilości warto włączyć w sklepach, gdzie częste są zakupy wielosztukowe.
Co widzi klient
Dział zatytułowany „Co widzi klient”- Na produkcie prostym przewiń poniżej głównego przycisku, a pasek wsuwa się z włączonymi elementami. Przewiń z powrotem w górę, a pasek się chowa.
- Na produkcie z wariantami pasek odzwierciedla natywny formularz wariantów WooCommerce. Gdy klient wybiera opcje, cena, dostępność i przycisk zakupu w pasku aktualizują się równolegle. Dopóki nie wybrano poprawnej kombinacji, przycisk zakupu to odzwierciedla, tak jak natywny formularz.
Zachowanie klawiatury i czytnika ekranu
Dział zatytułowany „Zachowanie klawiatury i czytnika ekranu”Pasek to region ARIA. Jest obsługiwany z klawiatury, pokazuje widoczny fokus i zawiera tekst dla czytnika ekranu, więc kontrolki są sensownie ogłaszane. Respektuje prefers-reduced-motion, więc wsuwanie jest wyłączone dla klientów, którzy proszą o ograniczony ruch.
Dlaczego nie ma przeskoku układu
Dział zatytułowany „Dlaczego nie ma przeskoku układu”Pasek jest przypięty do okna i startuje ukryty, więc nigdy nie zajmuje miejsca w przepływie dokumentu. Jego odsłonięcie nie przesuwa Twojej treści — Anchor powoduje zero przesunięć układu. Zasoby ładują się tylko na kartach produktów, a skrypt jest odroczony, więc reszta sklepu pozostaje nietknięta.