Jak zmienić kolejność modułów w hookach

Kontrolowanie kolejności elementów na stronie sklepu to jeden z najszybszych sposobów na poprawę wrażeń użytkownika, konwersji i ładu wizualnego. Jeśli korzystasz z PrestaShop, kluczem są tzw. moduły zaczepiane w określonych hookach. Poniższa instrukcja pokazuje krok po kroku, jak zmieniać układ, które narzędzia wykorzystać i co zrobić, gdy przesunięcia nie działają. Znajdziesz tu też tipy dla deweloperów, dzięki którym ustawisz sensowną kolejność już w procesie wdrażania.

Jak działa kolejność w hookach i dlaczego ma znaczenie

Podstawy: czym jest hook i jak wpływa na widok

Hook to nazwane miejsce w szablonie lub logice, do którego moduły mogą się “podczepić” i wyrenderować swój fragment. W praktyce w danym hooku (np. displayHeader, displayTop, displayFooter, displayProductAdditionalInfo) może być aktywnych wiele modułów. Silnik sklepu przechodzi po nich w kolejności ustalonej w konfiguracji i wyświetla wyniki jeden po drugim. To dlatego pozycja modułu w hooku bezpośrednio przekłada się na finalny układ interfejsu.

Wyobraź sobie pasek nagłówka: logo, wyszukiwarka, koszyk, menu. Jeśli koszyk znajdzie się przed logiem, a wyszukiwarka na końcu, użytkownik z większym trudem odnajdzie kluczowe elementy. Zmiana kolejności bywa więc nie tylko kosmetyką, ale i korektą ścieżek nawigacyjnych, wpływającą na wydajność biznesową i ergonomię.

Gdzie przechowywana jest kolejność i jakie ma zasięg

Kolejność (pozycje) modułów w hooku jest trzymana w bazie danych, w relacji określającej przypięcie modułu do hooka. W PrestaShop 1.7/8 jest to tabela analogiczna do ps_hook_module z kolumną “position”, a także z odniesieniem do sklepu (w trybie multi-store), motywu i czasem kontekstu urządzenia. W efekcie:

• ta sama lista hooków może mieć inną kolejność dla różnych sklepów w ramach jednego multisklepu,
• zmiana w jednym hooku nie wpływa na inne hooki – każdą sekcję ustawiasz niezależnie,
• kolejność dotyczy renderowania: CSS i JS motywu nadal mogą później zmienić ułożenie wizualne.

Warto pamiętać, że kolejność bywa też zależna od wariantu motywu — niektóre tematy implementują dodatkowe hooki lub własne “sloty”, które nie występują w motywie Classic.

Kolejność a UX, SEO i stabilność techniczna

Prawidłowa kolejność to nie tylko estetyka. Wpływa na:

• czytelność nawigacji i skrócenie czasu do pierwszego działania (np. dodania do koszyka),
• hierarchię treści: co widzi użytkownik najpierw na danej podstronie,
• stabilność układu (CLS) — niepoprawna kolejność elementów, doładowywane widgety lub wstawki JS mogą powodować “przeskoki”,
• które skrypty i style ładują się wcześniej (zwłaszcza w displayHeader), co może wpłynąć na metryki ładowania.

Dbając o kolejność, warto przy okazji kontrolować cache, minifikację, priorytety ładowania i krytyczne CSS — te elementy, łącznie z kolejnością, determinują doświadczenia użytkownika i ostatecznie dostępność serwisu.

Zmiana kolejności w panelu administracyjnym

Gdzie znaleźć listę hooków i modułów

Najprostsza droga do edycji kolejności prowadzi przez Back Office. W PrestaShop 1.7/8 wejdź do Wygląd (lub Design) → Pozycje. Zobaczysz listę hooków, a po wybraniu konkretnego — listę modułów, które są do niego przypięte.

