DC Curtain Products — moduł produktowy z animacją SVG Curtain Hover

Dzisiaj prezentujemy najnowszy wynalazek z naszego magicznego kotła DC Curtain Products ✨🧪🔥. 

DC Curtain Products to moduł, który powstał z bardzo konkretnej potrzeby: zaprezentować produkty tekstylne — zasłony, rolety, tkaniny, kolekcje materiałów — w sposób, który wygląda nowocześnie, wyjątkowo i dużo bardziej angażująco niż standardowe listy produktów w OpenCart. Klasyczne moduły z siatką produktów są poprawne, ale brakuje im efektu „wow”. A w branżach, gdzie liczy się estetyka, faktura i pierwsze wrażenie, zwykłe miniatury po prostu nie wystarczają.

I właśnie dlatego powstał ten moduł. Curtain Products wykorzystuje zaawansowaną animację opartą o SVG morphing, dzięki której zdjęcie produktu wygląda tak, jakby było zakryte zasłoną — a dopiero po najechaniu odsłania swoje szczegóły, parametry i przyciski akcji. To UX premium, którego nie da się pomylić z żadnym innym rozwiązaniem dostępnym w OpenCart.

Na tle standardowych modułów różnica jest ogromna. Zamiast statycznych miniaturek dostajemy interaktywną prezentację, dynamiczne odsłanianie informacji, elegancki panel opcji produktu, obsługę koszyka AJAX oraz zminifikowane CSS/JS ładowane przez własny optymalizator. Efekt? Moduł wygląda jak element z butikowego sklepu, a nie typowego katalogu e-commerce. Dzięki temu świetnie sprawdza się wszędzie tam, gdzie produkt sam w sobie jest wizualny i warto go pokazać w atrakcyjniejszej, dopracowanej formie. To przykład, jak świadome budowanie sklepów internetowych pozwala wyróżnić się na tle konkurencji nie szablonem, ale realnym doświadczeniem użytkownika i technologią.

 

Co wyróżnia DC Curtain Products?

DC Curtain Products to moduł, który od pierwszej sekundy robi wrażenie. Zamiast zwykłego podświetlenia przy hoverze dostajesz efekt morphingu SVG ✨ — zasłona faktycznie „odchyla się”, odsłaniając szczegóły produktu i panel akcji. Do tego moduł potrafi wyświetlić wybrane atrybuty produktu dokładnie w momencie hovera 🎨, co idealnie sprawdza się przy kolekcjach tkanin, modelach zasłon czy wariantach materiałów.

Całość działa w pełni z AJAX-owym koszykiem ⚡, więc dodawanie produktów jest szybkie i bez przeładowań, a wszystkie skrypty i style są ładowane przez autorski system minifikacji CSS/JS 🚀. Dzięki temu moduł jest lekki, responsywny i doskonale zoptymalizowany pod Core Web Vitals.

Do tego dochodzi obsługa nowości, bestsellerów i promocji 🛍️ oraz specjalny offset layout, który nadaje siatce produktów butikowy, nieregularny charakter 🧩. W efekcie powstaje moduł, który wygląda jak element z premium sklepu designerskiego — a nie jak standardowy widget z OpenCarta.

 

Jak działa animacja Curtain Hover?

Animacja Curtain Hover to serce całego modułu i jednocześnie element, który wynosi go daleko ponad standardowe rozwiązania produktowe w OpenCart. Efekt bazuje na technice SVG morphing ✨ — czyli płynnej animacji kształtów wewnątrz elementu <path>. Inspiracją do tego mechanizmu był kultowy już projekt Codrops, w którym zdjęcie produktu „ukrywa się” pod dynamiczną, falującą zasłoną.

W praktyce moduł wykorzystuje dwa kształty SVG: pierwszy, zapisany bezpośrednio w atrybucie d ścieżki, i drugi — docelowy — przechowywany jako data-path-hover. Gdy użytkownik najedzie kursorem na produkt, skrypt zamienia kształt startowy w kształt hoverowy, co tworzy wrażenie odchylającej się zasłony 🎭. Po zjechaniu kursorem animacja wraca do stanu początkowego.

Takie rozwiązanie daje zupełnie inne doświadczenie niż klasyczny hover. Zamiast zwykłego podświetlenia użytkownik odkrywa produkt w dosłowny sposób 🔍 — widzi, jak zdjęcie „wyłania się” spod animowanej maski, a wraz z nim pojawiają się parametry, atrybuty oraz panel akcji. To UX premium, które sprawia, że produkt staje się bardziej „namacalny”, a sama interakcja buduje wrażenie obcowania z czymś dopracowanym i designerskim.

 

Struktura modułu – co się dzieje po stronie frontendu

1 Layout i grid

