1. Po co jest ten moduł i jaki problem rozwiązuje

Design Cart Product FAQ pozwala dodawać do każdego produktu osobną sekcję pytań i odpowiedzi (FAQ) wyświetlaną na karcie produktu w formie harmonijki (accordion). Treść FAQ jest przypisana do konkretnego produktu, a nie do całego sklepu.

Moduł rozwiązuje kilka typowych problemów sklepów internetowych:

• Rozproszone informacje o produkcie – szczegóły techniczne, warunki gwarancji, sposób użycia czy odpowiedzi na powtarzające się pytania klientów często lądują w długim opisie produktu albo w ogóle nie są publikowane. FAQ porządkuje te informacje w czytelne, rozwijane bloki.
• Brak dedykowanego miejsca pod opisem – moduł wyświetla sekcję pod zakładkami produktu (opis, szczegóły itd.), tam gdzie klient szuka dodatkowych informacji przed zakupem.
• Trudna edycja w panelu administracyjnym – zamiast edytować HTML w opisie, redaktor dodaje wpisy FAQ w osobnej zakładce formularza produktu: tytuł, treść, kolejność, kopiowanie i usuwanie.
• Brak spójnego wyglądu – kolory, obramowania, typografia i zachowanie harmonijki (np. zwijanie pozostałych po rozwinięciu jednej) konfiguruje się centralnie w module, bez ingerencji w kod szablonu przy każdej zmianie wizualnej.
• Wielojęzyczność – każde pytanie i odpowiedź oraz intro sekcji można uzupełnić osobno dla każdego języka sklepu.

Zobacz film z instalacji i konfiguracji modułu Design Cart Product FAQ:

2. E-E-A-T i korzyści dla SEO

E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness – doświadczenie, ekspertyza, autorytet, wiarygodność) to zestaw sygnałów jakości treści, na które zwracają uwagę wyszukiwarki, zwłaszcza w kontekście YMYL (Your Money Your Life – zakupy, zdrowie, finanse).

Dobrze przygotowane FAQ produktowe wspiera E-E-A-T w następujący sposób:

• Experience (doświadczenie) – odpowiedzi mogą opisywać praktyczne użycie produktu, typowe scenariusze, ograniczenia i wskazówki pochodzące z realnej obsługi klienta.
• Expertise (ekspertyza) – uporządkowane pytania techniczne, parametry, kompatybilność czy montaż budują wizerunek sklepu, który rozumie oferowany asortyment.
• Authoritativeness (autorytet) – spójna, kompletna sekcja FAQ na karcie produktu sygnalizuje, że sklep świadomie publikuje wiarygodne informacje, a nie tylko krótki opis marketingowy.
• Trustworthiness (wiarygodność) – jasne odpowiedzi na pytania o zwroty, gwarancję, dostawę, bezpieczeństwo czy certyfikaty zmniejszają niepewność kupującego i ograniczają liczbę kontaktów do BOK.

FAQ nie zastępuje profesjonalnej treści głównej ani schema.org, ale uzupełnia kartę produktu o warstwę informacyjną, która może:

• odpowiadać na zapytania użytkowników (long-tail),
• wydłużać czas na stronie produktu,
• obniżać wskaźnik porzuceń wynikający z braku informacji,
• wspierać konwersję poprzez rozwianie wątpliwości przed dodaniem do koszyka.

Moduł generuje semantyczny HTML (nagłówki sekcji H1–H6, przyciski harmonijki z atrybutem aria-expanded). To ułatwia dostępność i indeksowanie, o ile treść FAQ jest merytoryczna i unikalna dla danego produktu.

3. Zastosowanie – kiedy używać modułu

Moduł sprawdza się szczególnie w sklepach, gdzie:

• produkty wymagają wyjaśnień przed zakupem (elektronika, AGD, narzędzia, chemia, żywność specjalistyczna),
• klientów interesują powtarzalne pytania (montaż, konserwacja, kompatybilność, gwarancja),
• opis główny ma pozostać marketingowy, a szczegóły techniczne trafiają do FAQ,
• różne warianty produktu mają wspólne pytania, ale treść FAQ jest edytowana per produkt,
• sklep działa w wielu językach i wymaga tłumaczeń pytań oraz odpowiedzi.

