Jak dodać FAQ w dowolnym miejscu OpenCart 3? DC FAQ i prosty shortcode

FAQ jest jednym z tych elementów sklepu internetowego, które z pozoru wydają się banalne. Pytanie. Odpowiedź. Kliknięcie. Rozwijana treść. Trudno wyobrazić sobie coś prostszego.

Problem pojawia się jednak wtedy, kiedy chcemy korzystać z FAQ nie tylko na jednej przygotowanej wcześniej podstronie, ale w różnych miejscach sklepu OpenCart .

Inne pytania będą potrzebne przy produkcie.

Inne przy dostawie.

Jeszcze inne przy kategorii produktów, płatnościach, zwrotach, usługach dodatkowych czy ofercie B2B.

Do tego sklep może działać w kilku językach, każda harmonijka powinna wyglądać tak samo albo przeciwnie — mieć własny wygląd — a właściciel sklepu powinien móc później zmienić pytanie bez szukania odpowiedniego fragmentu HTML w szablonie.

I właśnie z tego problemu powstał DC FAQ dla OpenCart 3 . 🧩

Nie chciałem budować rozbudowanego systemu wiedzy ani kolejnego page buildera.

Potrzebowałem po prostu mechanizmu, który pozwoli mi:

• tworzyć wiele niezależnych zestawów FAQ,

• zarządzać nimi z panelu OpenCart,

• przygotowywać pytania w wielu językach,

• kontrolować wygląd i sposób działania harmonijki,

• a następnie wkleić gotowe FAQ dokładnie tam, gdzie jest potrzebne.

Rozwiązaniem okazał się prosty shortcode:

{ dc-faq=1 }

I właśnie wokół tej jednej idei zbudowałem cały moduł.

 

Po co FAQ w sklepie internetowym?

FAQ często kojarzy się z klasyczną podstroną „Najczęściej zadawane pytania”.

To oczywiście jedno z zastosowań, ale moim zdaniem zdecydowanie nie jedyne.

W sklepie internetowym pytania i odpowiedzi mogą być częścią samego procesu zakupowego.

Klient ogląda produkt i zastanawia się:

„Czy ten produkt pasuje do mojego modelu?”

„Ile trwa realizacja?”

„Czy mogę wybrać inny kolor?”

„Jak wygląda montaż?”

„Czy produkt wykonywany jest na wymiar?”

„Czy mogę go zwrócić?”

Jeżeli odpowiedzi znajdują się bezpośrednio przy produkcie, klient nie musi szukać ich w regulaminie, osobnej stronie pomocy albo pisać wiadomości.

FAQ może więc pełnić bardzo praktyczną rolę.

Nie traktuję go jako dekoracji.

Dobrze przygotowane pytania potrafią uporządkować dużą ilość informacji bez tworzenia ściany tekstu.

 

FAQ nie musi być jedno

To było dla mnie jedno z najważniejszych założeń podczas tworzenia DC FAQ.

Nie chciałem mieć w panelu jednego globalnego formularza:

Pytanie 1 / odpowiedź 1 / pytanie 2 / odpowiedź 2...

i jednego miejsca, w którym można go wyświetlić.

W realnym sklepie potrzebujemy raczej czegoś takiego:

• FAQ dotyczącego dostawy,

• FAQ dotyczącego zwrotów,

• FAQ dla konkretnej grupy produktów,

• FAQ dotyczącego montażu,

• FAQ B2B,

• FAQ dotyczącego płatności,

• FAQ na stronie informacyjnej,

• osobnego FAQ dla specjalistycznego produktu.

DC FAQ pozwala więc tworzyć dowolną liczbę niezależnych harmonijek .

Każda otrzymuje własne ID.

A każde ID może zostać wykorzystane w shortcode.

Przykładowo:

{ dc-faq=3 }

może oznaczać FAQ dotyczące dostawy, a:

{ dc-faq=7 }