DC Curtain Products korzysta z responsywnej siatki Bootstrapowej wbudowanej w OpenCart, dzięki czemu układ automatycznie dostosowuje się do ekranu: 3 kolumny na desktopie, 2 na tabletach, 1 na telefonach 📱💻. To jednak dopiero początek — moduł stosuje również strategiczny offset dla co drugiego elementu w rzędzie.

Dlaczego? Bo klasyczna siatka produktów wygląda zbyt równo. Offset tworzy subtelne przesunięcie i nieregularność, która daje efekt artystycznego, butikowego ułożenia 🖼️✨. Dzięki temu całość przypomina layouty z luksusowych sklepów z odzieżą lub designem — nie symetryczną tabelkę, tylko estetyczną prezentację, która prowadzi wzrok użytkownika od produktu do produktu.

 

2 Prezentacja zdjęcia i animowanej maski

Każdy element produktu oparty jest o strukturę:

• <figure> — główny kontener wizualny

• <svg> + <path> — animowana maska „zasłony”

• <figcaption> — treść, która odsłania się dopiero po hoverze

Zdjęcie produktu jest częściowo zakryte kształtem SVG, który po najechaniu kursorem zmienia swój kształt dzięki morphingowi. W momencie odsłonięcia widać zarówno nazwę, jak i parametry oraz przyciski akcji. Efekt jest płynny, estetyczny i nadaje zdjęciu wyjątkowego charakteru 🎭✨.

 

3 Panel informacyjny i opcje produktu

W figcaption znajduje się panel informacyjny, w którym moduł może wyświetlać dodatkowe parametry produktu. Funkcja product.display_options pozwala wyciągnąć konkretną grupę opcji wybraną w ustawieniach modułu.

Co to daje? Możesz zaprezentować tylko te atrybuty, które rzeczywiście mają znaczenie dla klienta, np.:

• tkanina / materiał 🎨

• model zasłony lub rolet

• wariant kolekcji (Classic / Premium / Velvet)

• kolorystyka

• w przypadku odzieży: rozmiary, kroje, kolekcje sezonowe 👗

Dzięki temu klient na hoverze widzi od razu najważniejsze cechy produktu — bez wchodzenia na stronę produktu.

 

4 Panel cenowy + oceny

Pod zdjęciem znajduje się panel cenowy, w którym moduł dynamicznie wyświetla:

• cenę standardową, jeśli produkt nie jest przeceniony

• cenę promocyjną + starą cenę, jeśli produkt ma special 💸

Tuż obok pojawiają się również gwiazdki ocen ⭐⭐⭐⭐⭐ generowane w pętli 1–5, dzięki czemu moduł idealnie odwzorowuje system ratingów OpenCart. Wszystko działa automatycznie — jeśli produkt ma ocenę, gwiazdki są wyświetlane; jeśli nie, panel się nie pokazuje.

 

5 Formularz zakupowy

Na końcu znajduje się mini formularz zakupowy obsługujący:

• dodanie do koszyka 🛒

• dodanie do ulubionych (wishlist) ❤️

• dodanie do porównania produktów 🔄

Całość działa w pełni AJAX-owo, bez przeładowania strony ⚡.
Kluczem jest mechanizm formaction, dzięki któremu trzy różne akcje działają w jednym formularzu. Każdy przycisk ma własny endpoint, ale korzysta z jednej struktury — czysto, lekko i bardzo zgodnie z best practices OpenCart.

 

Backend modułu — konfiguracja i logika działania

1 Status modułu

Na początku mamy najprostsze, ale absolutnie kluczowe ustawienie: status modułu. Jednym przełącznikiem możesz włączyć lub wyłączyć DC Curtain Products 🔌. Dzięki temu moduł można szybko testować, aktywować tylko na wybranych stronach lub wyłączać podczas prac nad motywem bez ingerencji w kod.

 

2 Tryb działania: latest / bestsellers / sales

Moduł pozwala wybrać, jakie produkty mają zostać pobrane i zaprezentowane na froncie. Do wyboru są trzy tryby:

• latest 🆕 – najnowsze produkty w sklepie

• bestsellers 🔥 – produkty najlepiej sprzedające się

• sales 💸 – produkty przecenione (z special)

Mechanizm pobiera dane z odpowiednich zapytań OpenCart:

• „latest” → sortowanie po dacie dodania

• „bestsellers” → sortowanie po ilości sprzedaży

• „sales” → filtrowanie po cenie promocyjnej

Kiedy czego używać?

• Jeśli chcesz pokazać najnowszą kolekcję zasłon — wybierz latest.

• Jeśli chcesz zaprezentować hitowe modele — bestsellers.

• Jeśli chcesz zrobić sekcję wyprzedaży — sales.