Moduł nie wyświetla sekcji FAQ na froncie, jeśli dany produkt nie ma żadnych dodanych wpisów. Pusta konfiguracja intro (tytuł i opis) nie wystarczy – musi istnieć co najmniej jedno pytanie przypisane do produktu.

4. Wymagania i instalacja

4.1. Wymagania

• PrestaShop 9 (moduł testowany w środowisku zgodnym z PrestaShop 9).
• Aktywny moduł w katalogu modules/dc_product_faq/.
• Motyw sklepu z obsługą hooka displayDcProductFaqBelowTabs w szablonie karty produktu. W motywie Design Cart hook jest umieszczony w pliku themes/designcart/templates/catalog/product.tpl bezpośrednio pod sekcją .dc-product-tabs-wrap (pod zakładkami opisu produktu).

4.2. Instalacja

1. Skopiuj katalog modułu do /modules/dc_product_faq/.
2. W panelu administracyjnym przejdź do Moduły → Menedżer modułów.
3. Wyszukaj Design Cart Product FAQ i kliknij Instaluj.
4. Moduł utworzy tabele w bazie danych, zarejestruje hooki i zapisze domyślną konfigurację.

Przy odinstalowaniu moduł usuwa tabele ps_dc_product_faq i ps_dc_product_faq_lang oraz wpisy konfiguracyjne. Wszystkie dane FAQ zostaną trwale usunięte.

4.3. Motyw inny niż Design Cart

Jeśli sklep używa innego motywu, dodaj w szablonie karty produktu (np. product.tpl) linię tuż po zamknięciu sekcji z zakładkami produktu:

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

Hook jest tworzony automatycznie przy instalacji modułu. Bez tego wywołania FAQ nie pojawi się na froncie.

5. Struktura modułu – przegląd techniczny

5.1. Główne pliki