• Użyj wyszukiwarki hooków (np. wpisz “header”, “footer”, “product”).
• Po otwarciu hooka od razu widać porządek modułów i dostępne akcje.
• Jeśli działa tryb multistore, upewnij się, że pracujesz we właściwym kontekście sklepu (rozwijane menu w nagłówku panelu).

Jeśli hook nie istnieje w Twoim motywie, panel go nie pokaże lub lista będzie pusta. Wtedy albo motyw nie implementuje danego hooka, albo moduł nie wyrenderuje nic w danym miejscu.

Zmiana kolejności metodą drag&drop

Na liście modułów w hooku zwykle dostępne są uchwyty pozwalające je przeciągać. Podejdź do tematu tak:

• Najedź na moduł w obrębie hooka, który chcesz przesunąć.
• Złap uchwyt i przesuń moduł w górę lub w dół — to klasyczny pozycje “drag and drop”.
• Zapis następuje automatycznie (lub przyciskiem “Zapisz kolejność” — zależnie od skórki BO).

Po zmianie sprawdź frontend: odśwież stronę sklepu w trybie prywatnym. Jeśli nadal widzisz starą kolejność, przejdź do rozdziału o czyszczeniu pamięci podręcznej i kompilacji szablonu.

Przypinanie i odpinanie modułów (Transplant), reset pozycji

Czasem w hooku masz moduły, których nie chcesz wcale. Zamiast je dezaktywować globalnie, możesz z nich zrezygnować tylko w wybranym hooku:

• Użyj akcji “Odepnij” przy module w danym hooku — nie usuwasz modułu, jedynie przestajesz go wyświetlać w tym miejscu.
• Aby dodać moduł do hooka, użyj opcji “Przenieś moduł” lub “Transplantuj moduł”, wybierz moduł i docelowy hook.
• Jeśli kolejność jest kompletnie chaotyczna, skorzystaj z opcji “Resetuj pozycje” (jeśli dostępna) — ustawi domyślny porządek.

Uwaga: nie każdy moduł może być zaczepiony w każdym hooku. Zależy to od deklaracji hooków w module (install/registerHook). Jeśli moduł nie oferuje wybranego hooka, “Transplant” może być niemożliwy lub wymagać zmian w module.

Live Edit: wizualne przesuwanie na stronie (jeśli dostępne)

W starszych wersjach PrestaShop dostępny był tryb Live Edit umożliwiający przesuwanie modułów bezpośrednio na stronie sklepu. W nowszych wydaniach bywa niedostępny, ale jeśli go masz:

• Uruchom Live Edit z poziomu Pozycji.
• Przeciągaj moduły w obrębie aktywnych obszarów hooków.
• Zapisz i sprawdź efekt na froncie.

Live Edit jest wygodny, ale pamiętaj, że finalny layout nadal może być korygowany przez reguły CSS motywu. Jeśli pozycja na podglądzie nie pokrywa się z realnym widokiem, przejdź na edycję w panelu i skontroluj CSS.

Kontekst sklepu, języka i urządzenia

Zmiany kolejności działają w konkretnym kontekście:

• Multi-store: zmieniając pozycje w sklepie A, nie wpływasz na sklep B. Zawsze sprawdź aktywny kontekst (górna belka BO).
• Język: najczęściej nie wpływa na kolejność, ale zawartość modułów może się różnić (np. inny tekst, długość nagłówków), co zmienia postrzeganą kompozycję.
• Urządzenie: rzadko stosuje się różne kolejności per urządzenie; częściej CSS (media queries) zmienia układ, nie kolejność.

Wskazówka: jeżeli Twoje zmiany “nie trzymają się” po przełączeniu sklepu, to niemal na pewno edytowałeś kolejność w złym kontekście multi-store.

Typowe miejsca i co w nich porządkować

Najczęściej edytuje się hooki powiązane z: nagłówkiem (displayHeader, displayTop), stopką (displayFooter), kartą produktu (displayProductExtraContent, displayProductAdditionalInfo), koszykiem i checkoutem, stroną główną (displayHome). Dobre praktyki:

• W nagłówku najpierw logo i nawigacja, potem wyszukiwarka, następnie koszyk i elementy wtórne.
• W stopce grupuj linki i informacje kontaktowe; moduły z newsletterem i socialami trzymaj obok siebie.
• Na karcie produktu priorytetyzuj przycisk “Dodaj do koszyka”, dostępność, warianty; dodatki (np. udostępnij, rekomendacje) niżej.
• Na stronie głównej trzymaj najcięższe widżety (karuzele, wideo) niżej lub leniwie ładuj je po interakcji.

Kontrola kolejności przez konfigurację i kod (dla deweloperów)

Ustalanie pozycji podczas instalacji modułu

Jeśli rozwijasz moduł, możesz od razu po instalacji umieścić go w konkretnym miejscu listy. Podstawowa sekwencja to: zarejestrować hook (registerHook), przypiąć moduł do hooka (często dzieje się automatycznie przy rejestracji) i zaktualizować pozycję (updatePosition). Dzięki temu po instalacji klient nie musi ręcznie przesuwać modułu, a układ jest przewidywalny.

Wskazówka: nie wymuszaj agresywnie pozycji 1, jeżeli hook ma krytyczne elementy (np. systemowy blok koszyka lub breadcrumb). Rozsądna jest pozycja tuż poniżej kluczowych elementów, by nie łamać oczekiwanej hierarchii.

Zmiana kolejności skryptem lub SQL — ostrożnie

Można zmienić pozycje bez BO, uaktualniając pole “position” w tabeli przypięć modułów do hooków (jak w ps_hook_module). Należy jednak zadbać o:

• spójność numeracji (unikaj duplikatów pozycji po tej samej stronie),
• kontekst sklepu i motywu (id_shop, id_theme),
• wyczyszczenie cache i kompilacji szablonów po modyfikacji,
• kopię zapasową przed zmianą.

Lepiej używać oficjalnych metod (np. updatePosition) z poziomu modułu lub dedykowanego narzędzia serwisowego niż bezpośrednich zapytań. Minimalizujesz w ten sposób ryzyko niespójnych danych i błędów po aktualizacjach.

Warunkowe wyświetlanie a “pseudokolejność”

Czasem kolejność nie wystarczy — potrzebujesz pokazać moduł wyżej tylko dla wybranych kategorii, języków lub urządzeń. Zamiast robić twarde podmianki w motywie, zastosuj warunkowe renderowanie w hooku: jeśli moduł nie powinien zadziałać w danym kontekście, zwróć pusty wynik. Dzięki temu pozostaje w tym samym miejscu listy, lecz “znika”, gdy warunek nie jest spełniony. Efekt przypomina zmianę kolejności, ale jest stabilniejszy niż dynamiczne przepinanie.

Inny przypadek: dwa moduły muszą dzielić jedno miejsce, ale tylko jeden może się wyświetlać naraz (np. promocja vs. standardowy blok). Wtedy także warunek biznesowy decyduje o tym, co w danym momencie widać, bez manipulacji kolejnością.

Unikaj override, preferuj hooki akcyjne i konfigurację

Zmiany kolejności można wymusić, nadpisując pliki motywu lub szablony modułów, lecz jest to trudniejsze w utrzymaniu. Niepotrzebne override bywa źródłem konfliktów przy aktualizacjach. Najpierw wykorzystaj:

• dostępne hooki akcyjne (np. actionModuleRegisterHookAfter),
• konfigurację modułu (opcje wpływające na jego widoczność),
• panel Pozycje, który zapewnia bezpieczne “drag&drop”.

Dopiero gdy te ścieżki nie wystarczają, rozważ modyfikacje motywu. Wtedy pracuj na child-theme, dokumentuj zmiany i uwzględniaj testy regresji.

