1. Jaki problem rozwiązuje moduł

Na karcie produktu w sklepie internetowym klienci oczekują więcej niż zdjęcia, ceny i przycisku „Dodaj do koszyka”. Potrzebują uporządkowanych informacji dodatkowych: warunków dostawy, polityki zwrotów, składu materiału, instrukcji pielęgnacji, certyfikatów, wymiarów, kompatybilności itd. W natywnym PrestaShop część tych treści ląduje w długim opisie produktu albo w szablonie motywu — co szybko prowadzi do:

Zobacz wideo jak działa moduł Design Cart Product Accordion:

• chaosu treści — jeden długi opis, w którym trudno się odnaleźć;
• powtarzalnej pracy — te same akapity kopiowane ręcznie do wielu produktów;
• braku spójności wizualnej — każdy produkt wygląda inaczej, bo redaktor formatuje HTML na własną rękę;
• trudnej aktualizacji — zmiana regulaminu dostawy wymaga edycji setek produktów.

Design Cart Product Accordions rozwiązuje to przez model „zdefiniuj raz — użyj w wielu miejscach”:

1. W module tworzysz informacje (szablony harmonijek) z tytułem, treścią, ikoną i tagiem nagłówka SEO.
2. W edycji produktu wybierasz, które informacje mają się pojawić, w jakiej kolejności i które są aktywne.
3. Na froncie sklepu klient widzi zwarte harmonijki w sekcji dodatkowych informacji produktu — z animacją rozwijania i spójnym stylem całego sklepu.

2. Możliwości modułu — przegląd

3. Jak to działa technicznie

Model danych

Moduł korzysta z trzech tabel w bazie danych:

• ps_dc_pa_item — definicja informacji (ikona, tag nagłówka, daty);
• ps_dc_pa_item_lang — tytuł i treść w poszczególnych językach;
• ps_dc_pa_product_item — powiązanie produkt ↔ informacja (kolejność position, flaga is_active).

Prefiks ps_ zależy od instalacji — w dokumentacji używamy nazw logicznych z prefiksem PrestaShop.

Hooki

Przepływ pracy

Panel modułu → utworzenie informacji (szablon)
       ↓
Edycja produktu → zakładka „Informacje” → zaznaczenie + kolejność
       ↓
Zapis produktu → tabela dc_pa_product_item
       ↓
Karta produktu (front) → hook displayProductAdditionalInfo → harmonijki

4. Instalacja i pierwsze kroki

Wymagania

• PrestaShop z obsługą modułów (testowane pod kątem standardowej architektury modułu 1.0.0).
• Motyw wywołujący hook displayProductAdditionalInfo na stronie produktu (większość motywów klasycznych i nowoczesnych).
• Do menedżera obrazków: konto pracownika z profilem SuperAdmin (id_profile = 1).

Instalacja

1. Skopiuj folder dc_product_accordion do katalogu modules/ sklepu.
2. W panelu: Moduły → Menedżer modułów, wyszukaj „Design Cart Product Accordions”.
3. Kliknij Zainstaluj. Moduł utworzy tabele, zarejestruje hooki i ustawi domyślną konfigurację wyglądu.

Domyślne ustawienia po instalacji

Pierwsza konfiguracja (checklista)

1. Wejdź w Konfiguruj przy module.
2. W sekcji Dodaj informację utwórz co najmniej jeden blok (np. „Dostawa i płatności”).
3. Opcjonalnie dostosuj Ustawienia pod identyfikację wizualną sklepu.
4. Otwórz dowolny produkt → zakładka Informacje → zaznacz harmonijki i zapisz produkt.
5. Sprawdź kartę produktu na froncie w języku, w którym uzupełniłeś treść.

5. Panel modułu — trzy sekcje

Konfiguracja modułu jest podzielona na trzy kafelki nawigacyjne u góry ekranu:

Lista informacji

Przegląd wszystkich zdefiniowanych harmonijek. Dla każdej pozycji widać miniaturę ikony, tytuł (w bieżącym języku panelu lub w języku domyślnym sklepu, jeśli tytuł w danym języku jest pusty), tag nagłówka (H1–H6) oraz akcje:

• Edycja — przejście do formularza z zachowaniem danych;
• Kopiuj — duplikat z dopiskiem „(Kopia)” w tytule we wszystkich językach;
• Usuń — usunięcie informacji wraz z powiązaniami do produktów.

Możesz też zaznaczyć wiele wierszy i użyć Usuń zaznaczone (operacja masowa).

Dodaj informację / Edycja

Formularz tworzenia lub edycji pojedynczej informacji — szczegóły w rozdziale 6.

Ustawienia

Globalny wygląd i zachowanie wszystkich harmonijek we wszystkich produktach — szczegóły w rozdziale 8.

6. Tworzenie i edycja informacji

Pola formularza

Ikona harmonijki

