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 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.