Mega Menu i Burger: kompletny przewodnik

Prezentacja

Moduł Mega Menu i Burger (datafireflymegamenu) zastępuje nawigację Twojego sklepu kompletnym, konfigurowalnym systemem: wielokolumnowe mega menu, klasyczne rekurencyjne rozwijane menu walker i płynne menu burger na mobile. Wszystko buduje się wizualnie w zapleczu, metodą przeciągnij i upuść, bez dotykania ani jednej linii kodu.

Każde menu może wyświetlać kategorie, produkty (ze zdjęciem i ceną), marki, strony CMS, linki własne, dowolne bloki HTML lub obrazy promocyjne, ułożone w kolumnach paneli mega. Moduł jest w pełni wielojęzyczny i multisklepowy, a element odpowiadający odwiedzanej stronie jest podświetlany automatycznie.

Zgodność

• PrestaShop 8.0 do 9.x
• PHP 7.4 do 8.x
• Pojedynczy sklep i multisklep
• 5 dostarczonych języków: FR, EN, ES, DE, IT (tłumaczalny bez ograniczeń)
• Motyw Classic i motywy własne
• Architektura PSR-4 bez zależności od Composera

Instalacja

1. W zapleczu otwórz Moduły > Menedżer modułów.
2. Kliknij Załaduj moduł i wybierz plik datafireflymegamenu.zip.
3. Po instalacji kliknij Konfiguruj.

Szybki start

1. Otwórz konfigurację modułu. Po lewej lista Moje menu i Ustawienia menu, po prawej Struktura menu.
2. Kliknij Nowe menu, nadaj mu nazwę (per język), wybierz hook wyświetlania i layout, a następnie zapisz.
3. W obszarze Struktura menu kliknij Dodaj element główny i wybierz jego typ.
4. Przeciągaj i upuszczaj elementy, aby zmieniać ich kolejność lub je zagnieżdżać. Pozycje zapisują się automatycznie.

Ustawienia menu

Panel Ustawienia menu steruje globalnym zachowaniem menu:

• Nazwa menu: etykieta wewnętrzna, tłumaczalna per język.
• Hook wyświetlania: miejsce, w którym menu jest renderowane (zobacz sekcję Wyświetlanie i hooki).
• Layout: Mega menu (panele z kolumnami) lub Klasyczne rozwijane menu (rekurencyjny walker).
• Wyzwalanie: otwieranie podmenu po najechaniu lub po kliknięciu. Przy najechaniu krótki czas karencji przy zamykaniu eliminuje migotanie podczas ruchów po przekątnej.
• Punkt przełamania mobile (px): szerokość, poniżej której menu przechodzi w tryb mobile/burger (domyślnie 991 px).
• Maksymalna szerokość (px): wyśrodkowuje pasek na wybranej szerokości, aby wyrównać go z kontenerem motywu (np. 1140 px). 0 oznacza pełną szerokość.
• Pasek przyklejony (sticky): menu pozostaje przypięte u góry podczas przewijania.
• Panele mega pełnej szerokości: panele mega rozciągają się na całą szerokość paska.
• Menu burger na mobile: aktywuje menu burger poniżej punktu przełamania.
• Włączone: pokazuje lub ukrywa menu na froncie.
• Sklepy (multisklep): wybiera sklepy, w których menu jest wyświetlane.

Budowanie drzewa (przeciągnij i upuść)

Strukturę menu buduje się w obszarze Struktura menu. Każdy wiersz reprezentuje element, z uchwytem do przenoszenia, plakietką wskazującą jego typ i przyciskami akcji.

• Zmiana kolejności: chwyć uchwyt i przesuń element w pionie.
• Zagnieżdżanie: upuść element wewnątrz innego, aby uczynić go podelementem (zagnieżdżanie bez ograniczeń).
• Dodaj podelement: dedykowany przycisk na każdym wierszu.
• Edytuj / Usuń: ikony na każdym wierszu. Usunięcie elementu usuwa również jego podelementy.

Typy elementów

Każdy element ma typ, który określa jego zawartość i link. Okno edycji automatycznie dostosowuje dostępne pola do wybranego typu:

