Jak wstawić własny HTML na stronie PrestaShop? Darmowy moduł z edytorem i stylowaniem

Chcesz wstawić własny HTML na stronę PrestaShop, ale bez grzebania w kodzie? 🤔 Ten artykuł pokazuje, jak zrobić to wygodnie za pomocą modułu Design Cart pHTML — z edytorem treści i pełną kontrolą nad wyglądem.

Dowiesz się, jak działa moduł, jak zarządzać blokami i jak wyświetlać je dokładnie tam, gdzie chcesz 🎯

 

🧩 Co to za moduł i czy będzie działał u Ciebie?

Design Cart pHTML to moduł o kodzie technicznym dc_phtml, stworzony przez Design Cart i rozwijany w wersji 1.1.0. Działa na PrestaShop 8.x oraz 9.x, zgodnie z deklaracją kompatybilności (od 8.0.0 do aktualnej wersji sklepu).

W panelu znajdziesz go w kategorii funkcji front-office, a technicznie działa jako widget dzięki implementacji WidgetInterface, co pozwala wyświetlać jego zawartość w hookach na stronie sklepu. Jeśli interesuje Cię także budowanie sklepów internetowych lub bardziej zaawansowane projektowanie sklepów PrestaShop, ten moduł jest jednym z elementów, które wykorzystujemy w praktycznych wdrożeniach 🛍️

 

 

🧱 Do czego służy ten moduł?

Moduł pozwala wyświetlać na stronie sklepu własne bloki treści — każdy z tytułem (w formacie HTML h1–h6) oraz treścią, którą możesz wprowadzić jako tekst lub HTML przez edytor WYSIWYG ✍️

Każdy blok ma osobne ustawienia wyglądu (np. tło, typografia, wyrównanie, uppercase), a wszystkie dane są zapisywane w bazie jako oddzielne elementy, a nie jedna wspólna konfiguracja.

 

 

🗄️ Jak moduł przechowuje dane? (czyli co dzieje się w bazie)

Po instalacji moduł tworzy w bazie danych kilka własnych tabel (z prefiksem sklepu, np. ps_), które odpowiadają za przechowywanie bloków i ich przypisań.

• dc_phtml_block – zawiera dane wspólne dla bloku, niezależne od języka (m.in. id sklepu, tag tytułu, kolory, rozmiary czcionek, ustawienia typu przełączniki)
• dc_phtml_block_lang – przechowuje treści wielojęzyczne, czyli:
  • title
  • content (HTML)
    dla każdego języka (id_lang)
• dc_phtml_hook_instance – odpowiada za przypisanie bloków do konkretnych miejsc (hooków) w sklepie:
  • (id_hook, id_shop, instance_position) → id_block
  • instance_position oznacza kolejność wywołania modułu w danym hooku (liczoną dynamicznie w kodzie)

Podczas instalacji moduł tworzy domyślny blok z przykładowym tytułem i treścią we wszystkich językach oraz przypisuje go do hooka displayHome jako pierwszą instancję (jeśli hook istnieje) ⚙️

Przy deinstalacji wszystkie te tabele są usuwane, co oznacza, że dane bloków i ich przypisań zostają trwale skasowane 🗑️

 

 

⚙️ Jak wygląda panel modułu i co możesz w nim ustawić?

Ekran konfiguracji modułu znajdziesz w: Moduły → Design Cart pHTML → Konfiguruj. Panel jest podzielony na trzy główne sekcje: listę bloków, formularz edycji oraz przypisania do hooków.

 

🧾 A) Lista bloków

W tej sekcji widzisz wszystkie utworzone bloki w formie tabeli:

• ID,
• tytuł (z aktualnego języka zaplecza),
• akcje.

Dostępne operacje:

• Dodaj blok – przejście do formularza tworzenia nowego bloku,
• Edytuj – modyfikacja istniejącego bloku,
• Usuń – usunięcie bloku (z potwierdzeniem).

Przy usuwaniu czyszczone są również powiązania w tabeli dc_phtml_hook_instance dla danego id_block.

 

✍️ B) Formularz bloku (dodawanie / edycja)

Formularz składa się z dwóch oddzielnych sekcji (HelperForm – dwa formularze pod sobą):

1. Treści

• Tytuł modułu – pole tekstowe, wielojęzyczne (dla każdego języka sklepu),
• Tag nagłówka – wybór: h1–h6,
• Treść – pole textarea z edytorem WYSIWYG (TinyMCE), wielojęzyczne; obsługuje HTML zgodny z walidacją isCleanHtml.

2. Wygląd