FAQ techniczne konkretnej grupy produktów.

To bardzo prosty mechanizm, ale właśnie ta prostota daje dużą elastyczność.

 

Czym jest DC FAQ?

DC FAQ jest modułem dla OpenCart 3 , służącym do tworzenia wielojęzycznych harmonijek pytań i odpowiedzi oraz osadzania ich w treści sklepu za pomocą shortcode.

Moduł składa się z dwóch głównych części.

Pierwszą jest menedżer FAQ w panelu administracyjnym .

Tworzymy w nim harmonijki, pytania, odpowiedzi oraz konfigurujemy ich wygląd i zachowanie.

Drugą częścią jest parser shortcode działający na frontendzie OpenCart .

Kiedy w treści znajdzie kod:

{ dc-faq=ID }

pobiera odpowiednią harmonijkę z bazy danych i zastępuje shortcode gotowym HTML-em FAQ.

Dzięki temu nie trzeba edytować plików Twig ani ręcznie doklejać HTML każdego accordionu.

 

 

 

Dlaczego napisałem ten moduł?

Powód jest podobny jak przy wielu moich niewielkich rozszerzeniach.

Ten sam problem zaczął się powtarzać.

W jednym sklepie trzeba było dodać kilka pytań pod produktem.

W innym accordion miał pojawić się w kategorii.

W kolejnym powstała osobna sekcja FAQ dotycząca wysyłki.

Technicznie można za każdym razem napisać kilka elementów HTML i trochę JavaScript.

Tylko że później klient chce zmienić pytanie.

Dodać kolejne.

Przenieść trzecie na pierwsze miejsce.

Zmienić kolor.

Przetłumaczyć wszystko na niemiecki.

I prosty accordion zaczyna mieć własne życie.

Pomyślałem więc, że lepiej raz przygotować mechanizm, w którym treść jest zarządzana z panelu, a miejsce wyświetlania określa shortcode .

Nie jest to rewolucyjna koncepcja.

Jest natomiast bardzo praktyczna.

 

Największa zaleta: FAQ można wstawić tam, gdzie jest potrzebne

DC FAQ nie jest przywiązany do jednego konkretnego hooka czy pozycji modułu.

Parser działa na treściach renderowanych przez widoki OpenCart.

W panelu sam podpowiadam najczęstsze zastosowania:

• opis produktu,

• opis kategorii,

• strona informacyjna.

Na tym jednak mechanizm się nie kończy.

Moduł analizuje treści przekazywane do widoków oraz końcowy wygenerowany output i wyszukuje w nich shortcode DC FAQ.

Dzięki temu mechanizm nie jest ograniczony wyłącznie do jednego konkretnego pola.

Jeżeli dana treść przechodzi przez standardowy system widoków OpenCart i zawiera prawidłowy shortcode, moduł może spróbować go przetworzyć.

To dla mnie ważniejsza cecha niż samo rozwijanie odpowiedzi.

 

Shortcode zamiast przebudowy szablonu

Przykład:

{ dc-faq=5 }

Wklejam go w odpowiednim miejscu opisu produktu.

Zapisuję produkt.

Na frontendzie zamiast shortcode pojawia się gotowa harmonijka.

Jeżeli później zmienię odpowiedź w panelu DC FAQ, nie muszę ponownie edytować produktu.

Produkt nadal wskazuje na FAQ numer 5.

Treść pobierana jest z centralnego miejsca.

Można więc traktować pojedynczą harmonijkę trochę jak wielokrotnie używany komponent treści.

 

Shortcode odporny na typowe zachowanie edytorów

Każdy, kto pracował z edytorami WYSIWYG, prawdopodobnie zna sytuację, w której prosty fragment tekstu zostaje automatycznie opakowany w:

<p>

<span>

<code>

albo inne znaczniki.

DC FAQ posiada mechanizm usuwający część takich typowych „dodatków” wokół shortcode.

Parser rozpoznaje również odstępy.