• dc_product_faq.php – klasa modułu, instalacja, hooki, konfiguracja, endpoint AJAX w panelu admina.
• classes/DcProductFaqRepository.php – operacje na bazie danych (CRUD, kolejność, kopiowanie).
• classes/DcProductFaqSettings.php – klucze konfiguracji, typografia, walidacja kolorów i tagów nagłówków.
• views/templates/admin/ – konfiguracja modułu (Intro, Ustawienia) oraz zakładka FAQ w produkcie.
• views/templates/hook/product_faq.tpl – szablon harmonijki na froncie.
• views/css/admin-config.css – style panelu administracyjnego (kolor brandowy #1ea28b).
• views/css/front.css i views/js/front.js – wygląd i animacja harmonijki na froncie.
• views/js/product-faq.js – zakładka FAQ w edycji produktu, modal, drag-and-drop, AJAX.

5.2. Baza danych

Tabela ps_dc_product_faq:

• id_dc_product_faq – identyfikator wpisu,
• id_product – produkt,
• position – kolejność wyświetlania,
• date_add, date_upd – daty utworzenia i aktualizacji.

Tabela ps_dc_product_faq_lang:

• id_dc_product_faq, id_lang – klucz złożony,
• title – tytuł / pytanie (do 512 znaków),
• content – treść odpowiedzi (HTML oczyszczony przy zapisie).

5.3. Hooki

6. Instrukcja obsługi – konfiguracja modułu

Wejdź w Moduły → Menedżer modułów → Design Cart Product FAQ → Konfiguruj. Dostępne są dwie zakładki: Intro i Ustawienia.

6.1. Zakładka Intro

Intro to nagłówek i opis całej sekcji FAQ wyświetlane nad listą pytań na karcie produktu (dotyczy wszystkich produktów mających FAQ).

Pola:

• Typ nagłówka tytułu sekcji – wybór tagu HTML od H1 do H6 dla tytułu sekcji na froncie. Domyślnie H2.
• Tytuł sekcji – pole per język (np. „FAQ”, „Najczęstsze pytania”). Przełącznik języków u góry formularza.
• Tekst opisowy – opcjonalny wstęp pod tytułem, per język. Może zawierać podstawowy HTML (oczyszczany przy zapisie).

Kliknij Zapisz Intro, aby zapisać zmiany.

Jeśli tytuł i opis są puste, blok intro nie jest renderowany na froncie – widoczna pozostaje sama harmonijka z pytaniami.

6.2. Zakładka Ustawienia

Ustawienia dotyczą wyglądu i zachowania harmonijki oraz typografii elementów sekcji.

Kolory i kształt harmonijki

• Tło header harmonijki – kolor tła nagłówka każdego pytania (color picker).
• Border header harmonijki – kolor obramowania nagłówka.
• Tło body harmonijki – kolor tła rozwiniętej odpowiedzi.
• Border body harmonijki – kolor obramowania treści odpowiedzi.
• Border radius (px) – zaokrąglenie rogów (0–40 px).

Zachowanie harmonijki

• Rozwinięcie jednej harmonijki zwija pozostałe – tryb „accordion” (tylko jedno pytanie otwarte naraz). Domyślnie włączone.
• Pierwsza harmonijka domyślnie rozwinięta – pierwsze pytanie na liście startuje w stanie otwartym. Domyślnie wyłączone.

Rozwijanie i zwijanie na froncie jest animowane (płynna animacja wysokości).

Typografia

Dla każdego z czterech elementów można ustawić: wielkość czcionki (10–72 px), grubość (100–900), kolor, wyrównanie (lewo / środek / prawo), opcję uppercase.

• Nagłówek harmonijki (pytanie) – styl tekstu pytania w nagłówku każdego kafelka.
• Treść harmonijki (odpowiedź) – styl treści odpowiedzi w rozwiniętym body.
• Tytuł sekcji (Intro) – styl tytułu całej sekcji FAQ (z zakładki Intro).
• Opis sekcji (Intro) – styl tekstu opisowego pod tytułem sekcji.

Kliknij Zapisz ustawienia, aby zapisać zmiany.

7. Instrukcja obsługi – FAQ w produkcie

Otwórz edycję lub dodawanie produktu w panelu administracyjnym (Katalog → Produkty). W formularzu produktu pojawi się dodatkowa zakładka FAQ (moduł przenosi ją na koniec listy zakładek: Opis, Szczegóły, Warianty itd.).

7.1. Lista wpisów FAQ

Każdy wpis to szeroki kafel z:

• ikoną uchwytu (drag handle) po lewej – przeciągnij i upuść, aby zmienić kolejność,
• pogrubionym tytułem (pytaniem),
• skrótem treści do ok. 160 znaków pod tytułem,
• przyciskami akcji po prawej: edytuj, kopiuj, usuń.

7.2. Dodawanie nowego FAQ

1. Kliknij Dodaj FAQ nad listą.
2. W oknie modalnym wybierz język (przełącznik flag / kodów ISO).
3. Wpisz tytuł / pytanie oraz treść odpowiedzi w polu textarea dla każdego języka, który chcesz uzupełnić.
4. Kliknij Zapisz. Modal się zamyka, wpis pojawia się na liście.

Produkt już zapisany (ma ID): zapis odbywa się natychmiast przez AJAX – dane trafiają od razu do bazy.

Nowy produkt (jeszcze niezapisany): możesz dodawać wpisy do listy w pamięci przeglądarki. Zostaną zapisane do bazy przy pierwszym zapisie produktu. Na liście wyświetla się komunikat informujący o tym zachowaniu.

7.3. Edycja wpisu

Kliknij ikonę edytuj przy wybranym kafelu. Otworzy się ten sam modal co przy dodawaniu, z wypełnionymi polami we wszystkich językach. Po zapisie lista aktualizuje się automatycznie.

7.4. Kopiowanie wpisu

Ikona kopiuj tworzy duplikat wpisu z dopiskiem „(kopia)” w tytule (we wszystkich językach). Nowy wpis trafia na koniec listy. Kolejność można zmienić przeciąganiem.

7.5. Usuwanie wpisu

Ikona usuń pyta o potwierdzenie, a następnie usuwa wpis z bazy (lub z listy oczekujących przy nowym produkcie).

7.6. Kolejność wyświetlania

Przeciągnij kafle za uchwyt po lewej stronie. Dla zapisanego produktu kolejność jest zapisywana przez AJAX oraz przy zapisie formularza produktu. Na froncie pytania wyświetlają się w ustalonej kolejności.

7.7. Zapis produktu

Po edycji FAQ pamiętaj o zapisaniu całego formularza produktu (przycisk Zapisz w stopce formularza), zwłaszcza gdy dodawałeś FAQ przed pierwszym zapisem nowego produktu lub zmieniałeś kolejność.

8. Wyświetlanie na froncie

Sekcja FAQ renderuje się pod zakładkami produktu (w motywie Design Cart: pod elementem .dc-product-tabs-wrap), jeśli:

• moduł jest zainstalowany i aktywny,
• szablon motywu wywołuje hook displayDcProductFaqBelowTabs,
• produkt ma co najmniej jeden wpis FAQ.

Struktura na froncie:

1. Opcjonalny blok Intro – tytuł (tag H1–H6 wg konfiguracji) i opis sekcji ze stylami z ustawień typografii.
2. Lista pytań w harmonijce – każde pytanie to przycisk (nagłówek) z ikoną strzałki; po kliknięciu rozwija się treść odpowiedzi.

Treść odpowiedzi obsługuje HTML oczyszczony przy zapisie (np. akapity, listy, pogrubienia – zgodnie z filtrem PrestaShop). Tytuły pytań są escapowane w szablonie.

Assety frontowe (CSS i JS) ładują się tylko na stronie produktu, nie obciążając pozostałych podstron sklepu.

9. Domyślna konfiguracja po instalacji

• Tytuł sekcji Intro: „FAQ” (dla każdego języka sklepu).
• Typ nagłówka Intro: H2.
• Opis sekcji Intro: pusty.
• Kolory harmonijki: jasne tło nagłówka (#f8fafc), obramowania szare, białe tło body.
• Border radius: 12 px.
• Tryb „jedna otwarta”: włączony.
• Pierwsza harmonijka otwarta: wyłączone.
• Typografia tytułu sekcji: 22 px, grubość 700.
• Typografia opisu sekcji: 15 px, grubość 400, kolor #4b5563.

10. Dobre praktyki redakcyjne

• Pisz pytania tak, jak formułuje je klient („Czy pasuje do…?”, „Jak długo trwa gwarancja?”).
• Odpowiedzi powinny być konkretne – unikaj ogólników z opisu marketingowego.
• Nie duplikuj identycznego FAQ na wszystkich produktach bez potrzeby; lepiej dopasować treść do specyfiki oferty.
• Uzupełniaj FAQ we wszystkich aktywnych językach sklepu – moduł przy braku tłumaczenia korzysta z wersji w języku domyślnym.
• Regularnie aktualizuj FAQ po zmianach regulaminu, gwarancji lub specyfikacji produktu.

11. Rozwiązywanie problemów

FAQ nie widać na karcie produktu

• Sprawdź, czy produkt ma dodane wpisy FAQ.
• Sprawdź, czy moduł jest zainstalowany i włączony.
• Sprawdź, czy motyw zawiera {hook h='displayDcProductFaqBelowTabs' product=$product} w szablonie produktu.
• Wyczyść cache PrestaShop i cache motywu.

Zakładka FAQ nie pojawia się w produkcie

• Upewnij się, że moduł jest aktywny.
• Odśwież stronę edycji produktu – zakładka jest dodawana dynamicznie przez JavaScript.

Zapis FAQ przy nowym produkcie nie działa

• Najpierw zapisz produkt (nadaj mu ID), albo dodaj FAQ przed zapisem i potem zapisz cały formularz produktu – wpisy oczekujące zapiszą się w hooku actionObjectProductAddAfter.

Intro się nie wyświetla

• Uzupełnij tytuł lub opis w zakładce Intro modułu i zapisz.
• Intro nie zastępuje wymogu posiadania wpisów FAQ – bez pytań cała sekcja pozostaje ukryta.

12. Podsumowanie

Design Cart Product FAQ to moduł PrestaShop do zarządzania pytaniami i odpowiedziami przypisanymi do poszczególnych produktów. Łączy wygodną edycję w panelu administracyjnym (zakładka FAQ, modal, sortowanie) z konfigurowalną harmonijką na froncie i sekcją Intro wspierającą czytelność oraz sygnały E-E-A-T. Moduł jest przeznaczony dla sklepów na PrestaShop 9 korzystających z motywu z hookiem pod zakładkami produktu – w standardowej instalacji Design Cart hook jest już dodany.