• Kolor / tło modułu – wartość CSS (np. #fff, rgba),
• Tytuł – rozmiar czcionki – np. 32px, 2rem,
• Tytuł – kolor – wartość CSS,
• Tytuł – grubość – zakres 200–900,
• Tytuł – uppercase – przełącznik tak/nie,
• Tytuł – wyrównanie – lewo / środek / prawo,
• Treść – rozmiar czcionki – wartość z jednostką,
• Treść – kolor – wartość CSS,
• Treść – wyśrodkowanie – przełącznik,
• Treść – uppercase – przełącznik,
• Zapisz – zapisuje blok

Opcjonalnie dostępny jest link Powrót do listy.

 

🔗 C) Przypisanie bloków do hooków

Ta sekcja odpowiada za to, gdzie konkretny blok pojawi się na stronie.

• Każde wywołanie modułu na hooku traktowane jest jako osobna instancja (1, 2, 3…),
• Dla każdego hooka wyświetlana jest lista: Instancja 1, Instancja 2, …,
• Przy każdej instancji wybierasz z listy rozwijanej, który blok ma się wyświetlić (lub brak).

Zmiany zapisujesz przyciskiem Zapisz przypisania.

 

 

🖥️ Jak moduł wyświetla treść na stronie sklepu?

Na froncie moduł korzysta z szablonu Smarty: views/templates/hook/dc_phtml.tpl. To właśnie ten plik odpowiada za końcowe wyświetlenie bloku na stronie sklepu.

Renderowany blok ma postać sekcji z tłem ustawianym inline z konfiguracji, wewnątrz kontenera Bootstrap (container / row / col-12). Tytuł wyświetlany jest jako odpowiedni tag h1–h6 ze stylami inline, a treść trafia do elementu div, również ze stylami inline ✨

Zarówno tytuł, jak i treść mogą zawierać HTML, zgodnie z ustawieniami nofilter tam, gdzie przewiduje to szablon. Moduł korzysta z języka aktualnego kontekstu frontu (id_lang klienta), a sam szablon jest cache’owany z identyfikatorem zależnym od bloku: dc_phtml_{id_block}.

 

 

🔌 Do jakich miejsc w sklepie możesz podpiąć moduł?

Podczas instalacji moduł automatycznie rejestruje się w hooku displayHome, dzięki czemu od razu może wyświetlać treść na stronie głównej 🏠

Możesz go jednak przypisać także do innych hooków, korzystając ze standardowego mechanizmu PrestaShop (Pozycje modułów) — pod warunkiem, że dany hook jest dostępny dla modułu.

 

 

⬇️ Jak pobrać i zainstalować moduł?

Moduł Design Cart pHTML możesz pobrać na dwa sposoby:

ze naszej strony internetowej (Design Cart),

1

z repozytorium na GitHubie 💻

Po pobraniu instalacja przebiega standardowo jak w każdym module PrestaShop:

• przejdź do Moduły → Menedżer modułów,
• kliknij „Prześlij moduł”,
• wgraj paczkę ZIP z modułem,
• a następnie kliknij Zainstaluj.

Po instalacji moduł będzie dostępny w panelu i automatycznie podpięty do hooka displayHome 🚀

 

 

⚠️ O czym musisz wiedzieć przy wielu instancjach modułu?

W nowszych wersjach PrestaShop rdzeń systemu ogranicza możliwość przypisania tego samego modułu więcej niż raz do jednego hooka. W praktyce oznacza to, że zazwyczaj możesz mieć tylko jeden wpis modułu na danym hooku.

Efekt jest taki, że w sekcji „Pozycje modułów” często nie da się dodać drugiego wystąpienia Design Cart pHTML w tym samym miejscu (np. dwa razy displayHome). To ograniczenie wynika z działania PrestaShop, a nie z samego modułu.

Moduł nadal pozwala tworzyć wiele bloków treści i przypisywać wybrany blok do jednej instancji na hooku. Logika „instancja 2, 3…” ma zastosowanie głównie tam, gdzie silnik rzeczywiście wywołuje moduł wielokrotnie (np. w środowiskach testowych lub przy modyfikacjach rdzenia).

 

 

🛡️ Jak moduł podchodzi do bezpieczeństwa treści?

Treść HTML w module przechodzi przez walidację typu isCleanHtml w modelu, zgodnie z typowymi zasadami PrestaShop. W praktyce oznacza to, że niektóre elementy, takie jak iframe i podobne osadzenia, mogą wymagać dodatkowych ustawień globalnych po stronie sklepu.

Przy zapisie i usuwaniu bloków moduł korzysta także z tokenów oraz kontekstu sklepu, co zabezpiecza operacje wykonywane w panelu administracyjnym i w linkach akcji 🔒

 

 

🧾 Podsumowanie w jednym zdaniu

Design Cart pHTML to moduł dla PrestaShop 8/9, który pozwala tworzyć wiele bloków treści HTML z pełną kontrolą wyglądu, wielojęzycznością i przypisaniami do hooków — przy czym liczba instancji na jednym hooku zależy od ograniczeń samej platformy, a nie tylko modułu ⚙️