Możemy więc spotkać zapis:

{ dc-faq=1 }

albo:

{dc-faq=1}

i oba odpowiadają tej samej harmonijce.

Nie jest to wielka funkcja, ale ogranicza liczbę drobnych problemów po wklejeniu kodu do edytora OpenCart. 🙂

 

Instalacja DC FAQ w OpenCart 3

Kupić moduł możesz na Opencart Marketplace:

Moduł jest przygotowany jako standardowy pakiet instalacyjny OpenCart:

dc-faq.ocmod.zip

Instalacja wygląda następująco:

1. Pobieramy paczkę modułu.

2. Logujemy się do panelu administracyjnego OpenCart 3.

3. Przechodzimy do Extensions → Installer .

4. Wgrywamy plik dc-faq.ocmod.zip .

5. Następnie przechodzimy do Extensions → Extensions .

6. Z listy typów rozszerzeń wybieramy Modules .

7. Odszukujemy Design Cart FAQ .

8. Klikamy instalację modułu.

9. Po instalacji otwieramy jego konfigurację.

Moduł nie modyfikuje ręcznie plików Core OpenCart.

Podczas właściwej instalacji tworzy własne tabele w bazie danych, dodaje wymagane uprawnienia administratora i rejestruje eventy odpowiedzialne za obsługę shortcode na frontendzie.

 

Co moduł dodaje do bazy danych?

DC FAQ wykorzystuje trzy własne tabele:

• dc_faq – główne harmonijki i ich konfiguracja,

• dc_faq_item – poszczególne pytania,

• dc_faq_item_description – wielojęzyczne pytania i odpowiedzi.

Oczywiście przed nazwami stosowany jest standardowy prefix bazy OpenCart.

Oddzielenie treści tłumaczeń od głównego rekordu pozwala korzystać ze standardowego mechanizmu języków OpenCart.

 

Ważne przy odinstalowaniu

Warto zwrócić uwagę na jedną rzecz.

Odinstalowanie modułu usuwa również jego tabele z bazy danych.

Oznacza to usunięcie zapisanych harmonijek, pytań i odpowiedzi.

Jeżeli moduł był już intensywnie używany, przed pełnym odinstalowaniem warto więc wykonać kopię bazy danych.

 

Główny ekran – menedżer harmonijek FAQ

Po otwarciu DC FAQ nie trafiamy od razu do jednej konfiguracji.

Najpierw widzimy menedżer wszystkich utworzonych harmonijek .

To właśnie tutaj widać podstawową różnicę pomiędzy DC FAQ a prostym modułem z jednym zestawem pytań.

Możemy utworzyć wiele FAQ i każde z nich traktować jako osobny komponent.

Tabela pokazuje:

Kolumna	Znaczenie
ID	Unikalny identyfikator FAQ.
Nazwa administracyjna	Nazwa pomagająca rozpoznać harmonijkę w panelu.
Shortcode	Gotowy kod pozwalający wyświetlić FAQ.
Pozycje	Liczba pytań znajdujących się w harmonijce.
Status	Informacja, czy dana harmonijka jest aktywna.
Akcje	Edycja albo usunięcie FAQ.

Przy shortcode znajduje się również przycisk kopiowania.

Nie trzeba więc ręcznie przepisywać ID.

Klikam Kopiuj , przechodzę do produktu czy strony informacyjnej i wklejam kod.

 

Główny status modułu

Na ekranie listy znajduje się również przełącznik:

Moduł włączony

To status całego mechanizmu DC FAQ.

Kiedy jest wyłączony, parser frontendowy nie zamienia shortcode na harmonijki.

Warto o tym pamiętać przy wyłączaniu modułu na działającym sklepie — sam shortcode nadal może znajdować się w opisach.

 

Tworzenie nowej harmonijki

Kliknięcie Dodaj harmonijkę otwiera formularz podzielony na cztery zakładki:

1. Ogólne

