Dokumentacja CC Kategorie Na Stronie Głównej PrestaShop
Kompleksowa dokumentacja dla modułu wyświetlania kategorii na stronie głównej PrestaShop (cc_ps_home_categories) z zaawansowanymi opcjami stylizacji, wieloma trybami wyświetlania i pełną kontrolą nad wyglądem kategorii.Spis treści
- Wprowadzenie
- Instalacja
- Aktywacja licencji
- Panel zarządzania
- Ustawienia ogólne
- Style wyświetlania
- Konfiguracja obrazów
- Wybór kategorii
- Customizacja wyglądu
- Responsywność
- Rozwiązywanie problemów
- FAQ
1. Wprowadzenie
CC PrestaShop Kategorie Główna to zaawansowany moduł umożliwiający eleganckie wyświetlanie kategorii na stronie głównej sklepu. Moduł oferuje szeroką gamę stylów wyświetlania, od klasycznych siatek po nowoczesne slidery, zapewniając pełną kontrolę nad wyglądem i funkcjonalnością.Główne funkcje modułu:
- 7 różnych stylów siatki (klasyczna, nowoczesna, minimalistyczna, kolorowa, elegancka, dark mode, light bordered)
- Slider z nawigacją i obsługą gestów dotykowych
- 3 tryby list (pozioma, pionowa, kompaktowa)
- Pełna kontrola nad wyborem kategorii
- Zaawansowane opcje obrazów
- Responsywny design
- System licencyjny COCOS
- Wielojęzyczna obsługa
- Animacje i efekty przejść
- Możliwość umieszczenia w różnych hookach
2. Instalacja
Wymagania systemowe- PrestaShop 1.7.0.0 lub nowszy
- PHP 7.2 lub nowszy
- MySQL 5.6 lub nowszy
- Uprawnienia do instalacji modułów
- Minimum 256 MB RAM (zalecane 512 MB)
- Rozszerzenie GD dla przetwarzania obrazów
- Pobierz plik ZIP modułu z oficjalnego sklepu cocos.codes
- Zaloguj się do panelu administracyjnego PrestaShop
- Przejdź do: Moduły > Menedżer modułów > Dodaj nowy moduł
- Kliknij „Dodaj moduł” i wybierz pobrany plik ZIP
- Po zakończeniu instalacji kliknij „Konfiguruj”
- Moduł automatycznie zarejestruje się w hooku displayHome
Info
Po instalacji moduł automatycznie ustawia się na pierwszej pozycji w hooku displayHome i tworzy domyślną konfigurację. Wszystkie style CSS i JavaScript są ładowane automatycznie na stronie głównej.
3. Aktywacja licencji
Przed rozpoczęciem korzystania z pełnej funkcjonalności modułu konieczna jest aktywacja licencji:- Po instalacji przejdź do konfiguracji modułu
- Wybierz zakładkę „Licencja”
- Wprowadź klucz licencyjny otrzymany po zakupie
- Kliknij „Aktywuj licencję”
- System sprawdzi ważność licencji na serwerach COCOS
- Po pomyślnej aktywacji zobaczysz komunikat potwierdzający
Ostrzeżenie
Bez aktywnej licencji moduł nie będzie wyświetlał kategorii na stronie głównej. W górnej części panelu administracyjnego będzie wyświetlany komunikat o nieważnej licencji wraz z linkiem do aktywacji.
4. Panel zarządzania
Panel zarządzania modułem składa się z kilku zakładek umożliwiających pełną konfigurację:Główne zakładki:
- Ustawienia – główna konfiguracja modułu (dostępna tylko z ważną licencją)
- Dokumentacja – link do pełnej dokumentacji online
- Wsparcie – link do strony wsparcia technicznego COCOS
- Wtyczki – lista dostępnych rozszerzeń COCOS
- Licencja – zarządzanie licencją modułu
5. Ustawienia ogólne
W sekcji ustawień ogólnych znajdziemy podstawowe opcje sterujące działaniem modułu:Ustawienie | Opis | Domyślna wartość |
Włącz moduł | Globalne włączenie/wyłączenie wyświetlania | Włączony |
Pokaż tytuł sekcji | Wyświetlanie nagłówka nad kategoriami | Włączony |
Tytuł sekcji | Wielojęzyczny tekst nagłówka | „Nasze Kategorie” |
Limit kategorii | Maksymalna liczba kategorii (1-50) | 6 |
- Włączony – kategorie są widoczne na stronie głównej zgodnie z konfiguracją
- Wyłączony – moduł nie wyświetla żadnych kategorii
Wskazówka
Używaj głównego przełącznika do szybkiego wyłączenia modułu bez utraty konfiguracji, np. podczas prac konserwacyjnych sklepu lub testowania nowych ustawień.
6. Style wyświetlania
Moduł oferuje 11 różnych stylów wyświetlania kategorii, podzielonych na 3 główne grupy:Style siatki (Grid)
Styl | Opis | Zalecane użycie |
grid_classic | Klasyczne karty z ramkami i cieniami | Uniwersalne sklepy |
grid_modern | Gradient tła z overlay na obrazach | Nowoczesne marki |
grid_minimal | Czyste, minimalistyczne karty | Sklepy premium |
grid_colorful | Kolorowe ramki z animacjami | Sklepy dla dzieci/młodzieży |
grid_elegant | Eleganckie karty ze złotymi akcentami | Luksusowe marki |
grid_dark | Ciemny motyw z efektami świetlnymi | Gaming/elektronika |
grid_light_bordered | Jasne karty z wyraźnymi ramkami | Sklepy korporacyjne |
Styl | Opis | Zalecane użycie |
list_horizontal | Poziome karty z obrazkiem z lewej | Strony kategorii głównych |
list_vertical | Pionowe karty w kolumnach | Wąskie sekcje |
list_compact | Kompaktowa lista z małymi obrazkami | Sidebar, stopka |
- slider_classic – Elegancki slider z nawigacją i overlay na hover
Notatka
Każdy styl ma własne unikalne style CSS i animacje. Style grid obsługują konfigurację liczby kolumn, podczas gdy slider automatycznie dostosowuje liczbę widocznych elementów do szerokości ekranu.
7. Konfiguracja obrazów
Moduł oferuje pełną kontrolę nad wyświetlaniem obrazów kategorii:Rozmiary kontenerów
Rozmiar | Wysokość | Zalecane dla |
small | 150px | Kompaktowe układy |
medium | 250px | Standardowe wyświetlanie |
large | 350px | Efektowne prezentacje |
System automatycznie wykrywa dostępne typy obrazów zdefiniowane w PrestaShop dla kategorii:
- category_default – standardowy typ dla kategorii
Jeśli kategoria nie ma przypisanego obrazu, system automatycznie wyświetla domyślny obraz zastępczy no-image-category.jpg.
8. Wybór kategorii
Moduł oferuje dwa tryby wyboru kategorii do wyświetlenia:Tryb automatyczny
System automatycznie wybiera kategorie główne według ich pozycji:
- Pomija kategorię root (ID: 1)
- Pomija kategorię główną sklepu
- Sortuje według pozycji w drzewie kategorii
- Wybiera tylko aktywne kategorie
- Respektuje ustawiony limit
Administrator może ręcznie wybrać konkretne kategorie:
- Lista ID kategorii oddzielonych przecinkami
- Przykład: 2,5,8,12
- System sprawdza czy kategorie istnieją i są aktywne
- Porządek wyświetlania według kolejności w liście
- Automatyczne pomijanie nieistniejących kategorii
Niezależnie od trybu system sprawdza:
- Czy kategoria istnieje w bazie danych
- Czy kategoria jest aktywna
- Czy kategoria ma nazwę w aktualnym języku
- Czy użytkownik ma uprawnienia do jej wyświetlenia
Wskazówka
W trybie ręcznym możesz łatwo zmienić kolejność kategorii zmieniając ich porządek w liście ID. System będzie respektował dokładnie tę kolejność.
9. Dostosowanie wyglądu
Kontrola nad treściąOpcja | Funkcja | Domyślnie |
Pokaż nazwy kategorii | Wyświetlanie tytułów kategorii | Włączone |
Pokaż opisy kategorii | Wyświetlanie opisów (skrócone) | Włączone |
Liczba kolumn | Podział siatki (1-6 kolumn) | 3 |
System automatycznie dostosowuje liczbę kolumn:
- Desktop – pełna liczba kolumn
- Tablet – maksymalnie 2-3 kolumny
- Mobile – zawsze 1 kolumna
- Fade-in podczas ładowania strony
- Hover effects na kartach
- Smooth transitions
- Scroll reveal animations
- Loading states dla obrazów
Slider automatycznie:
- Dostosowuje liczbę widocznych elementów
- Obsługuje gestyswipe na urządzeniach dotykowych
- Pokazuje/ukrywa nawigację w zależności od potrzeb
- Zachowuje proporcje na różnych ekranach
10. Responsywność
Moduł jest w pełni responsywny i automatycznie dostosowuje się do różnych rozmiarów ekranów:Breakpointy
Urządzenie | Szerokość | Kolumny | Zachowanie |
Desktop | > 768px | Pełna konfiguracja | Standardowe wyświetlanie |
Tablet | 481-768px | Maksymalnie 2-3 | Uproszony layout |
Mobile | < 480px | 1 | Pionowy układ |
- Automatyczne zmniejszenie padding i margin
- Responsive typography
- Touch-friendly navigation
- Zoptymalizowane rozmiary obrazów
- Uproszczone animacje
- Lista pozioma – przekształca się w pionową
- Lista kompaktowa – elementy układają się jeden pod drugim
- Slider – zmniejsza szerokość elementów i odstępy
Notatka
Wszystkie style responsywne są wbudowane w moduł i nie wymagają dodatkowej konfiguracji. System automatycznie wykrywa rozmiar ekranu i stosuje odpowiednie style.
11. Rozwiązywanie problemów
Kategorie nie wyświetlają się na stronie głównej- Sprawdź czy moduł jest włączony w ustawieniach ogólnych
- Upewnij się, że licencja jest aktywna
- Sprawdź czy wybrane kategorie są aktywne w PrestaShop
- Wyczyść pamięć podręczną PrestaShop i przeglądarki
- Sprawdź czy hook displayHome jest obsługiwany przez szablon
- Sprawdź czy plik views/css/front.css istnieje
- Upewnij się, że jesteś na stronie głównej (kontroler: IndexController)
- Sprawdź czy nie ma konfliktów z innymi modułami
- Wyłącz Cache CSS w ustawieniach PrestaShop
- Sprawdź uprawnienia do odczytu plików modułu
- Sprawdź konsolę przeglądarki na błędy JavaScript
- Upewnij się, że plik views/js/front.js jest ładowany
- Sprawdź czy nie ma konfliktów z jQuery
- Wyłącz inne moduły slider na czas testów
- Sprawdź czy elementy mają poprawną strukturę HTML
- Sprawdź czy kategorie mają przypisane obrazy
- Upewnij się, że wybrany typ obrazu istnieje w systemie
- Sprawdź uprawnienia do katalogu img/c/
- Sprawdź czy plik no-image-category.jpg istnieje
- Wyczyść pamięć podręczną obrazów
- Sprawdź czy klucz licencyjny jest poprawny
- Upewnij się, że domena jest zgodna z licencją
- Sprawdź połączenie z serwerami COCOS
- Wyczyść pamięć podręczną modułu
- Skontaktuj się z supportem w przypadku problemów z aktywacją
Błąd
Jeśli napotykasz nierozwiązywalne problemy, upewnij się że używasz najnowszej wersji modułu i PrestaShop. W przypadku ciąglych trudności skontaktuj się z supportem COCOS poprzez cocos.codes/wsparcie.
12. FAQ
Czy mogę używać kilku stylów jednocześnie?Nie, moduł pozwala na wybór tylko jednego stylu wyświetlania na raz. Możesz jednak łatwo zmienić styl w ustawieniach.
Jak dodać własny styl wyświetlania?
Nowe style wymagają modyfikacji plików CSS i PHP. Zalecamy skopiowanie istniejącego stylu i dostosowanie go do swoich potrzeb.
Czy mogę wyświetlać podkategorie?
Obecnie moduł obsługuje tylko kategorie główne. Wyświetlanie podkategorii wymaga modyfikacji kodu źródłowego.
Jak zmienić pozycję modułu na stronie?
Moduł jest automatycznie umieszczony w hooku displayHome na pierwszej pozycji. Możesz zmienić kolejność w menu Pozycja w panelu modułów.
Czy moduł działa z cache’owaniem?
Tak, moduł jest kompatybilny z systemami cache PrestaShop i nie wymaga specjalnej konfiguracji.
Jak przetłumaczyć tytuł sekcji?
Pole „Tytuł sekcji” obsługuje wszystkie aktywne języki w sklepie. Przełącz język w panelu administracyjnym i wprowadź tłumaczenie.
Czy mogę ukryć opisy kategorii dla niektórych stylów?
Opcja „Pokaż opisy kategorii” działa globalnie dla wszystkich stylów. Niektóre style (jak grid_modern) wyświetlają opisy w overlay.
Dlaczego slider pokazuje strzałki nawigacji gdy nie są potrzebne?
JavaScript automatycznie ukrywa strzałki gdy wszystkie elementy mieszczą się w widoku. Sprawdź czy elementy mają poprawne wymiary.
Jak działa lazy loading obrazów?
Obrazy są ładowane automatycznie gdy stają się widoczne w viewport. To oszczędza przepustowość i przyspiesza ładowanie strony.
Czy mogę zmienić animacje hover?
Animacje są zdefiniowane w CSS dla każdego stylu. Możesz je modyfikować edytując plik front.css.
Dlaczego niektóre kategorie nie są wyświetlane?
System pomija nieaktywne kategorie, kategorie bez nazwy oraz te do których użytkownik nie ma uprawnień.
Jak zmienić domyślny obraz kategorii?
Zastąp plik views/img/no-image-category.jpg własnym obrazem o tych samych wymiarach.
Czy moduł obsługuje RTL (right-to-left)?
Moduł używa standardowych klas Bootstrap które obsługują RTL. Może być potrzebne dostosowanie niektórych stylów.
Jak wyłączyć animacje?
Możesz usunąć lub zakomentować animacje CSS w pliku front.css lub dodać animation: none; do odpowiednich selektorów.
Czy mogę zmienić liczebowość opisów kategorii?
Opisy są automatycznie skracane do 80-120 znaków w zależności od stylu. Możesz zmienić to w pliku template home_categories.tpl.
Dlaczego moduł nie działa po aktualizacji PrestaShop?
Sprawdź kompatybilność wersji w pliku modułu. Możliwe że potrzebna jest aktualizacja modułu do najnowszej wersji.
Jak zoptymalizować wydajność dla dużej liczby kategorii?
Użyj trybu ręcznego wyboru kategorii i ogranicz liczbę do maksymalnie 12 elementów. Włącz lazy loading i cache obrazów.
Czy mogę używać modułu na stronach kategorii?
Moduł jest przeznaczony dla strony głównej. Umieszczenie na innych stronach wymaga modyfikacji hookew w kodzie źródłowym.
Jak sprawdzić które hooki są dostępne w moim szablonie?
Użyj modułu „Hook displayer” lub sprawdź pliki template w katalogu szablonu. Nie wszystkie szablony obsługują wszystkie hooki.
Dlaczego style dark mode nie wyświetlają się poprawnie?
Style dark wymagają specjalnego wrappera. Sprawdź czy szablon nie nadpisuje kolorów tła i czy nie ma konfliktów z innymi stylami.
Jak eksportować konfigurację modułu?
Konfiguracja jest przechowywana w tabeli ps_configuration z prefiksem CC_PS_HC_. Możesz wyeksportować te rekordy przez phpMyAdmin.
Sukces
Moduł CC PrestaShop Kategorie Główna to profesjonalne narzędzie do eleganciego prezentowania kategorii w sklepach internetowych. Dzięki szerokim możliwościom stylizacji i konfiguracji pozwala stworzyć unikalne doświadczenie dla klientów i zwiększyć konwersję sklepu.