• Link własny: dowolny URL, tłumaczalny per język.
• Kategoria: link do kategorii sklepu, z opcjonalnym obrazem i licznikiem produktów.
• Drzewo kategorii (auto): automatycznie generuje podkategorie (zobacz dedykowaną sekcję).
• Produkt: link do karty produktu, z opcjonalnym zdjęciem okładkowym i ceną.
• Marka: link do marki; Wszystkie marki: link do strony marek.
• Dostawca: link do dostawcy.
• Strona CMS i Kategoria CMS: linki do Twoich treści redakcyjnych.
• Blok HTML / CMS: dowolna zawartość HTML, idealna na promocję lub tekst wzbogacony.
• Obraz / promocja: klikalny obraz (z URL).
• Etykieta: zwykły nieklikany tytuł, przydatny jako nagłówek kolumny.
• Separator: linia oddzielająca, pozioma w panelach rozwijanych i mega, pionowa między elementami paska.

Dla każdego elementu możesz też zdefiniować: etykietę, kolorową odznakę (tekst + kolor), ikonę Material, własną klasę CSS, otwieranie w nowej karcie oraz widoczność per urządzenie (mobile, tablet, desktop).

Opcje wyświetlania: obrazy, ceny i liczniki

W zależności od wybranego typu okno edycji oferuje blok Opcje wyświetlania:

• Pokaż obraz (kategoria, drzewo, produkt): wyświetla obraz kategorii lub zdjęcie okładkowe produktu jako miniaturę w menu. Odznacz, aby uzyskać menu w 100% tekstowe. Obraz przesłany ręcznie na element ma zawsze pierwszeństwo.
• Pokaż cenę (produkt): wyświetla cenę produktu, sformatowaną według waluty i języka odwiedzającego, po prawej stronie etykiety.
• Pokaż licznik produktów (kategoria, drzewo): wyświetla w plakietce liczbę aktywnych produktów kategorii, łącznie z podkategoriami.
• Dodaj link „Zobacz wszystko” (drzewo): dodaje na końcu listy link do kategorii głównej drzewa.

Mega menu: kolumny, obrazy i bloki HTML

Aby przekształcić podmenu w panel mega, otwórz element nadrzędny i ustaw Wyświetlanie podmenu na Mega panel (kolumny). Następnie określ liczbę kolumn.

Każde bezpośrednie dziecko elementu nadrzędnego staje się wtedy kolumną panelu. Możesz dostosować szerokość każdej kolumny w polu Szerokość kolumny (span) i umieścić w niej podlinki, blok HTML lub obraz promocyjny.

Automatyczne drzewo kategorii

Typ Drzewo kategorii (auto) eliminuje ręczne wprowadzanie: sam generuje podkategorie na podstawie kategorii głównej, do poziomu określonego w polu Podpoziomy.

Jego Opcje wyświetlania pozwalają włączyć lub wyłączyć obrazy kategorii (miniatury), licznik produktów per kategoria oraz link „Zobacz wszystko” prowadzący do kategorii głównej, dodawany na końcu listy.

Połącz ten typ z wyświetlaniem Mega panel, aby w kilka sekund uzyskać kompletne mega menu „Sklep”, zawsze aktualne z Twoim katalogiem.

Wielojęzyczność i multisklep

Etykieta, własny URL, odznaka i zawartość HTML każdego elementu są tłumaczalne przez zakładki językowe okna edycji. Nazwa menu również jest wielojęzyczna.

W multisklepie każde menu jest powiązane z jednym lub kilkoma sklepami w swoich ustawieniach. To samo menu może więc być wyświetlane tylko w wybranych sklepach.

Wyświetlanie, hooki i pozycja

Menu wyświetla się przez hook wybrany w jego ustawieniach. Obsługiwane hooki to:

• displayNav2: główny pasek nawigacji (domyślnie)
• displayTop: góra strony, obok logo i paska wyszukiwania
• displayNavFullWidth: baner pełnej szerokości
• displayFooter: stopka
• displayLeftColumn i displayRightColumn: kolumny boczne