2. Pozycje

3. Wygląd

4. Działanie

Na górze znajduje się również przełącznik języka treści oraz — po pierwszym zapisaniu — gotowy shortcode.

Dzięki temu cała konfiguracja pojedynczego FAQ znajduje się w jednym miejscu.

 

Zakładka „Ogólne”

Pierwsza zakładka zawiera podstawowe dane organizacyjne.

Opcja	Działanie
Nazwa administracyjna	Nazwa widoczna wyłącznie w panelu administratora.
Kolejność	Wartość wykorzystywana do sortowania harmonijek w menedżerze.
Harmonijka aktywna	Włącza lub wyłącza konkretne FAQ.

 

Nazwa administracyjna

Nazwa nie jest wyświetlana klientowi.

Może więc być całkowicie techniczna.

Przykładowo:

FAQ – Dostawa

FAQ – Zwroty

FAQ – Produkt XYZ

FAQ – Montaż

FAQ – wersja niemiecka kampanii

Chodzi przede wszystkim o to, aby po utworzeniu kilkunastu harmonijek nadal wiedzieć, do czego każda z nich służy.

 

Status pojedynczego FAQ

Status harmonijki działa niezależnie od głównego statusu modułu.

Możemy więc pozostawić cały system aktywny, ale czasowo wyłączyć wybrany zestaw pytań.

Nie trzeba go usuwać.

 

Zakładka „Pozycje”

Tutaj znajduje się właściwa zawartość FAQ.

Każde pytanie jest osobną pozycją.

Możemy:

• dodawać nowe pytania,

• usuwać istniejące,

• włączać i wyłączać pojedyncze pozycje,

• zmieniać ich kolejność metodą drag & drop,

• wpisywać osobną treść dla każdego języka.

 

Dodawanie pytania

Każda pozycja zawiera dwa podstawowe pola:

Pole	Zastosowanie
Pytanie	Nagłówek widoczny w zwiniętej harmonijce.
Odpowiedź	Treść pojawiająca się po rozwinięciu.

Nowo dodana pozycja jest domyślnie aktywna.

Jeżeli nie chcemy jej jeszcze publikować, możemy wyłączyć jej status bez usuwania całego FAQ.

 

Drag & drop

Kolejność pytań zmieniamy przeciągając pozycje.

Nie trzeba wpisywać ręcznie numerów sortowania.

Po przesunięciu elementów moduł aktualizuje ich kolejność przed zapisaniem.

To jedna z tych drobnych rzeczy, które przy dziesięciu czy dwudziestu pytaniach robią sporą różnicę.

 

Wielojęzyczne pytania i odpowiedzi

Na górze edytora znajduje się przełącznik aktywnych języków OpenCart.

Po wybraniu języka edytujemy treść właśnie dla niego.

Możemy więc mieć jeden zestaw FAQ o tej samej strukturze:

PL
Jak długo trwa wysyłka?

EN
How long does shipping take?

DE
Wie lange dauert der Versand?

Nie trzeba tworzyć trzech osobnych accordionów tylko dlatego, że sklep działa w trzech językach.

Struktura i wygląd pozostają wspólne, natomiast treść pytań i odpowiedzi może być lokalizowana.

 

Co jeżeli tłumaczenia brakuje?

Frontend najpierw próbuje pobrać treść odpowiadającą aktualnemu językowi sklepu.

Jeżeli zarówno pytanie, jak i odpowiedź dla niego są puste, kod próbuje znaleźć pierwszą dostępną niepustą treść.

Dzięki temu całe FAQ nie znika tylko dlatego, że jedna wersja językowa nie została jeszcze uzupełniona.

Oczywiście przy sklepie produkcyjnym nadal najlepiej uzupełnić wszystkie wersje poprawnie.

 

Zakładka „Wygląd”

To jedna z bardziej rozbudowanych części modułu.

