Jak stworzyć atrakcyjną kartę produktu w Prestashop - gotowe narzędzie

Ten artykuł dotyczy modułu Design Cart Utilities (dc_utilities) — darmowego dodatku do PrestaShop 9 z shortcode’ami: zakładki (Tab), harmonijka (Accordion) i siatka benefitów (Featureds).

🚀 Moduł będzie rozwijany — to nie jednorazówka. Kolejne wersje dorzucą nowe shortcode’y i poprawki pod edytory. Na dziś masz trzy komponenty, ale roadmapa jest dłuższa.

💡 Wklejasz shortcode w opis produktu, CMS albo blok HTML motywu. Na froncie dostajesz gotowy element UI — bez page buildera i bez dopłaty za szablon premium.

🧠 Moduł napisałem ponieważ potrzebowałem narzędzia które da mi znacznie większą plastyczność w prezentowaniu treści na karcie produktu. Design Cart Utilities to game changer który pozwala umieścić w opisie produktu więcej informacji zapakowanych w świetne rozwiązania UI/UX które zachęcają do interakcji.

Wyobraź sobie kartę produktową gdzie dodajesz opis, następnie najważniejsze zalety produktu układasz w blokach featureds a pod nimi dajesz rozwijaną harmonikę z najczęściej zadawanymi pytaniami. 

Może jeszcze między jeszcze miedzy featureds a FAQ jakąś galerię? Też taką mamy 😎: Galeria shortcode dla Prestashop. 

Tak są zbudowane karty produktowe sklepów PRO - czyli te które mają ogromne budżety na rozwój. 

Co jeśli podoba Ci się to rozwiązanie ale masz inną platformę e-commerce? Nie przejmuj się. Tworzymy sklepy internetowe dla wszystkich platform e-commerce. Napisz do nas. 

A jeśli jesteś prawdziwym mugolem technicznym i potrzebujesz pomocy w wdrożeniu modułu na swój Prestashop koniecznie odwiedź nasza ofertę tworzenia sklepów internetowych w Prestashop

 

 

🎯 Do czego służy Design Cart Utilities i jakie problemy rozwiązuje

W PrestaShop opis produktu to często jeden długi blok tekstu. Klient scrolluje, szuka specyfikacji, FAQ, dostawy — i rezygnuje. Na darmowym motywie (np. Hummingbird) robi się jeszcze gorzej: brak struktury, brak punktów zaczepienia, wszystko wygląda płasko.

Design Cart Utilities daje trzy rzeczy, które rozwiązują ten problem bez ciężkich page builderów:

• 📑 Tab (zakładki) — Opis, Specyfikacja, Dostawa, Montaż w osobnych panelach. Klik zamiast scrolla.
• 📂 Accordion (harmonijka) — FAQ i długie listy pytań w zwijanych sekcjach. Strona nie puchnie w dół.
• ⭐ Featureds (boxy benefitów) — siatka z ikonami, nagłówkami, opisem i przyciskiem. Na darmowym szablonie to zwykle największa różnica wizualna — z „bloga” robi się kartę produktu.

🏪 Gdzie to działa? Shortcode’y renderują się w:

• opisie produktu i krótkim opisie,
• opisach kategorii,
• stronach CMS i kategoriach CMS,
• blokach „Custom text” / HTML w motywie,
• zakładce „Szczegóły produktu” i innych polach WYSIWYG obsługiwanych przez powiązane moduły.

Moduł podpina się pod hooki filtrujące treść oraz actionOutputHTMLBefore, dzięki czemu skanuje finalny HTML strony. To ważne: shortcode zadziała nawet wtedy, gdy treść pochodzi z innego modułu, a nie bezpośrednio z pola opisu w bazie.

 

✨ Co zmienia na karcie produktu

Sklep na darmowym motywie, dobre zdjęcia, OK tekst — a karta i tak wygląda jak wklejony dokument Word pod galerią. Dodajesz Featureds z ikonami (dostawa, gwarancja, projekt, SEO) i Accordion z FAQ — nagle jest rytm, porządek i czytelność. Nie dlatego, że treść się zmieniła. Dlatego, że dostała formę.