To szybkie, intuicyjne i daje trzy zupełnie różne scenariusze dla tego samego modułu.

 

3 Filtrowanie kategorią

Jeżeli katalog jest większy (kilkaset lub kilka tysięcy produktów), filtrowanie po kategorii staje się nie tylko użyteczne, ale wręcz konieczne 📁.

Dzięki tej opcji możesz ograniczyć moduł np. tylko do:

• kategorii „Zasłony Gotowe”

• kategorii „Rolety Rzymskie”

• kategorii „Nowa Kolekcja 2025”

To pomaga utrzymać porządek i prezentować klientowi tylko te produkty, które mają sens w kontekście danego widoku strony.

 

4 Grupa opcji do wyświetlenia

To najważniejsza opcja w całym backendzie — prawdziwy game changer modułu 🎨✨.
Możesz wybrać jedną konkretną grupę opcji produktu, którą moduł ma pokazywać podczas hovera.

Co to daje?

• prezentujesz klientowi to, co faktycznie jest dla niego ważne

• nie musisz pokazywać wszystkich opcji — tylko wyselekcjonowane

• unikasz chaosu znanego z dużych sklepów, gdzie produkt ma po 30 atrybutów

Przykłady użycia:

• pokazanie rodzaju tkaniny

• prezentacja linii kolorystycznej

• wskazanie kolekcji designerskiej

• w odzieży: rozmiarów, kroju, kolekcji sezonowej

To ogromny atut modułu, bo łączy on animację z merytorycznymi informacjami — bez przeładowania layoutu.

 

5 Limit + wymiary zdjęć

Dwa ostatnie ustawienia mają duży wpływ na wydajność:

• limit produktów → ile pozycji pojawi się w siatce

• szerokość i wysokość miniaturek → parametry resize() z modelu image

Dlaczego to takie ważne?

• mniejsza liczba produktów = szybsze ładowanie strony ⚡

• optymalny rozmiar zdjęć = lepsze wyniki w PageSpeed

• równy format miniaturek = lepsza estetyka siatki

Ustawione rozsądnie parametry sprawiają, że DC Curtain Products działa nie tylko efektownie, ale też wydajnie i lekko dla serwera.

 

System minifikacji CSS/JS — jak moduł dba o wydajność

Jednym z najbardziej niedocenianych elementów DC Curtain Products jest jego własny system optymalizacji zasobów. Moduł nie korzysta ze standardowych plików CSS i JS, jak robi to większość rozszerzeń OpenCart. Zamiast tego generuje i podaje je dynamicznie, tworząc ultra-lekki pakiet tylko z tym, co jest naprawdę potrzebne na danej stronie ⚡📦.

Dlaczego to takie ważne? Bo standardowe rozszerzenia często dorzucają do motywu kolejne pliki, kolejne zapytania HTTP i kolejne kilobajty kodu, które trzeba pobrać i przetworzyć. Curtain Products rozwiązuje to inaczej — bardziej inteligentnie.

 

Jak działa dynamiczna minifikacja?

Moduł stosuje trzyetapowy system:

🔧 1. Generowanie
Na podstawie plików źródłowych moduł przygotowuje kod CSS i JS, który ma zostać użyty na stronie. Kod ten może pochodzić z kilku różnych zasobów.

🔗 2. Łączenie
Zamiast ładować każdy plik osobno, system skleja je w jeden plik CSS i jeden plik JS.
Dzięki temu przeglądarka musi wykonać tylko dwa zapytania, a nie dziesięć.

🧩 3. Minifikacja i ładowanie przez session.css i session.js
Zminifikowane pliki zapisywane są do sesji użytkownika.
To oznacza, że są ładowane:

i analogicznie dla JS.
Dostajesz pliki:

• pozbawione białych znaków

• skompresowane

• gotowe do natychmiastowego użycia

Bez bałaganu i bez grama nieużywanego kodu 🚀.

 

Redukcja zapytań HTTP i ilości kodu

Dzięki temu systemowi:

• ilość zapytań do serwera spada do minimum

• Twoja strona nie ładuje nadmiarowych assetów

• moduł zajmuje mniej miejsca i ładuje się szybciej

• przeglądarka ma mniej roboty, a serwer mniejsze obciążenie

To nie są kosmetyczne różnice — to realne oszczędności czasu ładowania.

 

Wpływ na PageSpeed i Core Web Vitals

Optymalizacja zasobów ma ogromny wpływ na trzy kluczowe wskaźniki CWV:

• LCP (Largest Contentful Paint) — szybciej ładuje się główny content

• FID/INP (interaktywność) — mniej JS = szybsze działanie strony

• CLS (stabilność wizualna) — mniejsza liczba zasobów = mniej opóźnień w renderowaniu

