# Category Showcase: dokumentacja karuzeli kategorii PrestaShop
> Instalacja W panelu administracyjnym otwórz Moduły > Menedżer modułów, kliknij „Prześlij moduł” i wyślij plik dfcategoryshowcase.zip. Moduł jest zgodny z PrestaShop od 8.0 do 9.x. Podczas instalacji moduł tworzy swoje…
- Strona:
- Język: pl
- Zaktualizowano: 2026-09-23
- Inne języki: [fr](https://www.datafirefly.com/documentation/category-carousel-homepage-prestashop/index.md), [en](https://www.datafirefly.com/en/documentation/category-carousel-homepage-prestashop/index.md), [es](https://www.datafirefly.com/es/documentation/category-carousel-homepage-prestashop/index.md), [de](https://www.datafirefly.com/de/documentation/category-carousel-homepage-prestashop/index.md), [it](https://www.datafirefly.com/it/documentation/category-carousel-homepage-prestashop/index.md), [nl](https://www.datafirefly.com/nl/documentation/category-carousel-homepage-prestashop/index.md), [pt](https://www.datafirefly.com/pt/documentation/category-carousel-homepage-prestashop/index.md)
- Indeks:
## Instalacja
W panelu administracyjnym otwórz Moduły > Menedżer modułów, kliknij „Prześlij moduł” i wyślij plik `dfcategoryshowcase.zip`. Moduł jest zgodny z PrestaShop od 8.0 do 9.x.
Podczas instalacji moduł tworzy swoje tabele, folder `/img/dfcategoryshowcase/` na przesłane obrazy, hook `displayDfCategoryShowcase` oraz prezentację demonstracyjną: podkategorie kategorii Strona główna, jako karuzela, na stronie głównej. Otwórz sklep, aby zobaczyć efekt, a potem zmień lub usuń tę prezentację.
Modułem zarządzasz w menu Wygląd > Category Showcase (prowadzi tam też przycisk „Konfiguruj” modułu).
## Tworzenie prezentacji
Kliknij „Dodaj prezentację”. Zakładka Ogólne zawiera:
- **Nazwa wewnętrzna**: widoczna tylko w panelu administracyjnym.
- **Hook**: miejsce wyświetlania (patrz niżej).
- **Układ**: karuzela, siatka lub masonry.
- **Gotowy wygląd**: przy zapisie stosuje kompletny styl (patrz niżej).
- **Wyświetlane kategorie**: źródło kategorii.
- **Tytuł, podtytuł, tekst i link „Zobacz wszystko”**: dla każdego języka.
### Trzy źródła
- **Wybrane ręcznie**: po zapisie moduł przenosi cię do ekranu kategorii prezentacji. Dodawaj je pojedynczo i zmieniaj kolejność przeciąganiem.
- **Podkategorie kategorii nadrzędnej**: wybierz kategorię nadrzędną i w razie potrzeby maksymalną liczbę. Lista podąża za katalogiem.
- **Podkategorie oglądanej kategorii**: używaj z `displayHeaderCategory` lub `displayFooterCategory`. Każda strona kategorii pokazuje własne podkategorie. Kategoria bez podkategorii nic nie wyświetla.
W obu trybach podkategorii dodanie kategorii na ekranie kategorii służy wyłącznie do jej dostosowania. Wyłączenie jej ukrywa ją w prezentacji.
## Dostosowanie kategorii
Na liście prezentacji kliknij „Kategorie”, a następnie dodaj lub edytuj kategorię. Każde puste pole przejmuje wartość z kategorii PrestaShop:
- **Własny obraz**: JPG, PNG, WebP lub GIF. Moduł tworzy kopie 480 i 960 px, automatycznie podawane małym ekranom.
- **Obraz na telefon**: opcjonalny, wyświetlany poniżej 768 px. Przydatny do ciaśniejszego kadru.
- **Nazwa i krótki opis**: podziały wierszy w opisie są zachowywane.
- **Plakietka**: na przykład Nowość, Promocja lub -30%.
- **Tekst przycisku i link**: link może prowadzić do przefiltrowanej listy lub strony docelowej. Akceptowane są tylko linki http(s), względne, kotwice, mailto: i tel:.
- **Klasa CSS**: dodawana do karty.
Tę samą kategorię można dodać do prezentacji tylko raz.
## Wygląd
### Gotowe style
Pole „Gotowy wygląd” w zakładce Ogólne oferuje style Minimalny, Karty, Nakładka, Koła i Banery. Przy zapisie styl zastępuje opcje, które obejmuje (obraz, karta, teksty, przycisk, kolumny). Potem pole wraca do „Zachowaj moje ustawienia”, a wszystkie opcje można dalej zmieniać.
### Zakładki ustawień
- **Układ**: wiersze (1 do 3), kolumny na komputerze (1 do 8), tablecie (1 do 6) i telefonie (1 do 4), odstęp, limit wierszy dla siatki i masonry, styl masonry, kontener (kolumna motywu, ograniczony maksymalną szerokością, pełna szerokość), odstępy i tło sekcji.
- **Nagłówek**: wyświetlanie tytułu, znacznik (H2 zalecany na stronie głównej), wyrównanie, kolory i rozmiary, położenie i styl linku „Zobacz wszystko”.
- **Obraz**: format obrazu PrestaShop („Automatycznie” wybiera najostrzejszy format o szerokości co najmniej 400 px, w przeciwnym razie obraz oryginalny), proporcje, przycięcie lub cały obraz, kształt koła, tło, leniwe ładowanie.
- **Karta**: zaokrąglenie, obramowanie, cień, tło, wewnętrzny odstęp, efekt po najechaniu, czas animacji.
- **Teksty**: położenie (pod obrazem, na obrazie u góry, na środku lub na dole, albo brak tekstu), nakładka, typografia nazwy, opis, licznik produktów.
- **Przycisk i plakietka**, **Karuzela**, **Widoczność**, **Zaawansowane**: patrz kolejne sekcje.
Przy kształcie koła tekst zawsze jest pod obrazem.
## Karuzela
Opcje zakładki Karuzela działają, gdy układ to „Karuzela”: automatyczne przewijanie i opóźnienie, pauza po najechaniu, pętla, liczba kolumn przewijanych na kliknięcie, strzałki (na karuzeli, poza nią na dużych ekranach lub obok tytułu), kolory, kropki nawigacji, podgląd następnej kategorii na telefonie, przeciąganie myszą.
Przy 2 lub 3 wierszach kategorie wypełniają każdą kolumnę od góry do dołu, a potem wiersze przewijają się razem. Automatyczne przewijanie zatrzymuje się po najechaniu, przy fokusie klawiatury, przy dotyku, gdy karta przeglądarki jest ukryta lub gdy karuzela znika z ekranu. Jest wyłączone, jeśli odwiedzający poprosił w systemie o ograniczenie animacji.
## Gdzie wyświetlić prezentację
- **displayHome**: strona główna.
- **displayHeaderCategory** i **displayFooterCategory**: strony kategorii, nad produktami lub pod nimi.
- **displayDfCategoryShowcase**: hook tworzony przez moduł, który wywołasz w dowolnym miejscu motywu przez `{hook h='displayDfCategoryShowcase'}`.
- **Własny hook**: wybierz „Własny hook...” i wpisz nazwę (litery, cyfry, - i _). Nieistniejący hook zostanie utworzony i podpięty automatycznie. Wywołaj go przez `{hook h='twojHook'}`. Stara nazwa hooka (alias) jest zapisywana pod prawdziwą nazwą.
- **Widget**: `{widget name='dfcategoryshowcase' id_showcase=1}` wyświetla konkretną prezentację niezależnie od jej hooka.
Kilka prezentacji może korzystać z jednego hooka: wyświetlają się w kolejności listy, którą zmieniasz przeciąganiem. Moduł automatycznie odpina się od hooków, które nie są już używane.
## Widoczność
- **Wyświetlaj od / do**: daty w formacie RRRR-MM-DD GG:MM:SS. Puste = bez ograniczenia.
- **Grupy klientów**: prezentacja wyświetla się tylko zaznaczonym grupom (Odwiedzający, Gość, Klient lub twoje grupy B2B). Wszystkie zaznaczone = brak ograniczenia.
- **Ukryj na telefonie / na komputerze** (zakładka Zaawansowane): poniżej 768 px lub od 1024 px.
- **Sklepy**: w trybie multistore przypisz każdą prezentację do wybranych sklepów.
## Duplikowanie prezentacji
Akcja „Duplikuj” na liście kopiuje prezentację wraz z kategoriami, tekstami, sklepami i obrazami. Kopia jest tworzona jako wyłączona: zmień ją, a potem włącz.
## Własny CSS
Każda prezentacja jest renderowana w `
`, gdzie ID to numer widoczny na liście. Pole „Własny CSS” w zakładce Zaawansowane jest wypisywane tylko z tą prezentacją. Przykład:
```
#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }
```
Jeśli ta sama prezentacja pojawia się na stronie dwa razy (hook i widget), druga kopia dostaje identyfikator `dfcs-ID-2`.
## Cache i wydajność
Wynik jest zapisywany w cache Smarty osobno dla prezentacji, języka, sklepu i grupy klientów. Cache jest czyszczony przy każdym zapisie w module, przy każdej zmianie kategorii oraz przy każdej zmianie produktu, jeśli prezentacja pokazuje licznik produktów. CSS i JavaScript modułu są ładowane tylko wtedy, gdy aktywna jest co najmniej jedna prezentacja.
## Najczęstsze pytania
### Prezentacja się nie wyświetla
Sprawdź, czy prezentacja jest włączona, przypisana do sklepu, w okresie wyświetlania i dostępna dla grupy odwiedzającego. Następnie sprawdź, czy motyw rzeczywiście wywołuje wybrany hook. W przypadku własnego hooka znacznik `{hook h='...'}` musi znajdować się w szablonie.
### Obrazy są nieostre
Zostaw format obrazu na „Automatycznie” lub prześlij własny obraz. Format `category_default` w PrestaShop 8 ma tylko 141 x 180 px.
### W masonry kolejność nie idzie od lewej do prawej
Style „naturalne wysokości” i „naprzemienne wysokości” wypełniają kolumny od góry do dołu. Jeśli liczy się kolejność od lewej do prawej, użyj siatki albo stylu „pierwsza kategoria wyróżniona”.
## Odinstalowanie
Odinstalowanie usuwa tabele modułu, jego zakładki administracyjne i folder `/img/dfcategoryshowcase/` z przesłanymi obrazami.