🎨 Nie trzeba znać CSS ani JS. Kolory, zaokrąglenia i typografię ustawiasz w panelu modułu. Na froncie ładuję jeden CSS i jeden JS — tylko na stronach, gdzie shortcode faktycznie występuje.

Zobacz wideo jak banalna jest instalacja, konfiguracja i używanie shortcode z Design Cart Utilities

 

📸 Konkretny układ: potykacz reklamowy B2B

Bez modułu: akapit marketingowy, tabela parametrów wklejona na siłę, pięć pytań FAQ jeden pod drugim. Klient gubi się po drugim akapicie.

Z modułem układ wygląda tak:

1. Na górze — Featureds cols="4": projekt, responsywność, płatności, SEO. Cztery powody do zakupu bez czytania akapitów.
2. Poniżej — Tab: Opis, Specyfikacja, Dostawa. Każda zakładka = tylko to, co trzeba.
3. Na dole — Accordion z FAQ. Pytania zwinięte, odpowiedzi po kliknięciu.

Ta sama treść, inny układ. Na darmowym szablonie to często różnica między „tanio wygląda” a „wygląda profesjonalnie”.

🆓 Moduł jest darmowy. Nie ma ukrytych limitów typu „max 3 zakładki”. Nie wymaga subskrypcji. Instalujesz, konfigurujesz, używasz.

 

Przykłady użycia

 

 

 

 

 

📦 Wymagania i instalacja krok po kroku

 

Gdzie to cudo pobrać?

No jak gdzie... u nas:

1

albo na Github naszym:

 

Wymagania

• PrestaShop 9.0.0 lub nowszy (moduł deklaruje zgodność z aktualną wersją PS).
• PHP zgodny z wymaganiami Twojej instalacji PrestaShop.
• Uprawnienia do instalacji modułów w panelu administracyjnym.

 

🔧 Instalacja — metoda ZIP (zalecana)

1. Pobierz paczkę modułu dc_utilities (folder modułu musi zawierać plik dc_utilities.php w katalogu głównym).
2. W panelu admina przejdź do: Moduły → Menedżer modułów → Załaduj moduł.
3. Wybierz plik ZIP i zatwierdź upload.
4. Po instalacji znajdź moduł Design Cart Utilities na liście i kliknij Instaluj, jeśli nie zainstalował się automatycznie.
5. Wejdź w Konfiguruj — zobaczysz cztery kafelki: Tab, Accordion, Featureds, Dokumentacja.

 

🔧 Instalacja — metoda FTP / kopiowanie plików

1. Skopiuj cały folder dc_utilities do katalogu /modules/ Twojej instalacji PrestaShop.
2. Upewnij się, że struktura to: modules/dc_utilities/dc_utilities.php (nie zagnieżdżaj podwójnie folderu).
3. W Menedżerze modułów kliknij Odśwież listę (jeśli moduł nie pojawił się od razu).
4. Zainstaluj i skonfiguruj jak wyżej.

 

✅ Po instalacji — checklist

• Moduł jest włączony.
• Wyczyść cache PrestaShop: Zaawansowane parametry → Wydajność → Wyczyść cache.
• Jeśli używasz CCC (kompresja CSS/JS motywu), wyczyść też cache motywu — inaczej style mogą chwilę wyglądać „po staremu”.
• Wklej testowy shortcode w opis produktu i sprawdź front.

 

⚠️ Wskazówka TinyMCE: shortcode’y wklejaj w trybie HTML / kod źródłowy. Unikaj formatowania „Kod” w edytorze — TinyMCE owija wtedy treść w <code> i psuje layout. Moduł stara się to czyścić automatycznie, ale lepiej nie tworzyć problemu u źródła. W pliku przyklady.html przygotowałem wzorce z każdym tagiem w osobnym <p>, co pomaga zachować czytelność w edytorze.

 

🔄 Aktualizacja modułu