Nie chciałem, aby korzystanie z DC FAQ oznaczało późniejsze dopisywanie CSS dla każdego sklepu.

Dlatego każda harmonijka posiada własną konfigurację wyglądu.

Co istotne, ustawienia zapisane są dla konkretnego FAQ .

Możemy więc mieć kilka accordionów o różnym wyglądzie.

 

Wygląd nagłówka pytania

Opcja	Działanie
Tło nagłówka	Podstawowy kolor tła pytania.
Obramowanie nagłówka	Kolor ramki.
Tło nagłówka hover	Kolor po najechaniu kursorem.
Kolor ikony	Podstawowy kolor ikony rozwijania.
Kolor ikony hover	Kolor ikony po najechaniu.

Domyślna stylistyka jest celowo dość neutralna — jasne tło, delikatne obramowanie i ciemny tekst.

Nie chciałem narzucać charakterystycznych kolorów Design Cart na frontendzie sklepu.

Moduł ma dopasować się do projektu, a nie odwrotnie.

 

Wygląd odpowiedzi

Treść rozwiniętej odpowiedzi posiada osobną konfigurację.

Opcja	Działanie
Tło odpowiedzi	Kolor obszaru z treścią.
Obramowanie odpowiedzi	Kolor obramowania rozwiniętego panelu.

Nagłówek i odpowiedź mogą więc mieć inne kolory.

Pozwala to stworzyć klasyczny accordion, w którym pytanie jest bardziej wyróżnione, a odpowiedź pozostaje neutralna.

 

Zaokrąglenie

Opcja Zaokrąglenie kontroluje promień narożników.

Zakres wynosi od:

0 do 40 px

Przy wartości 0 otrzymamy bardziej techniczny, prostokątny wygląd.

Większa wartość pozwoli dopasować FAQ do nowoczesnych motywów korzystających z mocno zaokrąglonych elementów UI.

 

Odstęp między pozycjami

Opcja Odstęp między pozycjami określa przerwę pomiędzy kolejnymi pytaniami.

Zakres również wynosi:

0–40 px

Możemy więc stworzyć zwartą listę albo wyraźnie oddzielone karty.

 

Trzy style ikon

DC FAQ udostępnia trzy rodzaje ikony rozwijania:

Ikona	Charakter
Strzałka	Klasyczny chevron obracający się po rozwinięciu.
Plus / minus	Zamienia plus na minus przy otwartym pytaniu.
Caret	Prosta trójkątna strzałka.

Ikony są generowane przez sam moduł.

W przypadku chevronu i caret wykorzystywany jest SVG, natomiast plus/minus zbudowany jest z elementów CSS.

Nie trzeba więc dołączać dodatkowego zestawu ikon tylko po to, żeby FAQ działało.

 

Typografia pytania

Pytanie posiada własny zestaw ustawień typograficznych.

Opcja	Zakres / działanie
Kolor tekstu	Dowolny obsługiwany kolor.
Rozmiar czcionki	10–48 px.
Grubość czcionki	300, 400, 500, 600, 700 lub 800.
Wyrównanie	Lewo, środek lub prawo.
Wielkie litery	Automatyczna transformacja tekstu do uppercase.

Domyślnie pytanie ma 16 px i wagę 600.

 

Typografia odpowiedzi

Odpowiedź ma osobny zestaw tych samych parametrów:

• kolor,

• wielkość,

• grubość,

• wyrównanie,

• wielkie litery.

Domyślny tekst odpowiedzi jest trochę mniejszy i lżejszy niż pytanie.

Dzięki rozdzieleniu obu konfiguracji możemy zachować czytelną hierarchię wizualną.

 

Każde FAQ może wyglądać inaczej

To ważna konsekwencja sposobu, w jaki zbudowany jest frontend.

Ustawienia wyglądu są przekazywane do konkretnej instancji harmonijki przez zmienne CSS.

Nie mamy więc jednego globalnego stylu narzuconego wszystkim FAQ w sklepie.