W praktyce DC Curtain Products:

✨ skraca czas ładowania modułu
✨ redukuje blokujący JS
✨ minimalizuje ilość pobieranego kodu
✨ pomaga spełnić wymagania PageSpeed bez dodatkowych wtyczek

To rozwiązanie premium, którego w OpenCart praktycznie nikt nie stosuje — a które daje bardzo realne korzyści w szybkości i SEO.

 

Jak pobrać i zainstalować?

DC Curtain Products jest dostępny w dwóch miejscach: bezpośrednio na Design Cart oraz w repozytorium GitHub 📥💻. Obie wersje zawierają ten sam, aktualny kod modułu, więc możesz wybrać źródło, które preferujesz — czy to wygodne pobieranie z naszej strony, czy pełną transparentność kodu na GitHubie.

2

Instalacja przebiega dokładnie tak, jak w przypadku wszystkich nowoczesnych rozszerzeń dla OpenCart 4.0:

1. Pobierasz paczkę .ocmod.zip

2. Wchodzisz do panelu administracyjnego → Extensions → Installer

3. Wskazujesz plik i uruchamiasz instalację

4. Po instalacji przechodzisz do Extensions → Modules i aktywujesz DC Curtain Products

5. Konfigurujesz moduł według własnych potrzeb i dodajesz go do layoutu strony

Moduł jest w pełni kompatybilny z OpenCart 4 🟦⚙️ — korzysta z nowego loadera, systemu eventów oraz mechanizmów integracji AJAX wprowadzonych w nowszych wersjach. Nie wymaga ręcznych poprawek ani ingerencji w pliki motywu, więc instalacja jest szybka i bezproblemowa nawet w dużych sklepach.

Prosto, czysto i w pełni zgodnie ze standardami OC4 — tak jak powinno wyglądać każde rozszerzenie premium.

 

Zalety modułu — podsumowanie techniczne

DC Curtain Products to moduł, który łączy efektowny wygląd z solidną, nowoczesną technologią. Jego największą siłą jest animacja SVG klasy premium ✨ — płynny morphing, którego nie da się pomylić z niczym innym w OpenCart. To rozwiązanie spotykane raczej w projektach designerskich niż w typowych modułach e-commerce.

Do tego moduł jest w pełni zintegrowany z core OpenCart ⚙️, korzystając z natywnych mechanizmów koszyka, miniaturek, layoutów i AJAX-owego odświeżania. Nie ma hacków, nadpisywania plików ani ciężkich bibliotek — wszystko działa tak, jak przewiduje to architektura OC4.

Ogromnym wyróżnikiem jest też własny system minifikacji CSS/JS 🚀, który generuje minimalne, skompresowane zasoby na bieżąco i ładuje je z sesji użytkownika. Dzięki temu moduł jest bardzo lekki i pomaga w osiąganiu lepszych wyników PageSpeed.

Curtain Products potrafi wyświetlać dynamiczne opcje produktu 🎨 — tylko te, które wybierzesz, bez przeciążania klienta zbędnymi informacjami. Do tego dochodzą AJAX-owe przyciski akcji 🛒❤️🔄, dzięki którym dodawanie produktów do koszyka, ulubionych czy porównywarki odbywa się błyskawicznie.

Całość tworzy moduł, który nie tylko działa szybko, ale też prezentuje produkty w sposób znacznie bardziej estetyczny, nowoczesny i butikowy 🖼️ niż standardowe listy OpenCart. To rozwiązanie dla sklepów, które chcą wyglądać po prostu lepiej.

 

Podsumowanie

DC Curtain Products to obecnie najbardziej efektowny moduł produktowy w całym Design Cart — i nie jest to przesada. To rozwiązanie, które zmienia zwykłą listę produktów w interaktywne doświadczenie premium. Każdy hover to małe show: zasłona odchyla się, ujawniając nazwę, atrybuty i przyciski akcji, dokładnie tak, jakby użytkownik odkrywał produkt w butikowym katalogu ✨🎭.

Mimo tego efektownego charakteru moduł pozostaje zaskakująco prosty w konfiguracji, a jednocześnie potężny w działaniu. Wybierasz tryb pracy, kategorię, grupę opcji i gotowe — reszta robi się sama, łącznie z animacją, AJAX-owymi akcjami i minifikacją zasobów.

To idealny wybór dla sklepów, które chcą wyróżnić swoje produkty zarówno wizualnie, jak i funkcjonalnie. Jeśli chcesz, aby Twój sklep wyglądał inaczej niż wszystkie i oferował klientom wrażenie obcowania z czymś dopracowanym, eleganckim i nietuzinkowym — Curtain Products jest dokładnie tym modułem, którego szukasz 🔥🛍️.