Opcjonalny obrazek wyświetlany obok tytułu na froncie (26×26 px, object-fit: contain). Możesz:

• wkleić pełny URL obrazka w pole tekstowe;
• użyć przycisku Wybierz i menedżera obrazków (rozdział 10).

Tytuł i treść (wielojęzyczne)

Przełącznik języków (przyciski ISO, np. PL, EN) pozwala edytować tytuł i treść osobno dla każdego aktywnego języka sklepu. Tytuł jest wyświetlany w nagłówku harmonijki; treść — w rozwiniętej części.

Rodzaj nagłówka (H1–H6)

Wybór tagu HTML nagłówka wpływa na:

• semantykę SEO — hierarchia nagłówków na stronie produktu;
• domyślne style przeglądarki — mogą być częściowo nadpisane globalną typografią nagłówka z ustawień modułu.

Domyślnie używany jest H3, co jest rozsądnym kompromissem na podstronie produktu, gdzie główny tytuł strony jest zwykle H1.

Zapis

Po kliknięciu Zapisz informację wracasz do listy z komunikatem potwierdzenia. Informacja nie jest jeszcze widoczna na froncie, dopóki nie przypiszesz jej do produktu i nie zaznaczysz jako aktywnej w zakładce produktu.

7. Przypisywanie informacji do produktu

W edycji produktu (katalog → produkty → edycja) moduł dodaje sekcję Informacje. Skrypt product-accordions.js przenosi tę sekcję do osobnej zakładki o nazwie Informacje w pasku zakładek formularza produktu — dzięki temu nie ginie ona wśród innych pól dodatkowych.

Elementy interfejsu

• Uchwyt przeciągania (ikona „drag”) — zmiana kolejności na liście;
• Checkbox — informacja aktywna (widoczna na froncie) lub nieaktywna (szara na liście, niewidoczna dla klienta);
• Podgląd — ikona, tytuł, tag nagłówka, skrót treści (do 160 znaków, bez HTML).

Kolejność a widoczność

1. Ustaw kolejność przeciągając wiersze — kolejność zapisywana jest w ukrytym polu dc_pa_item_order.
2. Zaznacz checkbox przy informacjach, które mają być widoczne.
3. Zapisz produkt (standardowy przycisk PrestaShop). Dopiero zapis produktu utrwala powiązania w bazie.

8. Ustawienia wyglądu i zachowania

Sekcja Ustawienia w module wpływa globalnie na wszystkie harmonijki we wszystkich produktach. Poniżej opis każdego parametru i jego wpływu na ostateczny wygląd lub UX.

Kolory i obramowania

Zachowanie interakcji

Typografia

Osobne zestawy dla nagłówka i treści (body):

