Jak stworzyć prosty filtr produktów (cena/kolor) w PrestaShop?

Szybka odpowiedź: wykorzystaj moduł Wyszukiwanie fasetowe, skonfiguruj atrybuty “Kolor” i włącz filtr ceny, a następnie podłącz blok filtrów do odpowiednich hooków w motywie.

Jak stworzyć prosty filtr produktów (cena/kolor) w PrestaShop? To pytanie pojawia się u większości właścicieli sklepów, kiedy baza produktów zaczyna rosnąć i klienci potrzebują szybszej drogi do znalezienia tego, co ich interesuje. Dobra wiadomość jest taka, że PrestaShop ma wbudowane narzędzia, które pozwalają dodać czytelny filtr bez programowania – wystarczy poprawna konfiguracja i kilka kliknięć w panelu administracyjnym. Poniżej znajdziesz praktyczny przewodnik krok po kroku, w którym przeprowadzę Cię przez konfigurację atrybutów, instalację modułu filtrów, ustawienia indeksowania, personalizację wyglądu kolorów oraz testy i rozwiązywanie problemów.

Co będzie potrzebne

Minimalny zestaw: aktywny moduł Wyszukiwanie fasetowe, poprawne atrybuty “Kolor”, produkty z kombinacjami oraz dostęp do pozycji hooków w motywie.

Zanim zaczniesz, upewnij się, że:

• posiadasz PrestaShop 1.7 lub 8 (najnowsze wersje mają moduł filtracji “ps_facetedsearch”),
• Twoje produkty mają przypisane atrybuty i/lub kombinacje (np. Kolor),
• masz dostęp do panelu: Moduły, Katalog → Atrybuty i cechy, Projekt → Pozycje,
• motyw obsługuje kolumnę boczną lub miejsce na blok filtrów (np. w hooku displayLeftColumn lub displayTopColumn).

Przygotowanie atrybutów i kolorów

Klucz: atrybut “Kolor” musi mieć typ “Kolor” i przypisany kolor/teksturę, a produkty – odpowiednie kombinacje.

1. Przejdź do: Katalog → Atrybuty i cechy → Atrybuty.
2. Utwórz lub edytuj grupę atrybutów o nazwie np. “Kolor”.

