? Najważniejsze funkcjonalności

• Mega menu dla PrestaShop z rozwijanymi panelami wielokolumnowymi
• Obsługa 5 typów pozycji menu: URL, kategoria, CMS, strona funkcjonalna, dropdown
• Dropdowny w układzie od 1 do 4 kolumn
• Różne typy treści w dropdownach: kategorie, CMS, linki funkcjonalne, nagłówki, tekst HTML, obrazy
• Panel administracyjny z trzema zakładkami: Menu, Dropdown, Design
• Konfiguracja wyglądu bez edycji kodu: kolory, hover, rozmiary czcionek, uppercase, bold, nagłówki
• Wbudowany file manager do obsługi grafik w menu
• Wersja mobilna typu off-canvas z akordeonem
• Filtrowanie pozycji po języku
• Brak własnych tabel w bazie danych — konfiguracja oparta o JSON w Configuration
• Automatyczne czyszczenie cache po zapisaniu zmian
• Możliwość dalszej rozbudowy przez override szablonów, CSS, JS i rozszerzenia deweloperskie

Zobacz wideo z instalacji i konfiguracji modułu:

1. Hooki dostępne w module

Moduł jest przygotowany do działania w następujących hookach PrestaShop:

• displayHeader — ładowanie plików frontowych views/css/front.css oraz views/js/front.js
• displayNavFullWidth — renderowanie menu
• displayNav — renderowanie menu
• displayTop — renderowanie menu

W praktyce należy użyć jednego z hooków renderujących menu, ponieważ moduł zwraca ten sam markup w displayNavFullWidth, displayNav i displayTop. Podpięcie więcej niż jednego miejsca spowoduje wyświetlenie tej samej struktury wielokrotnie.

2. Mega menu dla PrestaShop z pełną kontrolą struktury i wyglądu

Design Cart pMenu to moduł rozszerzający standardową nawigację sklepu o duże menu typu mega menu z rozwijanymi panelami wielokolumnowymi. Rozwiązanie zostało zaprojektowane dla sklepów, które potrzebują czytelniejszej struktury kategorii, lepszej ekspozycji treści oraz większej kontroli nad sposobem prezentacji nawigacji na desktopie i urządzeniach mobilnych.

Moduł działa w oparciu o mechanizmy PrestaShop i korzysta z natywnych metod generowania linków do kategorii, stron CMS i stron funkcjonalnych. Dzięki temu menu pozostaje spójne z architekturą sklepu, nie duplikuje logiki routingu i dobrze wpisuje się w istniejącą strukturę wdrożenia.

W nagłówku modułu przewidziano zgodność z PrestaShop 9, a konfiguracja ps_versions_compliancy wskazuje minimalną wersję 1.7.0.0.

3. Jak działa struktura menu

Każda pozycja głównego menu jest definiowana jako osobny element konfiguracji i po normalizacji zawiera:

• tekst pozycji,
• przypisanie do języka lub wszystkich języków,
• typ linku,
• dane zależne od typu,
• opcjonalne powiązanie z dropdownem.

Moduł obsługuje następujące typy pozycji:

• URL — własny adres zewnętrzny lub wewnętrzny,
• kategoria — link generowany przez Link::getCategoryLink,
• CMS — link generowany przez getCMSLink,
• strona funkcjonalna — link generowany przez getPageLink,
• dropdown — pozycja otwierająca panel mega menu.

To podejście pozwala budować menu, które łączy klasyczną nawigację katalogową z treściami informacyjnymi i elementami sprzedażowymi.

4. Dropdowny wielokolumnowe

Najważniejszym elementem modułu jest system dropdownów. Każdy dropdown może mieć od 1 do 4 kolumn i jest budowany z zestawu komórek przypisywanych do poszczególnych kolumn.

W dropdownach można umieszczać:

• linki do kategorii,
• linki do stron CMS,
• linki do stron funkcjonalnych,
• linki zewnętrzne,
• nagłówki sekcji,
• tekst HTML,
• obrazy z linkiem.

Dzięki temu dropdown nie jest prostą listą odnośników, ale rozbudowaną strukturą nawigacyjną, która może jednocześnie porządkować ofertę, eksponować ważne sekcje sklepu i wspierać działania merchandisingowe.

5. Strony funkcjonalne dostępne w menu

Moduł zawiera predefiniowaną listę stron funkcjonalnych PrestaShop, które można wykorzystać zarówno w głównym menu, jak i wewnątrz dropdownów. Obejmuje ona między innymi:

• moje konto,
• logowanie,
• koszyk,
• zamówienie,
• kontakt,
• mapę strony,
• nowe produkty,
• bestsellery,
• wyprzedaże,
• producentów,
• dostawców.

To praktyczne rozwiązanie, ponieważ pozwala włączyć do nawigacji nie tylko strukturę katalogową, ale również najważniejsze sekcje użytkowe sklepu.

6. Panel administracyjny

Konfiguracja modułu została podzielona na trzy obszary:

6.1 Menu

Zakładka odpowiada za budowę listy pozycji menu. Administrator definiuje:

• etykietę pozycji,
• język widoczności,
• typ linku,
• docelowy zasób,
• powiązanie z dropdownem.