• Wielkość czcionki — 10–72 px, stosowana jako inline font-size na tytule lub treści;
• Grubość czcionki — 100–900 (krok 100);
• Kolor — selektor koloru (#RGB hex);
• Wyrównanie — lewo, środek, prawo;
• Uppercase — wymuszenie wielkich liter w danym elemencie.

Style typografii są wstrzykiwane jako atrybut style na elementach .dc-pa-front-title i .dc-pa-front-body-content, więc mają pierwszeństwo nad domyślnym CSS motywu w zakresie tych właściwości.

Animacja i dostępność

• Rozwijanie odbywa się przez animację grid-template-rows (płynne, ~0,38 s).
• Strzałka Material Icons (expand_more) obraca się o 180° przy otwarciu.
• Dla użytkowników z prefers-reduced-motion: reduce animacje są wyłączone.
• Nagłówki to przyciski <button> z aria-expanded — lepsza obsługa czytników ekranu niż sam div z onclick.

9. Wygląd na froncie sklepu

Gdzie pojawiają się harmonijki

Moduł renderuje blok <section class="dc-pa-front"> wyłącznie gdy:

1. jesteś na stronie produktu z prawidłowym ID;
2. produkt ma co najmniej jedną aktywną przypisaną informację.

Jeśli żadna informacja nie jest aktywna, moduł nie dodaje żadnego HTML — strona produktu wygląda tak, jak bez modułu.

Struktura pojedynczej harmonijki

┌─────────────────────────────────────────────┐
│ [ikona]  Tytuł (H1–H6)              [▼]    │  ← nagłówek (przycisk)
├─────────────────────────────────────────────┤
│  Treść informacji (tekst, łamanie linii)    │  ← panel (po rozwinięciu)
└─────────────────────────────────────────────┘

Odstępy i siatka

Lista harmonijek ma odstęp gap: 10px między elementami i margines górny sekcji 18 px (.dc-pa-front). Ikona ma zaokrąglone rogi 6 px. Kolory i promień pochodzą z ustawień modułu przekazanych jako zmienne CSS w atrybucie style sekcji nadrzędnej.

Co nie zależy od produktu

Kolory, typografia, tryb single-open i first-open są wspólne dla całego sklepu. Per produkt decydujesz wyłącznie o: które informacje, w jakiej kolejności i czy aktywne. Treść i tytuł pochodzą z definicji informacji (w odpowiednim języku frontu).

10. Menedżer obrazków (ikony)

Przy polu ikony w formularzu informacji dostępny jest wbudowany Menadżer obrazków Design Cart.

Uprawnienia i bezpieczeństwo

• Dostęp mają wyłącznie zalogowani pracownicy z profilem SuperAdmin (id_profile = 1).
• Żądania API wymagają ważnego tokenu modułów PrestaShop.
• Ścieżki plików są walidowane pod kątem wyjścia poza katalog główny (ochrona przed ../).

Lokalizacja plików

Obrazy trafiają do katalogu sklepu:

{katalog_prestashop}/img/dc_filemenager/

Obsługiwane formaty

• Rozszerzenia: JPG, JPEG, PNG, WebP;
• Maksymalny rozmiar pliku: 3 MB;
• Weryfikacja MIME przy uploadzie.

Funkcje w oknie modalnym

• przeglądanie folderów i miniatur;
• upload pojedynczych lub wielu plików (przeciągnij i upuść);
• wyszukiwanie po nazwie;
• wybór obrazka — URL trafia do pola ikony i podglądu miniatury.

11. Wielojęzyczność

Moduł respektuje języki skonfigurowane w PrestaShop:

• w panelu modułu edytujesz tytuł i treść osobno dla każdego języka;
• na froncie wyświetlana jest treść dla bieżącego języka klienta;
• jeśli tytuł lub treść w danym języku jest pusta, moduł fallbackuje do języka domyślnego sklepu (PS_LANG_DEFAULT).

W liście informacji w module tytuł kolumny „Tytuł informacji” również korzysta z tej samej logiki COALESCE.

12. Najczęstsze pytania i rozwiązywanie problemów

Harmonijki nie widać na stronie produktu

1. Sprawdź, czy moduł jest zainstalowany i włączony.
2. W produkcie: zakładka Informacje — czy zaznaczono checkbox przy informacji i zapisano produkt.
3. Czy motyw wywołuje hook displayProductAdditionalInfo w szablonie produktu.
4. Czy tytuł/treść istnieją w języku, w którym przeglądasz sklep (lub w języku domyślnym).

Treść wyświetla się „gołym tekstem”, bez formatowania HTML

To zamierzone zachowanie — treść jest escapowana. Używaj nowych linii w polu textarea; na froncie pojawią się jako odstępy między akapitami.

Menedżer obrazków pokazuje „Admin only” lub „Unauthorized”

Zaloguj się na konto SuperAdmin lub wgraj ikonę ręcznie przez URL zewnętrzny / inny katalog img/.

Po aktualizacji motywu harmonijki zniknęły

Nowy motyw mógł usunąć hook z szablonu. Dodaj w szablonie produktu:

{hook h='displayProductAdditionalInfo' product=$product}

(składnia może nieznacznie różnić się w zależności od wersji PrestaShop i motywu).

Chcę innej pozycji na stronie (np. pod opisem w zakładce)

Moduł jest przywiązany do hooka displayProductAdditionalInfo. Zmiana pozycji wymaga przeniesienia hooka w szablonie motywu lub użycia modułu zarządzającego hookami w PrestaShop.

Usunięcie modułu

Deinstalacja usuwa tabele modułu (dc_pa_*) oraz wpisy konfiguracji (DC_PA_*). Wszystkie zdefiniowane informacje i przypisania do produktów zostaną trwale usunięte — wykonaj kopię bazy przed odinstalowaniem na produkcji.

13. Informacje techniczne dla administratorów

Pliki modułu (skrót)

Klucze konfiguracji PrestaShop

• DC_PA_HEADER_BG, DC_PA_HEADER_BORDER, DC_PA_BODY_BG, DC_PA_BODY_BORDER
• DC_PA_BORDER_RADIUS, DC_PA_SINGLE_OPEN, DC_PA_FIRST_OPEN
• DC_PA_TYPO_HEADER, DC_PA_TYPO_BODY — JSON z ustawieniami typografii

Zalecane praktyki redakcyjne

• Twórz krótkie, jednoznaczne tytuły (np. „Dostawa”, „Zwroty”, „Materiał”).
• Trzymaj powtarzalne treści jako osobne informacje — unikniesz duplikacji w setkach produktów.
• Dla SEO nie nadużywaj tagu H1 w harmonijkach, jeśli strona produktu ma już H1 w nazwie produktu.
• Po zmianie ustawień globalnych odśwież stronę produktu z wyczyszczonym cache PrestaShop i przeglądarki.
• Ikony trzymaj w jednym stylu (np. outline PNG 64×64) dla spójności wizualnej.

Podsumowanie wpływu ustawień na wygląd