FAQ produktu może mieć np. jasnoszare nagłówki.

FAQ na ciemnej stronie informacyjnej może otrzymać zupełnie inną kolorystykę.

Nie trzeba przy tym tworzyć osobnych klas CSS.

 

Zakładka „Działanie”

Wygląd to jedno.

Accordion musi jeszcze wiedzieć, jak ma się zachowywać .

Temu służy czwarta zakładka.

 

Stan na start

Możemy wybrać jeden z trzech wariantów:

Tryb	Efekt
Wszystkie zwinięte	Po wejściu na stronę żadna odpowiedź nie jest widoczna.
Pierwsza rozwinięta	Pierwsze pytanie jest automatycznie otwarte.
Wszystkie rozwinięte	Wszystkie odpowiedzi są widoczne od razu.

Domyślne ustawienie to:

Pierwsza rozwinięta

To dość klasyczne zachowanie accordionu, ale w zależności od miejsca zastosowania pozostałe warianty mogą być bardziej odpowiednie.

 

Przy otwarciu zwijaj poprzednie

Opcja:

Przy otwarciu zwijaj poprzednie

powoduje, że tylko jedna pozycja może być otwarta jednocześnie.

Kliknięcie kolejnego pytania automatycznie zamknie poprzednie.

Po wyłączeniu tej funkcji użytkownik może otworzyć kilka odpowiedzi jednocześnie.

 

Pozwól zwinąć otwartą pozycję

Drugi przełącznik określa, czy ponowne kliknięcie aktualnie otwartego pytania ma je zamknąć.

Jeżeli funkcja jest aktywna:

kliknięcie otwartego pytania → zamknięcie.

Jeżeli ją wyłączymy, otwartego elementu nie da się zamknąć bez otwarcia innego — zależnie oczywiście również od konfiguracji pozostałych opcji.

 

Czas animacji

Czas otwierania i zamykania harmonijki można regulować.

Zakres wynosi:

150–900 ms

Domyślna wartość to:

420 ms

Krótsza animacja daje bardziej bezpośredni interfejs.

Dłuższa może lepiej pasować do spokojniejszego projektu strony.

Nie przesadzałbym jednak z długością — FAQ ma przede wszystkim pomagać w szybkim dostępie do informacji.

 

Tag HTML pytania

Administrator może określić znacznik HTML używany dla tekstu pytania.

Dostępne są:

• h2

• h3

• h4

• h5

• div

Domyślna wartość to:

h3

Daje to większą kontrolę nad strukturą HTML zależnie od miejsca, w którym umieszczamy FAQ.

Przykładowo FAQ wewnątrz rozbudowanego opisu produktu może wymagać innego poziomu nagłówków niż FAQ będące główną częścią strony informacyjnej.

 

Płynna animacja bez ciężkiego frameworka

Frontend DC FAQ napisany jest w czystym JavaScript.

Nie wymaga jQuery do obsługi samej harmonijki.

Otwieranie wykorzystuje połączenie CSS i niewielkiego skryptu zarządzającego stanami.

Treść nie pojawia się nagle.

Panel płynnie się rozwija, a odpowiedź jednocześnie zmienia przezroczystość i pozycję.

Jeżeli użytkownik systemu ma włączone:

prefers-reduced-motion: reduce

moduł wyłącza animacje.

To drobny element, ale chciałem uwzględnić również osoby, które ze względów dostępności ograniczają ruch interfejsu.

 

Obsługa klawiatury i dostępność

Accordion nie reaguje wyłącznie na mysz.

Nagłówki pytań są prawdziwymi elementami button .

Moduł wykorzystuje między innymi:

aria-expanded

aria-controls

aria-labelledby

oraz role regionów dla odpowiedzi.

Można również poruszać się pomiędzy pytaniami klawiaturą.

Obsługiwane są:

• Arrow Down – następne pytanie,

• Arrow Up – poprzednie pytanie,