Dodatkowo dostępne jest sortowanie pozycji z użyciem JavaScript i operacji AJAX.

6.2 Dropdown

Zakładka służy do zarządzania listą dropdownów oraz ich edycji w osobnym widoku. Administrator ustala:

• nazwę pomocniczą dropdownu,
• liczbę kolumn,
• układ komórek w kolumnach,
• typ i zawartość każdej komórki.

To właśnie tutaj definiowana jest docelowa struktura paneli rozwijanych.

6.3 Design

Zakładka odpowiada za warstwę wizualną. Wprowadzone wartości są przekazywane do frontu jako CSS custom properties, co upraszcza stylowanie i ogranicza konieczność ręcznej ingerencji w szablony.

7. Zakres personalizacji wyglądu

Z poziomu panelu administracyjnego można zmieniać między innymi:

• tło paska menu,
• tło pozycji menu,
• kolory tekstu pozycji,
• kolory hover,
• rozmiary czcionek,
• pogrubienie,
• zapis uppercase,
• wygląd linków wewnątrz dropdownów,
• kolory i rozmiary nagłówków,
• poziom semantyczny nagłówków od h1 do h6,
• kolor i rozmiar tekstu pomocniczego.

To ważne, ponieważ moduł nie wymusza jednego sposobu prezentacji. Może zostać dopasowany zarówno do prostych motywów, jak i do bardziej rozbudowanych wdrożeń komercyjnych.

8. Wbudowany file manager

Moduł zawiera własny mechanizm zarządzania plikami, wykorzystywany do obsługi grafik w dropdownach. Upload odbywa się do katalogu:

/img/dc_filemanager

Obsługiwane są pliki:

• jpg,
• jpeg,
• webp,
• png,
• svg

Maksymalny rozmiar pliku wynosi 3 MB. Dzięki temu obrazy używane w menu są zarządzane niezależnie i mogą być wstawiane bezpośrednio do komórek typu image.

9. Działanie na froncie

Na desktopie moduł renderuje menu poziome. Pozycje powiązane z dropdownem otwierają panel po kliknięciu, a kliknięcie poza aktywnym obszarem powoduje jego zamknięcie.

Na urządzeniach mobilnych dostępny jest osobny tryb działania:

• przycisk otwierający panel menu,
• układ off-canvas,
• dropdowny działające jako akordeon,
• zamykanie przyciskiem oraz klawiszem Escape.

W wersji mobilnej obrazy z komórek typu image nie są renderowane, co upraszcza interfejs i ogranicza nadmiar elementów na małych ekranach.

Moduł zawiera również mechanizm normalizacji ścieżek zasobów rozpoczynających się od modules/..., aby poprawnie działały także na podstronach.

10. Architektura danych

Jedną z mocniejszych stron modułu jest sposób przechowywania danych. Nie są tworzone własne tabele w bazie danych. Całość opiera się na Configuration, a dane zapisywane są jako JSON.

Najważniejsze klucze:

• DC_PMENU_MENU_ITEMS — lista pozycji menu,
• DC_PMENU_DROPDOWNS — definicje dropdownów,
• DC_PMENU_DESIGN_* — parametry wyglądu.

Takie podejście upraszcza utrzymanie modułu, ogranicza złożoność wdrożenia i zmniejsza ryzyko problemów przy aktualizacjach.

Po zapisaniu ustawień moduł automatycznie czyści cache szablonu nav_menu.tpl.

11. Możliwości rozbudowy

Moduł można rozwijać na kilku poziomach:

• override szablonu module:dc_pmenu/views/templates/hook/nav_menu.tpl,
• modyfikacja views/css/front.css,
• modyfikacja views/js/front.js,
• rozszerzenie listy stron funkcjonalnych,
• rejestracja dodatkowych hooków,
• dostosowanie file managera,
• integracja z elementami motywu w wersji mobilnej.

To oznacza, że moduł może działać zarówno jako gotowe rozwiązanie dla sklepu, jak i jako baza do dalszej personalizacji w projektach agencyjnych.

12. Ograniczenia, o których warto wiedzieć

Jak każde rozwiązanie techniczne, moduł ma również konkretne zależności:

• lista kategorii w panelu administracyjnym zależy od Category::getSimpleCategoriesWithParentInfos,
• treści typu text i header są renderowane z nofilter, więc powinny pochodzić z zaufanego źródła,
• trzy hooki frontowe zwracają identyczny HTML, dlatego w motywie należy użyć jednego miejsca wyświetlania.

To nie są wady implementacyjne, ale istotne informacje dla wdrożeniowca i administratora.

Podsumowanie

Design Cart pMenu to technicznie uporządkowany moduł mega menu dla PrestaShop, który łączy trzy istotne cechy: elastyczną strukturę nawigacji, rozbudowane dropdowny i szeroką kontrolę nad warstwą wizualną.

Jego mocną stroną nie jest wyłącznie liczba opcji konfiguracyjnych, ale sposób implementacji: zgodność z mechanizmami PrestaShop, przechowywanie danych w Configuration, obsługa wielu typów treści oraz przygotowanie do dalszych override’ów i rozszerzeń.