Dlaczego zmiana nie działa? Diagnostyka, testy i dobre praktyki

Czyszczenie pamięci podręcznej, kompilacja, CDN

Najczęstszy powód braku efektu po zmianie to zbuforowany frontend:

• Wyczyść pamięć podsystemu Smarty/Twig (Wydajność → Czyszczenie i kompilacja).
• Wyłącz lub odśwież cache HTTP/CDN (Cloudflare, Varnish) i przetestuj w trybie prywatnym przeglądarki.
• Jeśli używasz agregacji i minifikacji CSS/JS, dezaktywuj ją na chwilę i sprawdź, czy kolejność się odświeżyła.

Po większych zmianach zaleca się też przebudowę zasobów motywu (np. kompilacja SCSS) i weryfikację, czy pliki nie są serwowane ze starej wersji motywu przez CDN.

Konflikty motywu i wpływ CSS/JS

Kolejność renderowania to jedno, a ostateczne ułożenie w layoucie — drugie. CSS (flex, grid, order) lub skrypty JS potrafią przemieścić elementy z DOM, nadać im inne “order” lub warunkowo przepinać węzły. Jeśli:

• w panelu kolejność jest zgodna z oczekiwaniami, a na stronie nie — przeanalizuj narzędziem DevTools właściwości CSS (szukaj “order”, “position”, “float”, “flex-direction”),
• motyw używa JS do reorganizacji sekcji (np. na mobile) — wypróbuj wyłączenie skryptu i oceń różnicę,
• moduł generuje mark-up trudny do stylowania — rozważ jego szablonowe nadpisanie w motywie (bez logiki), by dopasować strukturę HTML do layoutu.

Wskazówka: jeżeli musisz użyć “order” w CSS, pamiętaj, że koliduje to z oczekiwaną kolejnością czytników ekranu i może pogarszać dostępność. Lepiej poprawić kolejność renderowania niż odwracać ją CSS-em.

Multi-store, uprawnienia i niespójność danych

W środowiskach wielosklepowych bywa, że administrator zmienia układ w niewłaściwym kontekście albo nie ma pełnych uprawnień. Sprawdź:

• kontekst aktywnego sklepu (górna belka BO),
• czy moduł jest przypięty do hooka w danym sklepie i motywie,
• czy Twoja rola w panelu pozwala na edycję Pozycji,
• czy pozycje nie są “zamrożone” w integracji (np. automaty skryptowe przywracają kolejność).

Jeśli mimo wszystko widzisz dziwne wartości “position” lub duplikaty, wykonaj eksport listy przypięć i sprawdź spójność. Niekiedy pomaga “Resetuj pozycje” albo odpięcie i ponowne przypięcie modułu.

Środowisko testowe, versioning i wdrożenia

Kolejność modułów to konfiguracja, która powinna być kontrolowana na środowisku testowym przed publikacją. Dobre praktyki:

• Twórz i odtwarzaj kopie bazy (lub przynajmniej tabel związanych z przypięciami modułów) między środowiskami.
• Dokumentuj zmiany: który hook, jaka kolejność, kto i kiedy zmieniał.
• Unikaj modyfikowania kolejności “na żywo” w godzinach szczytu.
• Wdróż checklistę wizualną (zrzuty ekranu referencyjne) i porównuj po publikacji.

Wskazówka: jeżeli posiadasz automatyczne testy wizualne (snapshoty), włącz je po zmianach w Pozycjach. Wykryją różnice układu między gałęziami wdrożeniowymi.

Po każdej zmianie: kontrola metryk i ergonomii

Po reorganizacji hooków sprawdź, czy nie pogorszyły się metryki i odbiór interfejsu:

• Core Web Vitals (LCP, CLS, INP) — zwłaszcza gdy przesuwałeś moduły w nagłówku i na stronie głównej,
• czytelność i spójność na mobile (test w przeglądarce i prawdziwych urządzeniach),
• ścieżki kluczowych działań (dodanie do koszyka, wyszukiwanie),
• czytniki ekranu i nawigacja klawiaturą — kolejność w DOM wpływa na logikę czytania.