1. Zrób kopię zapasową sklepu (baza + pliki).
2. Nadpisz folder modules/dc_utilities nową wersją przez FTP lub zainstaluj ZIP ponownie (PrestaShop zaktualizuje pliki).
3. W Menedżerze modułów upewnij się, że moduł jest włączony — przy aktualizacji hooki rejestrują się ponownie.
4. Wyczyść cache sklepu i CCC motywu.

Ustawienia zapisane w bazie (kolory, typografia) pozostają po aktualizacji — nie musisz konfigurować od zera.

 

🗑️ Deinstalacja

Odinstalowanie modułu usuwa jego konfigurację z bazy (kolory, typografia, checkboxy). Shortcode’y w opisach produktów pozostaną jako surowy tekst — nie znikną automatycznie. Przed deinstalacją rozważ usunięcie shortcode’ów z treści, jeśli nie planujesz wracać do modułu.

 

🖥️ Panel konfiguracji — przegląd czterech zakładek

Po wejściu w konfigurację modułu widzisz cztery kafelki nawigacyjne:

Kafelek	Co konfigurujesz
Tab	Wygląd zakładek: kolory menu, tła paneli, obramowania, zaokrąglenia, typografia etykiet menu i treści paneli.
Accordion	Wygląd harmonijki: kolory nagłówków i treści, obramowania, radius, zachowanie (single open, first open), typografia.
Featureds	Wygląd boxów benefitów: tło, obramowanie, radius, domyślna liczba kolumn, typografia nagłówka i opisu.
Dokumentacja	Skrócona dokumentacja shortcode’ów wbudowana w panel — struktura tagów, atrybuty, przykłady.

Każda zakładka ustawień (Tab, Accordion, Featureds) ma przycisk „Zapisz ustawienia” na dole formularza. Ustawienia zapisują się niezależnie per sekcja — możesz najpierw dopracować Accordion, potem Featureds, bez ryzyka nadpisania innych sekcji.

 

📑 Zakładka „Tab” — opis każdego ustawienia

Ta sekcja steruje globalnym wyglądem wszystkich zakładek { dc-tab } w sklepie. Zmiana tutaj wpływa na każdą instancję shortcode’a Tab na froncie.

 

Kolory i kształt