Na displayTop pasek automatycznie dopasowuje się do szerokości swojej zawartości, aby współistnieć z logo i paskiem wyszukiwania motywu w tej samej linii; panele mega pełnej szerokości są tam wyśrodkowane na ekranie.

Bieżąca strona i nawigacja

Element menu odpowiadający odwiedzanej stronie, wraz ze swoim elementem głównym, automatycznie otrzymuje klasę is-active i jest podświetlany zgodnie ze stylem hover menu. Wykrywanie odbywa się po stronie przeglądarki (dokładne dopasowanie URL, potem najlepsze dopasowanie sekcji), co pozostaje w pełni zgodne z buforowaniem renderingu.

Tryb mobilny i menu burger

Poniżej zdefiniowanego punktu przełamania menu automatycznie przechodzi w tryb mobilny. Jeśli opcja Menu burger na mobile jest aktywna, nawigacja przyjmuje formę menu burger: wysuwany panel (slide-in), podmenu w akordeonie, przyciemnione tło (backdrop) i blokada przewijania strony.

Moduł respektuje systemową preferencję ograniczonego ruchu (prefers-reduced-motion), wyłączając animacje dla użytkowników, których to dotyczy.

Wydajność i cache

Rendering każdego menu jest buforowany przez Smarty, z kluczem uwzględniającym menu, język, sklep, walutę i grupę klientów. Menu wyświetlają się więc bez przeliczania przy każdej stronie.

Cache jest unieważniany automatycznie, gdy kategoria, strona CMS lub marka zostanie dodana, zmodyfikowana lub usunięta, a także przy każdym zapisie menu lub elementu w zapleczu. Automatyczne drzewa, liczniki produktów i ceny pozostają dzięki temu zsynchronizowane z katalogiem.

FAQ i rozwiązywanie problemów

Menu nie wyświetla się na froncie

Sprawdź, czy menu jest włączone, czy jest powiązane z właściwym sklepem i czy jego hook odpowiada miejscu faktycznie wyświetlanemu przez Twój motyw. Następnie wyczyść cache PrestaShop i odśwież stronę w trybie prywatnym.

Wybrany hook nie pojawia się w moim motywie

Nie każdy motyw implementuje wszystkie hooki. Wybierz hook rzeczywiście obecny w Twoim motywie (najczęściej displayNav2 lub displayTop) albo podepnij moduł pod własny hook przez stronę Pozycje.

Moje mega menu nie wyświetla kolumn

Otwórz element nadrzędny i ustaw Wyświetlanie podmenu na Mega panel (kolumny), określ liczbę kolumn, a następnie sprawdź, czy istnieją elementy podrzędne: każde bezpośrednie dziecko staje się kolumną.

Obrazy kategorii lub produktów nie wyświetlają się

Sprawdź, czy pole Pokaż obraz jest zaznaczone w Opcjach wyświetlania elementu, czy kategoria ma obraz (lub produkt zdjęcie okładkowe), a następnie wyczyść cache. Aby uzyskać menu bez obrazów, po prostu odznacz tę opcję.

Menu przechodzi do nowej linii lub przesuwa pasek wyszukiwania (displayTop)

Od wersji 1.2.1 pasek dopasowuje się do swojej zawartości na displayTop. Jeśli problem utrzymuje się po aktualizacji, wyczyść cache PrestaShop: zbuforowany HTML musi zostać wygenerowany na nowo z nowymi klasami.

Zmiany nie pojawiają się od razu

Rendering jest buforowany, więc po ręcznej modyfikacji wyczyść cache PrestaShop. Zmiany kategorii, stron CMS, marek, menu i elementów unieważniają cache automatycznie.

Czy moduł jest zgodny z PrestaShop 9?

Tak. Moduł jest zgodny z PrestaShop 8 i 9, w multisklepie i wielu językach, i natywnie obsługuje różnice techniczne między obiema wersjami. Ceny wyświetlane w menu używają formatera locale PrestaShop 9 z automatycznym fallbackiem na PrestaShop 8.