• Home – pierwsze pytanie,

• End – ostatnie pytanie.

Nie próbuję przedstawiać przez to modułu jako kompletnego rozwiązania wszystkich zagadnień accessibility.

Chciałem po prostu, żeby podstawowa interakcja nie była uzależniona wyłącznie od kursora myszy. ♿

 

FAQ w treściach ładowanych dynamicznie

Frontend korzysta również z MutationObserver .

Skrypt obserwuje elementy dodawane dynamicznie do dokumentu.

Jeżeli nowe drzewo DOM zawiera .dc-faq , harmonijka zostanie zainicjalizowana.

Może to być przydatne w motywach czy rozszerzeniach, które doładowują część treści już po pierwszym załadowaniu dokumentu.

 

Jak działa renderowanie shortcode?

Od strony technicznej proces jest stosunkowo prosty.

Załóżmy, że w opisie znajduje się:

{ dc-faq=4 }

Moduł:

1. wykrywa shortcode,

2. odczytuje ID 4 ,

3. pobiera harmonijkę z bazy,

4. sprawdza jej status,

5. pobiera aktywne pytania,

6. wybiera treści dla aktualnego języka,

7. generuje HTML accordionu,

8. zastępuje nim shortcode.

Jeżeli FAQ jest nieaktywne albo nie zawiera żadnych możliwych do wyświetlenia pozycji, nie powstaje harmonijka.

 

Centralne zarządzanie zamiast kopiowania HTML

To właśnie tutaj widzę największą praktyczną korzyść modułu.

Wyobraźmy sobie, że pytania o dostawę pojawiają się w kilku miejscach sklepu.

Bez centralnego mechanizmu łatwo skończyć z kilkoma kopiami podobnego HTML.

Potem zmienia się przewoźnik albo termin dostawy.

Trzeba szukać wszystkich miejsc, w których zapisaliśmy starą informację.

Przy DC FAQ wszystkie te miejsca mogą wskazywać na tę samą harmonijkę.

Zmiana wykonywana jest w panelu.

To nie jest funkcja efektowna na zrzucie ekranu.

W codziennej obsłudze sklepu może być jednak jedną z najbardziej użytecznych.

 

Przykład 1 – FAQ na karcie produktu

Załóżmy, że sprzedajemy produkt wymagający montażu.

Tworzymy harmonijkę:

FAQ – montaż produktu

Dodajemy pytania:

„Czy mogę zamontować produkt samodzielnie?”

„Jakich narzędzi potrzebuję?”

„Czy oferujecie montaż?”

„Czy instrukcja znajduje się w zestawie?”

Po zapisaniu otrzymujemy np.:

{ dc-faq=8 }

Wklejamy shortcode pod głównym opisem produktu.

Gotowe.

Jeżeli później instrukcja montażu się zmieni, edytujemy FAQ numer 8.

 

Przykład 2 – FAQ w kategorii

Kategoria może wymagać dodatkowego wyjaśnienia różnic pomiędzy produktami.

Zamiast dodawać bardzo długi opis można część informacji przenieść do harmonijki.

Przykładowe pytania:

„Jaki wariant wybrać?”

„Czym różni się model A od B?”

„Który produkt nadaje się do zastosowania zewnętrznego?”

FAQ może znaleźć się bezpośrednio wewnątrz opisu kategorii.

 

Przykład 3 – dostawa i płatności

Możemy również stworzyć wspólne FAQ dotyczące realizacji zamówień:

„Jakie są dostępne metody dostawy?”

„Czy wysyłacie za granicę?”

„Czy mogę odebrać zamówienie osobiście?”

„Kiedy otrzymam fakturę?”

Ten sam zestaw można następnie wykorzystać w odpowiednim miejscu sklepu bez przepisywania każdej odpowiedzi.

 

Przykład 4 – sklep wielojęzyczny

Tworzymy jedną harmonijkę.

Dla języka polskiego wpisujemy:

