# Moduł Paska Nawigacji Mobilnej PrestaShop (dfmobilenav)

> Wprowadzenie DF Mobile Nav dodaje do sklepu PrestaShop stały pasek zakładek u dołu ekranu, na wzór natywnych aplikacji mobilnych: strona główna, wyszukiwanie, koszyk, ulubione i konto, z plakietkami licznika aktualizowanymi…

- Strona: <https://www.datafirefly.com/pl/documentation/dfmobilenav/>
- Język: pl
- Zaktualizowano: 2026-07-30
- Inne języki: [fr](https://www.datafirefly.com/documentation/dfmobilenav/index.md), [en](https://www.datafirefly.com/en/documentation/dfmobilenav/index.md), [es](https://www.datafirefly.com/es/documentation/dfmobilenav/index.md), [de](https://www.datafirefly.com/de/documentation/dfmobilenav/index.md), [it](https://www.datafirefly.com/it/documentation/dfmobilenav/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfmobilenav/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfmobilenav/index.md)
- Indeks: <https://www.datafirefly.com/pl/documentation/llms.txt>

## Wprowadzenie

DF Mobile Nav dodaje do sklepu PrestaShop stały pasek zakładek u dołu ekranu, na wzór natywnych aplikacji mobilnych: strona główna, wyszukiwanie, koszyk, ulubione i konto, z plakietkami licznika aktualizowanymi w czasie rzeczywistym.

Pasek pojawia się wyłącznie poniżej punktu granicznego, który sam określasz (domyślnie 768 px). Na komputerze jest całkowicie ukryty i nie dodaje do strony żadnej przestrzeni.

## Instalacja

1. W panelu administracyjnym otwórz **Moduły → Menedżer modułów**, a następnie kliknij **Wgraj moduł**.
2. Prześlij plik `dfmobilenav-1.0.0.zip`.
3. Po zakończeniu instalacji kliknij **Konfiguruj**.

Moduł rejestruje automatycznie potrzebne hooki (`actionFrontControllerSetMedia` i `displayBeforeBodyClosingTag`). Żadna modyfikacja motywu nie jest wymagana.

## Konfiguracja

### Wybór zakładek

Dostępnych jest pięć zakładek, a każdą włączasz lub wyłączasz niezależnie:

- **Strona główna**: link do strony głównej sklepu.
- **Wyszukiwanie**: otwiera pełnoekranowe pole wyszukiwania albo przenosi na stronę wyszukiwania (patrz niżej).
- **Koszyk**: link do koszyka, z plakietką liczby pozycji.
- **Ulubione**: link do listy życzeń, z plakietką liczby zapisanych produktów.
- **Konto**: link do strefy klienta.

Jeżeli żadna zakładka nie jest włączona, pasek w ogóle nie jest renderowany.

### Zachowanie wyszukiwania

Do wyboru są dwa tryby:

- **Wyszukiwanie pełnoekranowe** (domyślne): pole wprowadzania otwiera się nad bieżącą stroną, bez jej opuszczania. Zamknięcie przyciskiem albo klawiszem Esc.
- **Przekierowanie na stronę wyszukiwania**: zakładka zachowuje się jak zwykły link do natywnej strony wyszukiwania.

### Ukrywanie przy przewijaniu

Gdy ta opcja jest włączona, pasek znika przy przewijaniu w dół i wraca, gdy tylko odwiedzający zacznie przewijać w górę. Zachowanie respektuje systemową preferencję ograniczenia ruchu.

### Mobilny punkt graniczny

Maksymalna szerokość w pikselach, poniżej której pasek jest wyświetlany. Wartość domyślna to 768 px. Akceptowane wartości mieszczą się w zakresie od 320 do 1600 px. Każda wartość spoza tego zakresu jest sprowadzana do 768.

### Kolory

Konfigurowalne są cztery kolory w formacie szesnastkowym:

- **Kolor tła** paska (domyślnie biały).
- **Kolor ikon i etykiet** w stanie spoczynku (domyślnie szary).
- **Kolor aktywnej zakładki** (domyślnie atramentowa czerń).
- **Kolor plakietek** licznika (domyślnie czerwony).

## Plakietki licznika

### Koszyk

Plakietka pokazuje liczbę pozycji w koszyku odwiedzającego. Jest aktualizowana na żywo przy każdym dodaniu, bez przeładowania strony, w reakcji na zdarzenie `updateCart` PrestaShop. Powyżej 99 pozycji plakietka wyświetla „99+".

### Ulubione

Plakietka ulubionych opiera się na natywnym module listy życzeń (blockwishlist) i pokazuje liczbę produktów zapisanych przez zalogowanego klienta. Odświeża się po interakcji z przyciskami listy życzeń.

Jeżeli moduł listy życzeń jest wyłączony w Twoim sklepie, zakładka Ulubione jest ukrywana automatycznie, niezależnie od konfiguracji: nic nie musisz robić.

Licznik ulubionych wyświetla się wyłącznie zalogowanym klientom, ponieważ natywna lista życzeń jest powiązana z kontem klienta.

## Aktywna zakładka

Zakładka odpowiadająca bieżącej stronie jest podświetlana automatycznie i otrzymuje atrybut dostępności oznaczający stronę bieżącą. Wykrywanie obejmuje stronę główną, wyszukiwanie, koszyk i proces zamówienia, strefę klienta wraz z jej podstronami (dane osobowe, adresy, historia, dobra na koncie, kupony rabatowe) oraz listę życzeń.

## Zgodność z urządzeniami mobilnymi

- **Bezpieczny obszar iOS**: pasek respektuje dolny bezpieczny obszar nowszych iPhone'ów i nigdy nie zachodzi na pasek ekranu głównego.
- **Powiększanie w Safari**: pole wyszukiwania ma rozmiar dobrany tak, aby zablokować automatyczne powiększanie Safari przy zaznaczeniu pola.
- **Odstęp na dole strony**: na końcu dokumentu dodawany jest automatycznie odstęp równy wysokości paska, tak aby żadna treść nie została zasłonięta.

## Dostępność

Zakładki są natywnymi linkami, dostępnymi z klawiatury, z widocznym pierścieniem fokusa. Zakładka bieżącej strony jest ogłaszana technologiom asystującym. Ikony są oznaczone jako dekoracyjne, a informację niesie etykieta tekstowa. Animacja ukrywania przy przewijaniu jest wyłączana, jeżeli odwiedzający zażądał ograniczenia animacji w swoim systemie.

## Wydajność

Moduł nie wczytuje żadnego fontu ikon, żadnego obrazu i żadnej biblioteki JavaScript. Ikony to liniowe pliki SVG renderowane bezpośrednio na stronie, skrypt jest napisany w natywnym JavaScripcie i waży kilka kilobajtów. Odświeżanie liczników odbywa się lekkim zapytaniem zwracającym wyłącznie dwie liczby.

## Najczęstsze pytania

### Czy moduł modyfikuje pliki mojego motywu?

Nie. Podpina się przez standardowe hooki PrestaShop, bez nadpisywania szablonów. Pasek ma własne, autonomiczne style, niezależne od Twojego arkusza stylów.

### Czy pasek koliduje z przyciskiem czatu albo powrotu na górę?

Pasek jest umieszczony u dołu ekranu z umiarkowanym poziomem nakładania. Jeżeli inny pływający element się na niego nakłada, przesuń go w górę o około 60 pikseli w CSS swojego motywu.

### Czy mogę wyświetlać pasek na tablecie?

Tak: zwiększ punkt graniczny, na przykład do 1024 px, aby objąć również tablety w orientacji pionowej.

### Czy moduł działa w trybie wielosklepowym?

Tak. Ustawienia są zapisywane na poziomie konfiguracji PrestaShop i respektują kontekst sklepu.

### Czy jest zgodny z PrestaShop 9?

Tak. Moduł jest zaprojektowany i zweryfikowany od PrestaShop 8.0 do 9.x.

## Historia wersji

### 1.0.0, 12 lipca 2026

- Stały pasek zakładek u dołu ekranu z pięcioma włączanymi zakładkami.
- Plakietki licznika na żywo na koszyku i ulubionych.
- Wyszukiwanie pełnoekranowe albo przekierowanie, do wyboru.
- Ukrywanie paska przy przewijaniu w dół.
- Automatyczne podświetlanie zakładki bieżącej strony.
- Pełna personalizacja kolorów i punktu granicznego.
- Uwzględnienie bezpiecznego obszaru iOS.
- Tłumaczenia FR, EN, ES, DE, IT.