Pole	Typ	Opis
Tło menu (tab_menu_bg)	Color picker	Kolor tła nieaktywnych przycisków zakładek w pasku nawigacji. Domyślnie jasnoszary (#f3f4f6).
Tło aktywnego menu (tab_menu_active_bg)	Color picker	Kolor tła aktualnie wybranej zakładki. Domyślnie biały — tworzy efekt „przyklejonej” aktywnej zakładki do panelu treści.
Border menu (tab_menu_border)	Color picker	Kolor obramowania przycisków zakładek i linii pod paskiem menu.
Tło body (tab_body_bg)	Color picker	Tło obszaru z treścią aktywnego panelu (pod menu zakładek).
Border body (tab_body_border)	Color picker	Kolor obramowania panelu z treścią.
Border radius (px) (tab_border_radius)	Number (0–40)	Zaokrąglenie rogów zakładek i panelu. Wartość 12 px daje nowoczesny, miękki wygląd; 0 px — ostre krawędzie.

 

Typography menu

Dotyczy tekstu na przyciskach zakładek (dc-tab-menu).

Pole	Typ	Opis
Wielkość czcionki (px)	Number (10–72)	Rozmiar tekstu etykiety zakładki. Domyślnie 15 px.
Grubość czcionki	Number (100–900, krok 100)	Grubość fontu. 600 = półpogrubiony (domyślnie dla menu). 400 = normalny, 700 = bold.
Kolor	Color picker	Kolor tekstu etykiety zakładki.
Wyrównanie	Select: lewo / środek / prawo	Wyrównanie tekstu wewnątrz przycisku zakładki.
Uppercase	Checkbox	Zaznaczone = tekst menu zamieniany na wielkie litery (text-transform: uppercase). Przydatne w motywach „premium”.

 

Typography body

Dotyczy treści wewnątrz paneli (dc-tab-body) — akapitów, list, tabel wstawionych w shortcode.

Pole	Typ	Opis
Wielkość czcionki (px)	Number (10–72)	Rozmiar tekstu w panelu. Domyślnie 15 px.
Grubość czcionki	Number (100–900)	Domyślnie 400 (normalny) — treść body nie jest pogrubiona, żeby nie konkurowała z nagłówkami motywu.
Kolor	Color picker	Kolor tekstu w panelu. Domyślnie #374151 (ciemnoszary, czytelny na białym tle).
Wyrównanie	Select	Domyślne wyrównanie tekstu w panelu.
Uppercase	Checkbox	Wymusza wielkie litery w treści panelu — rzadko używane, ale dostępne dla spójności brandingu.

 

 

📂 Zakładka „Accordion” — opis każdego ustawienia

Sekcja Accordion kontroluje wygląd i zachowanie wszystkich harmonijek { dc-accordion }.

 

Kolory i kształt

Pole	Typ	Opis
Tło header (acc_header_bg)	Color picker	Tło klikalnego nagłówka każdej sekcji harmonijki. Domyślnie bardzo jasny szary (#f8fafc).
Border header (acc_header_border)	Color picker	Obramowanie nagłówka — widoczne jako ramka wokół przycisku sekcji.
Tło body (acc_body_bg)	Color picker	Tło rozwiniętej treści pod nagłówkiem.
Border body (acc_body_border)	Color picker	Obramowanie panelu z treścią (dolna część sekcji po rozwinięciu).
Border radius (px) (acc_border_radius)	Number (0–40)	Zaokrąglenie nagłówków i dolnych rogów panelu treści. Domyślnie 12 px.

 

Checkboxy zachowania

Checkbox	Opis
Rozwinięcie jednej harmonijki zwija pozostałe (acc_single_open)	Gdy zaznaczone (domyślnie TAK): otwarcie jednej sekcji automatycznie zamyka inne. Daje efekt klasycznego accordionu FAQ — na stronie widać tylko jedną otwartą odpowiedź naraz. Odznaczone: sekcje mogą być otwarte równolegle.
Pierwsza harmonijka domyślnie rozwinięta (acc_first_open)	Gdy zaznaczone: pierwsza sekcja jest otwarta po załadowaniu strony. Gdy odznaczone (domyślnie): wszystkie sekcje startują zwinięte. Przydatne, gdy chcesz od razu pokazać najważniejszą odpowiedź.

 

Typography header

Styl tekstu w nagłówku sekcji (dc-accordion-header). Możesz też ustawić poziom nagłówka HTML per shortcode atrybutem h="1" do h="6".

Pole	Domyślnie	Opis
Wielkość czcionki	16 px	Rozmiar tytułu sekcji.
Grubość czcionki	600	Półpogrubiony nagłówek — wyróżnia się na tle body.
Kolor	#111827	Ciemny, czytelny kolor tekstu.
Wyrównanie	Do lewej	Wyrównanie tytułu w pasku nagłówka.
Uppercase	Wyłączone	Opcjonalne kapitaliki w tytułach sekcji.

 

Typography body

Styl treści w rozwiniętym panelu (dc-accordion-body).

Pole	Domyślnie	Opis
Wielkość czcionki	15 px	Tekst odpowiedzi / opisu.
Grubość czcionki	400	Normalna waga — body nie jest pogrubione.
Kolor	#4b5563	Średni szary, komfortowy do czytania dłuższych akapitów.
Wyrównanie	Do lewej	Wyrównanie treści w panelu.
Uppercase	Wyłączone	Rzadko stosowane w treści FAQ.

 

 

⭐ Zakładka „Featureds” — opis każdego ustawienia

Featureds to siatka boxów z ikonami — pod zalety produktu, korzyści, etapy zakupu, usługi dodatkowe.

 

Kolory i układ

Pole	Typ	Opis
Tło box (feat_box_bg)	Color picker	Kolor tła pojedynczego boxa benefitu. Domyślnie biały.
Border box (feat_box_border)	Color picker	Kolor obramowania boxa. Delikatny szary (#e5e7eb) daje subtelną separację bez agresywnej ramki.
Border radius (px) (feat_box_border_radius)	Number (0–40)	Zaokrąglenie rogów boxa. Domyślnie 8 px.
Domyślna liczba kolumn (feat_columns)	Number (1–6)	Ile kolumn na desktopie, gdy shortcode { dc-featureds } nie ma atrybutu cols. Domyślnie 4. Na tabletach moduł automatycznie przechodzi na 2 kolumny, na mobile na 1. Możesz nadpisać per shortcode: cols="3".

 

Typography header

Styl nagłówków w boxach (dc-featured-header). Tag HTML (h1–h6) ustawiasz w shortcode atrybutem h.

Pole	Domyślnie	Opis
Wielkość czcionki	18 px	Wyraźny tytuł benefitu.
Grubość czcionki	700	Pogrubiony nagłówek — buduje hierarchię nad body.
Kolor	#111827	Ciemny, kontrastowy.
Wyrównanie	Do lewej	Domyślne wyrównanie tytułu; nadpisujesz per box atrybutem align w shortcode.
Uppercase	Wyłączone	Kapitaliki w tytułach benefitów.

 

Typography body

Styl opisu w boxie (dc-featured-body).

Pole	Domyślnie	Opis
Wielkość czcionki	15 px	Krótki opis benefitu.
Grubość czcionki	400	Normalna waga — czytelny opis bez „krzyku” typograficznego.
Kolor	#4b5563	Szary opis pod mocnym nagłówkiem.
Wyrównanie	Do lewej	Nadpisywalne per shortcode.
Uppercase	Wyłączone	—

 

🖼️ Atrybuty ikony w shortcode (nie w panelu — per box)

Wyrównanie i rozmiar ikony ustawiasz bezpośrednio w tagu ikony:

{ dc-featured icon="top" width="80" align="center" src="https://twoja-domena.pl/sciezka/ikona.webp" }
{ /dc-featured }

• icon="left|top|right" — pozycja ikony względem treści.
• width="80" — szerokość ikony w pikselach.
• align="left|center|right" — wyrównanie ikony wewnątrz jej kontenera (tylko na tagu ikony).
• src="URL" — adres obrazka (WebP, PNG, SVG przez img).

 

 

📖 Zakładka „Dokumentacja” w panelu modułu

Czwarty kafelek to wbudowana dokumentacja techniczna shortcode’ów. Znajdziesz tam:

• 📑 pełną strukturę Tab z przykładem i zasadami kolejności menu/body,
• 📂 strukturę Accordion z opisem atrybutu h na nagłówku,
• ⭐ strukturę Featureds z tabelami atrybutów: cols, icon, src, width, align, href,
• 💡 wskazówkę o TinyMCE i hooku actionOutputHTMLBefore.

To szybka ściąga podczas pracy w panelu. Pełne przykłady gotowe do wklejenia znajdziesz w pliku przyklady.html w tym samym folderze co ten artykuł.

 

🧩 Shortcode’y — skrót referencyjny

 

Tab

{ dc-tab }
{ dc-tab-menu }Nazwa zakładki{ /dc-tab-menu }
{ dc-tab-body }Treść HTML{ /dc-tab-body }
{ /dc-tab }

 

Accordion

{ dc-accordion }
{ dc-accordion-header h="3" }Pytanie?{ /dc-accordion-header }
{ dc-accordion-body }Odpowiedź.{ /dc-accordion-body }
{ /dc-accordion }

 

Featureds

{ dc-featureds cols="4" }
{ dc-featured }
{ dc-featured icon="top" width="64" align="center" src="/img/ikona.webp" }{ /dc-featured }
{ dc-featured-header h="3" align="center" }Tytuł{ /dc-featured-header }
{ dc-featured-body align="center" }Opis.{ /dc-featured-body }
{ dc-featured-btn href="/link" align="center" }Więcej{ /dc-featured-btn }
{ /dc-featured }
{ /dc-featureds }

🔒 Moduł celowo ignoruje shortcode’y innych modułów (np. {dcgallery}) — parsuje wyłącznie tagi z prefiksem dc-tab, dc-accordion, dc-featureds, dc-featured.

 

💡 Dobre praktyki przy pisaniu shortcode’ów

• 📝 Pisz shortcode’y w osobnych liniach — czytelniej w edytorze i łatwiej poprawiać błędy.
• 🔗 W dc-featured-btn podawaj pełne ścieżki lub URL względne od roota sklepu, np. /kontakt.
• 🖼️ Ikony najlepiej w formacie WebP — mały rozmiar, ostra jakość na retina.
• 📐 width ikony ustawiam per box (np. 48, 64, 80 px) — nie globalnie w panelu, bo różne ikony mogą wymagać różnej skali.
• 🎯 align="center" na ikonie ustawiasz wyłącznie w tagu { dc-featured icon="..." align="center" } — to osobna opcja od wyrównania nagłówka i body.
• 🧩 Możesz łączyć komponenty: Featureds nad Tabem, Tab nad Accordionem — parser obsługuje zagnieżdżanie w treści, o ile nie wkładasz Tab wewnątrz pojedynczego boxa Featured bez potrzeby.

 

🛠️ Rozwiązywanie problemów

Problem	Co sprawdzić
Shortcode widać jako surowy tekst na froncie	Czy moduł jest włączony? Czy w treści są poprawne tagi otwierające/zamykające? Czy nie ma literówek w nazwie tagu?
Style wyglądają „staro” lub źle	Wyczyść cache PrestaShop i CCC motywu (Zaawansowane → Wydajność). Odśwież stronę Ctrl+F5.
Rozmiar ikony się nie zmienia	Czy w shortcode jest width="..."? Po zmianie shortcode zapisz produkt ponownie. Wyczyść cache.
Ikona nie centruje się	align="center" musi być w tagu ikony ({ dc-featured icon="top" align="center" ... }), nie tylko w headerze.
Cała strona ma monospace / dziwny font	TinyMCE owinął shortcode w <code>. Wklej w trybie HTML lub pozwól modułowi wyczyścić — zaktualizuj do najnowszej wersji.
Shortcode w „Szczegółach produktu” nie działa	Moduł używa actionOutputHTMLBefore — upewnij się, że masz aktualną wersję i włączone hooki po aktualizacji.

 

 

⚡ Lekkość, wydajność i bezpieczeństwo

Design Cart Utilities nie jest page builderem. Nie ładuję dziesiątek bibliotek ani frameworków UI. Na stronach z shortcode’ami dołączam:

• jeden plik CSS (front.css),
• jeden plik JS (front.js) — obsługa zakładek i harmonijek,
• zero zewnętrznych CDN.

Style używają !important tam, gdzie darmowe motywy agresywnie nadpisują typografię (np. .rich-text h2). Dzięki temu komponenty wyglądają spójnie niezależnie od motywu.

Parser ma warstwę czyszczenia artefaktów TinyMCE (<code>, <pre>, <p>), żeby edytor nie psuł shortcode’ów przy zapisie. W razie błędu parsowania moduł zwraca oryginalną treść — nie wywala całej strony.

 

🔮 Rozwój modułu — co dalej

Plan na kolejne wersje:

• 🆕 kolejne komponenty shortcode (slidery treści, callouty, porównania, tabele specyfikacji),
• 🎨 gotowe presety stylów pod popularne motywy,
• ✏️ ulepszenia pod edytory (szybkie wstawianie shortcode z paska narzędzi),
• 🌐 rozszerzoną dokumentację i przykłady branżowe.

Jeśli korzystasz z modułu — aktualizuj. Nowe wersje nie powinny psuć istniejących shortcode’ów.

 

🏁 Podsumowanie

Design Cart Utilities to darmowy, lekki moduł do PrestaShop 9. Tab porządkuje długie opisy, Accordion trzyma FAQ w ryzach, Featureds daje siatkę benefitów, która na darmowym motywie wygląda jak element płatnego szablonu.

📥 Zainstaluj, ustaw kolory w trzech zakładkach konfiguracji, wklej shortcode’y z przyklady.html i sprawdź na karcie produktu.