• Typ grupy ustaw na “Kolor”.
• Dodaj wartości (np. Czerwony, Niebieski, Czarny), wpisując kod HEX (np. #ff0000) lub teksturę (grafikę).

3. Upewnij się, że produkty mają kombinacje z tym atrybutem:

• Katalog → Produkty → edycja produktu → Kombinacje.
• Dodaj odpowiednie warianty kolorystyczne i zapisz.

4. Jeżeli chcesz filtrować także po innych cechach (np. Materiał), dodaj je w sekcji Cechy i przypisz produktom.

Ważne: filtr się nie pojawi, jeśli w danej kategorii nie ma żadnego produktu z danym atrybutem. Dotyczy to szczególnie koloru – brak kombinacji = brak fasety.

Instalacja i konfiguracja modułu Wyszukiwanie fasetowe

Moduł “ps_facetedsearch” to serce filtrów w PrestaShop – zainstaluj, włącz i zindeksuj produkty.

1. Moduły → Menedżer modułów → wyszukaj “Wyszukiwanie fasetowe” (ang. Faceted Search).
2. Zainstaluj i włącz moduł.
3. Wejdź w “Konfiguruj” i zwróć uwagę na:

• Indeks produktów (czasem zakładka “Indeksowanie” lub “Budowanie indeksu”),
• Szablony filtrów (czyli zestawy filtrów przypisywane do kategorii),
• Ustawienia wyświetlania (tryb suwaka dla ceny, rozwijane listy, checkboxy itp.).

4. Kliknij “Zbuduj indeks” lub “Przebuduj indeks” – to warunek, aby filtry zaczęły działać. Dla większych katalogów potrwa to dłużej.

Tip: przy częstych zmianach asortymentu włącz automatyczne indeksowanie lub ustaw cron zgodnie z instrukcją w module.

Dodanie filtra ceny i koloru

Utwórz szablon filtrów z suwakem ceny i fasetą “Kolor”, przypisz go do kategorii i zapisz.

1. W konfiguracji modułu dodaj nowy “Szablon filtrów”.
2. Wybierz filtry, które chcesz pokazać:

• Cena (ustaw suwak i ewentualny krok),
• Kolor (checkboxy lub “kolorowe kropki” – zależnie od motywu i ustawień),
• Ewentualnie inne atrybuty/cechy.

3. Zaznacz kategorie, w których szablon ma obowiązywać (możesz przypisać globalnie do wszystkich).
4. Zapisz i ponownie przebuduj indeks, jeśli moduł tego wymaga.

Warto tu pamiętać: Filtr ceny działa na cenie aktualnej (z rabatem, zgodnie z ustawieniami i podatkami). Jeśli nie widzisz suwaka, sprawdź, czy masz produkty z różnymi cenami w danej kategorii.

Wyświetlenie bloku filtrów w motywie

Sprawdź pozycje hooków – zwykle displayLeftColumn lub displayTopColumn – i przypnij blok filtrów.

1. Projekt → Pozycje (hooki).
2. Odnajdź moduł Wyszukiwanie fasetowe i sprawdź, gdzie jest podpięty:

• w klasycznym motywie PrestaShop filtr najczęściej trafia do lewej kolumny kategorii (displayLeftColumn).

3. Jeśli nie widać go na froncie:

• dodaj moduł do odpowiedniego hooka,
• upewnij się, że Twoja strona kategorii ma kolumnę boczną,
• wyczyść cache: Parametry zaawansowane → Wydajność → Wyczyść pamięć podręczną.

Pro tip: W niektórych motywach lepiej działa filtr w górnej części kategorii (displayTopColumn), szczególnie na mobile.

Personalizacja wyglądu kolorów (swatche)

Kolory mogą być prezentowane jako próbki (swatche); ustawienia zależą od motywu i atrybutu typu “Kolor”.

• Jeżeli atrybut “Kolor” ma przypisany HEX lub teksturę, moduł zazwyczaj potrafi wyświetlać kwadraty/kółka koloru zamiast nazwy.
• Sprawdź w ustawieniach modułu i motywu, czy jest opcja “Display color”/“Pokaż kolory jako próbki”.
• Dla spójności zadbaj o kontrast i opisy alternatywne (nazwy kolorów), aby filtr był dostępny dla osób korzystających z czytników ekranu.
• Gdy kolorów jest dużo, rozważ tryb “pokaż więcej” – nie przeciążaj interfejsu.

Wydajność i indeksacja

Bez poprawnej indeksacji filtr może działać wolno albo nie pokazać wyników – to fundament.

• Po każdej większej zmianie w produktach, atrybutach lub kategoriach wykonaj przebudowę indeksu w module.
• Dla dużych katalogów ustaw cron (automatyczne odświeżanie), np. co noc.
• W Parametrach wydajności PrestaShop włącz SmartCache dla CSS/JS i kompilację szablonów “nigdy nie kompiluj” na produkcji, aby przyspieszyć ładowanie.
• Jeżeli wyniki wyszukiwania fasetowego są wolne, rozważ:
  • mniejszą liczbę aktywnych filtrów na jednej stronie,
  • filtrowanie tylko po najważniejszych atrybutach,
  • ewentualną optymalizację serwera (baza danych, pamięć podręczna).

Pamiętaj: zbyt wiele filtrów naraz przy dużej liczbie produktów spowalnia sklep i może zniechęcić użytkowników.

UX i SEO – dobre praktyki

Łatwy filtr zwiększa konwersję, a przyjazne adresy i logiczna struktura pomagają SEO.

• Nie przesadzaj z liczbą filtrów na starcie – cena i kolor to świetny, prosty punkt wyjścia.
• Używaj jasnych etykiet: “Cena”, “Kolor”, “Rozmiar” – unikaj żargonu.
• Pozwól na szybkie czyszczenie filtrów (przycisk “Wyczyść”/“Resetuj”).
• Zadbaj o widoczność zastosowanych filtrów nad listą produktów (chipsy/etykiety aktywnych filtrów).
• Sprawdź działanie na mobile – filtr powinien być łatwo dostępny i chować się w panelu bocznym lub off-canvas.
• SEO: moduł fasetowy generuje parametry w adresie (np. q=Kolor-Czarny). To normalne. Unikaj indeksowania nieskończonych kombinacji filtrów; możesz:
  • zablokować niektóre parametry w robots.txt lub przez reguły SEO,
  • pozostawić indeksację jedynie głównych kategorii i najważniejszych kombinacji,
  • zadbać o kanonikalizację (PrestaShop zwykle dodaje rel=“canonical” do strony kategorii bez filtrów).

Testy i rozwiązywanie problemów

Kiedy filtr nie działa, zwykle winne są brak indeksu, brak atrybutów w produktach lub caching.

• Filtr nie wyświetla się:
  • Sprawdź podpięcie modułu do hooka, obecność lewej kolumny, cache.
• Brak filtra ceny:
  • Upewnij się, że w kategorii są produkty z różnymi cenami i że w module aktywny jest suwak ceny.
• Brak filtra koloru:
  • Produkty muszą mieć kombinacje z atrybutem “Kolor”; sprawdź też, czy atrybut ma typ “Kolor”.
• Złe wyniki po filtracji:
  • Przebuduj indeks; sprawdź, czy produkt jest aktywny i przypisany do kategorii.
• Zacięcia lub wolne ładowanie:
  • Ogranicz liczbę filtrów, włącz cache, zoptymalizuj serwer.
• Tłumaczenia i etykiety:
  • Lokalizacja → Tłumaczenia → moduły → Wyszukiwanie fasetowe – popraw nazwy filtrów.

Jak stworzyć prosty filtr produktów (cena/kolor) w PrestaShop? – skrót dla zabieganych

Trzy kroki: skonfiguruj atrybut “Kolor”, włącz moduł fasetowy i dodaj filtr ceny w szablonie filtrów.

• Katalog → Atrybuty i cechy: utwórz/upewnij się, że masz atrybut “Kolor” typu “Kolor”, z wartościami (HEX/tekstura).
• Moduły → Wyszukiwanie fasetowe: zainstaluj, włącz, zbuduj indeks.
• W module: stwórz szablon filtrów z “Cena” i “Kolor”, przypisz do kategorii, zapisz i przebuduj indeks.
• Projekt → Pozycje: podłącz moduł do lewej kolumny kategorii (lub innego hooka).
• Przetestuj na froncie i wyczyść cache, jeśli coś się nie pokazuje.

Opcjonalnie: prosty filtr po parametrach URL

Dla bardziej technicznych – parametry zapytań mogą zawężać wyniki, ale moduł fasetowy robi to lepiej i stabilniej.

Można spotkać motywy lub rozwiązania, które filtrują listę produktów po parametrach w adresie (np. ?color=czarny&price_min=100&price_max=300), a następnie odpowiednie kontrolery w PrestaShop interpretują te parametry i zwracają przefiltrowane produkty. W praktyce:

• to wymaga modyfikacji kontrolera kategorii oraz zapytań SQL,
• trudniej to utrzymać przy aktualizacjach,
• gorzej z wydajnością i SEO, jeśli nie zastosujesz cache i kanonikalizacji.

Dlatego w większości przypadków zdecydowanie lepiej użyć modułu Wyszukiwanie fasetowe, który dba o indeks, wydajność i integrację z motywem.

Podsumowanie

Najprostszy i najskuteczniejszy sposób to wbudowany moduł: szybka konfiguracja, dobra wydajność i łatwa rozbudowa w przyszłości.

• PrestaShop oferuje gotowy moduł filtrów, który w kilka minut pozwala dodać filtr ceny i filtr koloru.
• Sukces zależy od poprawnie skonfigurowanych atrybutów, zbudowanego indeksu oraz prawidłowego podpięcia modułu do hooków.
• Dbając o UX (przejrzystość, mobile) i podstawy SEO (kanonikalizacja, kontrola parametrów), zyskasz lepszą nawigację i wyższą konwersję.

Jeśli później zechcesz pójść dalej, możesz dodać kolejne fasety (rozmiar, materiał, producent), a nawet personalizować kolejność i wygląd filtrów. Najpierw jednak opanuj podstawy – cena i kolor to duet, który robi różnicę już od pierwszego dnia.