DC Triple Slider to moduł OpenCart 3 do budowy nowoczesnych, wielopanelowych sliderów z niezależną treścią i stylem dla 3 stref obrazu: lewej, prawej górnej i prawej dolnej. Moduł umożliwia stworzenie pełnych scen marketingowych, gdzie każdy panel ma własny obraz, nagłówek, opis, CTA i własny design.
Moduł powstał na bazie wtyczki Triple Slider autorstwa Pawła Nosko:
Triple Slider: Mastering Lane-Based UI Motion
.
Zobacz na poniższym wideo jak działa DC Triple SLider w praktyce
1. Co robi moduł i dla kogo jest
Moduł jest przeznaczony dla sklepów, które chcą:
- pokazać kilka przekazów wizualnych jednocześnie (narracja wielopanelowa),
- utrzymać spójny branding i niezależną stylistykę treści na każdym panelu,
- kierować klienta do różnych miejsc sklepu przez CTA (produkty, kategorie, strony, linki),
- precyzyjnie sterować animacją, autoplay, ruchem dotykowym i zachowaniem loop.
2. Architektura funkcjonalna modułu
- Poziom modułu OpenCart - przypinasz konkretny slider do instancji modułu i włączasz/wyłączasz wyświetlanie.
- Poziom slidera - ustawiasz globalne parametry działania i layoutu dla całego zestawu slajdów.
- Poziom slajdu - definiujesz treści i styl każdego z 3 paneli w obrębie danej sceny.
3. Wszystkie strony konfiguracyjne (admin)
3.1 Dashboard modułu
Panel startowy z kaflami nawigacyjnymi:
- Sliders - lista sliderów.
- Slides - lista slajdów.
- Dodaj slider - szybkie przejście do tworzenia slidera.
- Dodaj slide - szybkie przejście do tworzenia slajdu.
3.2 Konfiguracja instancji modułu OpenCart
To ekran podpięcia modułu do layoutu OpenCart (standardowy formularz modułu).
| Pole | Opis i wpływ |
|---|---|
| Nazwa | Nazwa instancji modułu (wymagane, 3-64 znaki). |
| Slider | Wybór, który slider ma być renderowany przez tę instancję. Można zostawić ---. |
| Status | Włączony/Wyłączony dla tej instancji modułu. |
3.3 Strona: Sliders (lista)
Widok tabelaryczny wszystkich sliderów:
- nazwa, status, sortowanie, liczba slajdów,
- operacje: dodaj, edytuj, usuń (masowo).
3.4 Strona: Slider (formularz)
Formularz nie ma technicznych zakładek, ale jest logicznie podzielony na sekcje.
| Opcja | Co użytkownik może zmienić | Efekt |
|---|---|---|
| Nazwa | Nazwa slidera (wymagane, 3-128) | Identyfikacja w panelu admin. |
| Status | Włączony/Wyłączony | Decyduje, czy slider może być renderowany na froncie. |
| Sortowanie | Liczba całkowita | Kolejność sliderów w listach i fallback do pierwszego aktywnego. |
| Szerokość kontenera rodzica | Wartość liczbowa | Ustawia szerokość wrappera slidera. |
| Jednostka szerokości | px lub % | Tryb szerokości kontenera. |
| Kolor tła kontenera | Color picker | Tło zewnętrznego wrappera slidera. |
| Margines górny/dolny | W px | Odstęp slidera od elementów sąsiednich. |
| Padding górny/dolny | W px | Wewnętrzny odstęp wrappera. |
| Proporcje desktop/tablet/mobile | Tekst, np. 16/9, 4/3, 1/1 | Sterowanie wysokością i responsywnością slidera. |
| Typ przejścia | slide / fade | Sposób animacji między scenami. |
| Czas przejścia | ms | Długość animacji panelu. |
| Opóźnienie paneli | ms | Odstęp czasowy między startem kolejnych paneli. |
| Opóźnienie treści | ms | Stagger wejścia tekstów/CTA. |
| Lead wygaszania treści | ms | Kiedy treści zaczynają znikać przed ruchem panelu. |
| Easing | Preset lub własna wartość | Krzywa animacji (ease, linear, cubic-bezier(...)). |
| Autoplay | Tak/Nie | Automatyczne przełączanie slajdów. |
| Zapętlenie | Tak/Nie | Czy slider wraca do początku po ostatnim slajdzie. |
| Opóźnienie autoplay | ms | Czas między automatycznymi przejściami. |
| Wznowienie autoplay | ms | Po jakim czasie autoplay wraca po interakcji użytkownika. |
| Próg swipe | px | Minimalny ruch palca/myszy, by uznać gest przesunięcia. |
| Reduced motion | auto / on / off | Obsługa preferencji ograniczenia animacji. |
3.5 Strona: Slides (lista)
- filtr po sliderze (Filtruj),
- lista slajdów z informacją, do którego slidera należą,
- operacje: dodaj, edytuj, kopiuj (pojedynczo lub masowo), usuń.
3.6 Strona: Slide (formularz) - zakładki i podzakładki
To główna, rozbudowana konfiguracja treści i wyglądu pojedynczej sceny.
Zakładka A: Ogólne
W tej zakładce edytujesz dane slajdu i zawartość każdego panelu.
- Pola globalne slajdu: Nazwa, Slider (wymagane), Status, Sortowanie.
- Dla każdego panelu (lewy, prawy górny, prawy dolny): obraz + treści.
- Dla treści działa multi-language (osobne taby językowe): tytuł, opis, tekst CTA.
Konfiguracja CTA w zakładce Ogólne
Dla każdego panelu osobno:
| Opcja | Dostępne wartości | Znaczenie |
|---|---|---|
| Typ CTA | Strona, Strona systemowa, Kategoria, Produkt, Producent, Dowolny link | Określa skąd pochodzi cel przycisku. |
| Cel CTA - wyszukiwarka | dla: produkt/kategoria/strona/producent | Autocomplete po nazwie; zapisywany jest ID docelowego obiektu. |
| Cel CTA - system | lista tras systemowych | Gotowe route-y, np. common/home, checkout/cart. |
| Cel CTA - custom | URL lub route | Własny adres, np. pełny URL lub ścieżka OpenCart. |
Zakładka B: Design
Dla każdego panelu osobno konfigurujesz styl treści i CTA.
Podzakładki breakpointów (dla każdego panelu)
- Desktop - rozmiary fontów: tytuł, opis, CTA.
- Tablet - osobne rozmiary fontów.
- Mobile - osobne rozmiary fontów.
Sekcje stylu panelu (poza breakpointami)
| Sekcja | Co można zmienić |
|---|---|
| Tytuł | kolor, grubość fontu (200-900), uppercase (tak/nie) |
| Opis | kolor, grubość fontu (200-900), uppercase (tak/nie) |
| CTA | kolor tekstu, grubość, uppercase, tło przycisku, tło hover |
4. Jak te opcje działają na froncie sklepu
- Slider jest renderowany jako komponent z kompletem atrybutów
data-*(timingi, ratio, motion, loop, autoplay). - Każdy panel niesie własne
data-*z treścią i designem. - Treść i linki CTA są wybierane wg aktualnego języka sklepu.
- Jeśli nie wybierzesz slidera w instancji modułu, system próbuje pobrać pierwszy aktywny slider.
- Na froncie działa nawigacja poprzedni/następny + przycisk pauzy autoplay.
5. Co użytkownik (administrator sklepu) może realnie zmienić
- zbudować dowolną liczbę sliderów i przypinać je do różnych instancji modułu,
- sterować globalnym rytmem animacji i zachowaniem komponentu,
- w pełni edytować treści i linkowanie CTA dla 3 paneli niezależnie,
- ustawić osobne style i typografię per panel i per breakpoint,
- zarządzać aktywnością i kolejnością sliderów/slajdów,
- duplikować slajdy dla szybszego budowania kampanii.
6. Wbudowane walidacje i ograniczenia
- Nazwa modułu: 3-64 znaki.
- Nazwa slidera/slajdu: 3-128 znaków.
- Slajd musi być przypisany do slidera.
- Jeśli wpiszesz tekst CTA, musisz wskazać cel CTA (ID/route/link).
- Wartości liczbowe czasu i odległości są normalizowane do wartości nieujemnych.
7. Gotowość do działania po instalacji
Po instalacji moduł jest gotowy do pracy także od strony frontowej:
zawiera własny skrypt działania slidera oraz dedykowane style wizualne.
8. Podsumowanie produktu
DC Triple Slider łączy funkcję zaawansowanego komponentu wizualnego z wygodnym, panelowym systemem konfiguracji w OpenCart 3. Największą siłą modułu jest to, że administrator jednocześnie kontroluje ruch, strukturę treści i design każdego pasa slidera, bez potrzeby kodowania.
Dokument opracowany na podstawie rzeczywistej analizy kontrolerów, modeli i widoków modułu.