„Jak długo trwa dostawa?”

Dla angielskiego:

„How long does delivery take?”

Dla niemieckiego:

„Wie lange dauert die Lieferung?”

Shortcode pozostaje ten sam.

To język aktualnie wybrany w OpenCart decyduje, która treść zostanie wyświetlona.

 

Czego DC FAQ nie robi?

W dokumentacji staram się również zaznaczać rzeczy, których moduł nie robi.

 

Nie przypisuje automatycznie FAQ do produktu

DC FAQ nie posiada w tej wersji osobnego selektora produktów czy kategorii.

Nie wybieramy:

„pokaż FAQ numer 4 przy produktach 10, 14 i 28”.

Miejsce wyświetlania określamy przez shortcode.

To świadoma konstrukcja modułu.

Dzięki temu nie ograniczam go do kilku wcześniej przewidzianych typów stron.

Jeżeli potrzebne jest automatyczne przypisywanie FAQ według zaawansowanych reguł, byłaby to osobna funkcja.

 

Nie jest page builderem

Nie budujemy tutaj całej podstrony.

DC FAQ odpowiada za jeden konkretny komponent:

pytania i odpowiedzi w formie accordionu .

 

Nie generuje danych strukturalnych FAQPage

Wersja 1.0.0 nie generuje JSON-LD typu FAQPage .

Nie chcę przedstawiać samego istnienia FAQ jako magicznej funkcji SEO.

Moduł koncentruje się na treści, zarządzaniu oraz jej prezentacji użytkownikowi.

Jeżeli kiedyś dodam obsługę danych strukturalnych, będzie to osobna, jasno opisana funkcja.

 

Prosty moduł, ale nie jednorazowy snippet

DC FAQ jest stosunkowo małym rozszerzeniem.

To celowe.

Nie potrzebowałem kolejnego wielkiego pakietu posiadającego pięćdziesiąt funkcji, z których wykorzystuję trzy.

Zależało mi jednak, żeby wyjść poziom wyżej niż zwykły fragment HTML z accordionem.

Dlatego pojawiły się:

• wiele niezależnych FAQ,

• centralny menedżer,

• shortcode,

• wielojęzyczność,

• drag & drop,

• niezależny status pytań,

• konfiguracja wyglądu,

• osobna typografia pytań i odpowiedzi,

• trzy ikony,

• regulowana animacja,

• kilka trybów zachowania,

• kontrola tagu HTML,

• obsługa klawiatury,

• podstawowe elementy dostępności,

• obsługa dynamicznie dodawanej treści.

To wciąż FAQ.

Tylko takie, którego nie trzeba pisać od nowa w każdym kolejnym miejscu sklepu.

 

Podsumowanie

DC FAQ powstał z bardzo prostego problemu.

Chciałem móc przygotować harmonijkę pytań w panelu OpenCart i później użyć jej tam, gdzie rzeczywiście jest potrzebna.

Bez edycji Twig.

Bez kopiowania HTML.

Bez powielania tej samej treści.

Bez budowania osobnego modułu za każdym razem, gdy klient mówi:

„Tutaj też przydałoby się kilka pytań”.

Tworzymy harmonijkę.

Dodajemy pytania.

Tłumaczymy je.

Dopasowujemy wygląd.

Ustalamy sposób otwierania.

Kopiujemy:

{ dc-faq=ID }

i wklejamy kod w wybranej treści.

Jeżeli za miesiąc odpowiedź się zmieni, wracamy do jednego miejsca w panelu.

I w zasadzie właśnie po to ten moduł napisałem.

Nie po to, żeby zmienić sposób działania OpenCart.

Nie po to, żeby stworzyć kolejny ogromny system treści.

Po prostu po to, żeby FAQ w OpenCart 3 przestało być kawałkiem HTML przyklejonym na stałe do jednego miejsca i stało się normalnym, zarządzalnym komponentem sklepu. 🙂