Nie zapominaj też o wpływie na SEO: nagłówki, breadcrumbs i treści o wysokiej wartości powinny być dostępne wcześnie, bez niepotrzebnych barier.

Scenariusze specjalne i praktyczne recepty

Kiedy jeden moduł “przykrywa” drugi

Zdarza się, że moduł o większym kontenerze lub absolutnym pozycjonowaniu zasłania elementy poniżej. Zmiana kolejności nie pomoże, dopóki nie naprawisz stylowania. Sprawdź:

• czy element nie ma nadmiernego z-index lub position: absolute bez właściwego kontenera,
• czy szerokości i marginesy nie wypychają sąsiadów,
• czy moduł nie wstrzykuje dynamicznego kontentu po załadowaniu, zaburzając layout.

Remedium to korekty CSS/JS oraz uporządkowanie markupów. Zmiana kolejności w hooku to tylko część układanki.

Różne motywy i kompatybilność modułów

Jeśli zmieniasz motyw, licz się z inną mapą hooków. Moduł działający w displayTop w jednym temacie może w innym potrzebować displayNav1 lub specjalnego hooka motywowego. Przed migracją:

• spisz listę aktywnych hooków i kolejności w obecnym motywie,
• porównaj z mapą hooków nowego tematu,
• przygotuj plan transplantacji i testów wizualnych.

W razie braków skonsultuj z autorem motywu, czy istnieją hooki zastępcze. Niektóre motywy dodają własne punkty zaczepienia i panele konfiguracji, które umożliwiają zmianę kolejności niezależnie od standardowej listy Pozycji.

Dociążone strony główne i porządkowanie ciężkich widgetów

Strona główna często cierpi od zbyt wielu modułów. Działaj w trzech krokach:

• Priorytetyzuj sekcje: co jest naprawdę potrzebne nad linią załadowania (above the fold)?
• Przesuń ciężkie moduły niżej lub włącz lazy load — kolejność w hooku może pomóc opóźnić ich renderowanie.
• Wyłącz lub odczep moduły o niskiej wartości biznesowej.

Każdy usunięty lub przesunięty element to szybsze pierwsze wrażenie i mniej rozpraszaczy dla użytkownika, co realnie przekłada się na metryki i konwersję.

Bezpieczeństwo i audyt po aktualizacjach

Aktualizacje modułów czasem przywracają domyślne pozycje lub dopisują moduł do nowych hooków. Po upgrade’ach:

• sprawdź kluczowe hooki (nagłówek, stopka, produkt) pod kątem niechcianych przetasowań,
• zabezpiecz konfigurację eksportem lub snapshotem bazy przed aktualizacją,
• jeśli moduł “wpycha się” zbyt wysoko, rozważ zgłoszenie do producenta lub dostosowanie jego instalatora.

W projektach z wieloma integracjami wdrożenie audytu konfiguracji Pozycji po każdym release to niedrogi sposób na uniknięcie przykrych niespodzianek.

Checklist: szybka korekta krok po kroku

Gdy musisz szybko przestawić elementy w hooku:

• Wygląd → Pozycje → Filtruj po hooku.
• Przesuń moduły uchwytem w górę/dół.
• Usuń z hooka moduły zbędne (Odepnij), dodaj brakujące (Transplant).
• Wyczyść cache i odśwież frontend w trybie prywatnym.
• Sprawdź DevTools: czy CSS/JS nie zmienia kolejności wizualnie.
• Przetestuj mobile/desktop, kluczowe ścieżki i dostępność.

Jeśli mimo tego nie widać efektu, przeanalizuj kontekst multi-store i sprawdź, czy Twoje konto ma odpowiednie uprawnienia do zmiany Pozycji.