Dla kogo jest ten moduł?
DC Product Pro jest modułem do budowania sekcji produktowych typu „featured products”, „nowości”, „promocje” lub „bestsellery” z rozbudowaną personalizacją wyglądu. Pozwala uruchomić moduł jako karuzelę lub grid, sterować etykietami sprzedażowymi i dodać pełny QuickView (modal produktu z opcjami i dodaniem do koszyka).
DC Product Pro jest modułem do budowania sekcji produktowych typu „featured products”, „nowości”, „promocje” lub „bestsellery” z rozbudowaną personalizacją wyglądu. Pozwala uruchomić moduł jako karuzelę lub grid, sterować etykietami sprzedażowymi i dodać pełny QuickView (modal produktu z opcjami i dodaniem do koszyka).
1) Co robi moduł na sklepie (frontend)
- Wyświetla blok produktów z intro (nagłówek + opis HTML), tłem, szerokością kontenera i spacingiem.
- Pobiera produkty z 4 źródeł: Najnowsze, Promocje, Bestsellery, Wybrane (featured).
- Może ograniczyć listing do jednej kategorii lub pokazać wszystkie kategorie.
- Obsługuje etykiety: Nowy, Bestseller, Promocja (procent lub tekst z makrem
{pct}). - Renderuje kartę produktu z pełną kontrolą widoczności i stylu elementów: nazwa, opis, ceny, stara cena, CTA koszyk/lista/porównanie, obraz.
- Uruchamia QuickView przez AJAX i ładuje modal z obrazem, cenami, opcjami produktu, ilością, przyciskami akcji i linkiem do pełnej karty produktu.
Zobacz wideo prezentujące zaawansowane możliwości customizacji modułu:
2) Gdzie konfiguruje się moduł
Panel administracyjny OpenCart: Rozszerzenia → Moduły → DC Product Pro.
W konfiguracji są 2 poziomy:
- Zakładki główne: Ogólne, Intro, Karuzela, Grid, Produkty, Etykiety, QuickView.
- Podzakładki/akordeony: w sekcjach „Produkty” i „QuickView”.
3) Strony i zakładki konfiguracyjne – pełna lista
3.1 Zakładka: Ogólne
| Opcja | Co zmienia użytkownik |
|---|---|
| Nazwa modułu | Nazwa instancji modułu w panelu (wymagane 3–64 znaki). |
| Tryb wyświetlania | Wybór układu sekcji: Karuzela lub Grid. |
| Status | Włącz/wyłącz moduł. |
| Źródło produktów | Najnowsze, Promocje, Bestsellery, Wybrane (featured). |
| Produkty (pole autocomplete) | Lista ręcznie wskazanych produktów – aktywna dla źródła „Wybrane”. |
| Ogranicz do kategorii | Filtr kategorii (w tym „Wszystkie kategorie”). |
| Kolor tła | Tło całego modułu. |
| Szerokość kontenera | Szerokość sekcji i jednostka (px lub %). |
| Zaokrąglenie przycisków | Promień obramowania przycisków (poza ikonami-kołami). |
| Padding góra / dół | Odstęp wewnętrzny modułu od góry i dołu. |
3.2 Zakładka: Intro
Konfiguracja per język + styl typografii.
| Obszar | Opcje |
|---|---|
| Treści per język | Tytuł intro, tag nagłówka (h1-h6), opis HTML. |
| Wygląd tytułu | Rozmiar, kolor, grubość fontu, wyrównanie (left/center/right), uppercase. |
| Wygląd opisu | Rozmiar, kolor, grubość fontu, wyrównanie, uppercase. |
3.3 Zakładka: Karuzela
| Opcja | Działanie |
|---|---|
| Ile produktów pobrać z bazy | Limit rekordów do pobrania z SQL. |
| Widoczne jednocześnie (desktop/tablet/mobile) | Liczba kafli na breakpoincie. |
| Prędkość animacji | slideSpeed karuzeli (ms). |
| Pauza autoplay | Interwał auto-przewijania (ms). |
| Loop | Zapętlenie karuzeli. |
| Autoplay | Automatyczny start przewijania. |
| Nawigacja prev/next | Pokazanie własnych strzałek. |
| Style nawigacji | Kolory tła/hover, kolory ikon/hover, średnica przycisku, rozmiar ikony. |
3.4 Zakładka: Grid
| Opcja | Działanie |
|---|---|
| Kolumny desktop/tablet/mobile | Liczba produktów w rzędzie dla każdego breakpointu. |
3.5 Zakładka: Produkty (akordeon konfiguracji karty)
Ta sekcja kontroluje wygląd kart w listingu. Zawiera ustawienia globalne + 10 podzakładek (akordeon):
- Nazwa produktu
- Opis
- Cena regularna
- Cena promocyjna
- Stara cena
- Przycisk do koszyka
- Lista życzeń
- Porównanie
- Zdjęcie produktu
- Przycisk „Zobacz produkt” (technicznie mapowany na ustawienia
qv_link_*)
Globalne opcje sekcji „Produkty”
| Opcja | Działanie |
|---|---|
| Widoczność interfejsu akcji | Akcje zawsze widoczne lub dopiero po hover. |
| Wyrównanie cen (globalne) | Left / center / right dla cen na kartach. |
| Wyrównanie przycisków (globalne) | Wyrównanie grupy przycisków przy układzie pod nazwą/pod ceną. |
Wspólny schemat opcji w podzakładkach „Nazwa/Opis/Ceny”
- Pokaż element (on/off).
- Typografia: rozmiar, kolor, grubość, uppercase.
- Wyrównanie (dla nazwy i części elementów cenowych).
- Tag nagłówka dla nazwy (
h1-h6). - Przekreślenie dla starej ceny.
Przyciski akcji na karcie (Koszyk / Lista życzeń / Porównanie)
Dla każdej z trzech podzakładek użytkownik może zmienić:
- Widoczność przycisku.
- Pozycję przycisku: na obrazie (prawa strona), na obrazie (prawy górny róg), pod nazwą, pod ceną.
- Tryb „tylko ikona” lub ikona + tekst.
- Rozmiar fontu, grubość, uppercase.
- Pełną kolorystykę: tekst, tekst hover, tło, tło hover, border, border hover.
- Tekst przycisku per język (multilang).
Zdjęcie produktu
| Opcja | Działanie |
|---|---|
| Pokaż obraz | Włącza/wyłącza miniaturę produktu. |
| Szerokość/Wysokość obrazu | Rozmiary resize miniatury (px). |
Podzakładka „Przycisk Zobacz produkt”
W „Produkty” ta podzakładka wykorzystuje konfigurację qv_link_*. Oznacza to, że jej ustawienia są współdzielone z przyciskiem linku w QuickView (spójny styl i etykiety).
3.6 Zakładka: Etykiety
Trzy niezależne etykiety: Nowy, Bestseller, Promocja.
| Etykieta | Opcje |
|---|---|
| Nowy | Pokaż, liczba dni „nowości”, kolory, rozmiar, grubość, tekst per język. |
| Bestseller | Pokaż, minimalna liczba sprzedanych sztuk, kolory, rozmiar, grubość, tekst per język. |
| Promocja | Pokaż, styl (sam procent lub tekst z {pct}), kolory, rozmiar, grubość, tekst per język. |
3.7 Zakładka: QuickView
Składa się z 2 części: „Ustawienia QuickView” i akordeon elementów modala.
Ustawienia QuickView (główne)
| Opcja | Działanie |
|---|---|
| Włącz szybki podgląd | Globalny przełącznik funkcji QuickView. |
| Tytuł okna QuickView | Tekst per język. |
| Pozycja przycisku QuickView | Pod ceną lub na obrazie (środek). |
| Widoczność przycisku QuickView | Zawsze lub tylko po hover. |
| QuickView: tylko ikona | Tryb ikona-only dla triggera QuickView. |
| Styl przycisku QuickView | Rozmiar, kolory, tło, border, hover, grubość, uppercase, tekst per język. |
| Link „View full product” | Tekst per język, rozmiar, kolory, hover, grubość, uppercase. |
Akordeon elementów QuickView
Podzakładki: Nazwa, Opis, Cena regularna, Cena promocyjna, Stara cena, Koszyk, Lista życzeń, Porównanie, Zdjęcie.
Każdy z tych bloków ma analogiczne opcje jak w sekcji „Produkty” (ale niezależne, prefiks qv_):
- Widoczność elementu.
- Typografia i align.
- Dla przycisków: icon-only, pełna kolorystyka normal/hover, font-weight, uppercase, teksty per język.
- Dla starej ceny: opcja przekreślenia.
- Dla zdjęcia: width/height.
4) Co użytkownik realnie może zmienić (zakres personalizacji)
- Źródła danych: typ listingu, limit produktów, filtrowanie kategorią, ręczny wybór produktów featured.
- Layout: karuzela/grid, kolumny responsywne, parametry animacji i nawigacji.
- Design: kolory praktycznie wszystkich elementów, spacing, border-radius, typografia i alignment.
- Widoczność UI: każdy element karty i modala może być pokazany/ukryty.
- UX przycisków: pozycja, wariant ikona/tekst, zachowanie hover.
- Wielojęzyczność: własne treści CTA, tytułów, etykiet, intro i linków dla każdego języka sklepu.
5) Logika biznesowa i ważne uwagi wdrożeniowe
- Dla źródła „Featured” pobierane są konkretne produkty wskazane w panelu; dla innych źródeł działają zapytania SQL w modelu.
- Etykieta „Nowy” zależy od daty dodania produktu i parametru dni.
- Etykieta „Bestseller” zależy od sumy sprzedaży ze zrealizowanych zamówień.
- Etykieta „Promocja” pokazuje się tylko, gdy istnieje realna obniżka (special < price).
- QuickView ładuje się AJAX-em i potrafi obsłużyć opcje produktu (select/radio) oraz dodanie do koszyka z ilością.
- W trybie karuzeli moduł dołącza OwlCarousel z CDN.
6) Domyślna konfiguracja po instalacji (skrót)
- Tryb: karuzela, status: wyłączony.
- Limit produktów: 12.
- Domyślne etykiety i QuickView: włączone.
- Domyślnie aktywne: nazwa/desc/ceny/zdjęcia/przyciski.
- Domyślne rozmiary obrazów: 280x280.
7) Podsumowanie produktu
DC Product Pro to moduł dla sklepów, które potrzebują jednocześnie atrakcyjnego wyglądu, wysokiej kontroli UX i szybkiego zarządzania treścią bez ręcznego kodowania. Dzięki podziałowi na zakładki i akordeony administrator może precyzyjnie dostosować każdą część karty produktowej oraz QuickView, a wielojęzyczne etykiety i CTA pozwalają przygotować spójny komunikat sprzedażowy dla różnych rynków.
Dokument przygotowany na podstawie analizy kodu modułu dc_products_pro (admin + catalog + biblioteki + szablony).