Galeria produktów WooCommerce z przeciwnym scrollem kolumn

Design Cart Column Scroll Gallery to wtyczka WordPress dla WooCommerce. Pokazuje produkty w trzech kolumnach, które jadą w przeciwnych kierunkach podczas scrollowania strony. Kliknięcie zdjęcia otwiera pełny podgląd: tytuł, cena, krótki opis, ilość, wariacje i przycisk dodawania do koszyka.

Galerię wstawia się shortcode’em. Można mieć wiele niezależnych instancji — każda z własnymi produktami, kolorami i typografią.

Tworzenie sklepów internetowych to wieczne poszukiwanie czegoś co pozwoli się wyróżnić, zachecić do głębszej eksploracji sklepu. Prezentowana wtyczka powstała wlaśnie po to, żeby w kreatywny sposób zaprezentować gamę produktów z obrazami malowanymi akrylami. Zwykła siatka sklepu spłaszcza obraz do kafelka. Tutaj praca ma przestrzeń: duże kadry, przeciwny ruch kolumn i spokojny podgląd, w którym widać fakturę, format i cenę. To nie jest kolejny carousel. To sposób, żeby sklep zachowywał się jak galeria z zaskakującym efektem działania. 

Inspirowałem się galerią Column Scroll z Codrops. Tamten układ — trzy pasy zdjęć i przeciwny kierunek ruchu — oddaje rytm oglądania prac na ścianie. Demo Codrops jest jednak prezentacją. Nie ma koszyka, wariacji, ilości ani wielu instancji. Design Cart Column Scroll Gallery bierze ten język obrazu i buduje go od nowa pod WordPress i WooCommerce: pin na scrollu strony, shortcode, AJAX i panel w stylu Design Cart.

Zobacz na wideo jak działa galeria produktów:

 

Trudności ze scrollem

Najtrudniejszym elementem całego modułu był scroll. Na początku kolumny jechały wewnątrz własnego kontenera. Kółko wpadało w ten kontener i nie oddawało steru stronie. Stopka i reszta layoutu zostawały odcięte. Potem przeszliśmy na pin: galeria przykleja się do okna, a postęp kolumn liczy się z scrolla strony. To rozwiązało przejście do stopki, ale zabrało wcześniejszą płynność — to uczucie, że po puszczeniu kółka prędkość jeszcze chwilę jedzie i wolno opada.

Wróciliśmy więc z wybiegem, ale za szeroko. Własna fizyka kółka przejęła całą stronę i poza galerią scroll stawał się nienaturalnie wolny. Dziś ten wybieg działa tylko wtedy, gdy galeria jest spięta. Nad nią i pod nią zostaje natywny scroll przeglądarki. Osobna trudność to długość pina: im wyższe kolumny i więcej prac, tym dłużej jedzie przejazd. Dlatego w ustawieniach jest prędkość przewijania — skraca albo wydłuża pin, nie siłę kółka.

Do tego doszły rzeczy, które w demo Codrops w ogóle nie istnieją: overlay nie może więzić scrolla strony, kula z blurem nie może wylewać się na hero i stopkę, a motyw sklepu nie może rozbijać pola ilości i przycisku koszyka. To wszystko musiało zejść się w jednym module, który da się wstawić shortcode’em i skonfigurować bez ruszania kodu.

 

Gdzie pobrać?

Wtyczkę możesz pobrać tradycyjnie z naszej strony lub z Github:

1

 

Wymagania i instalacja

Wtyczka wymaga WordPressa 6.0 lub nowszego, PHP 7.4 oraz aktywnego WooCommerce (od 8.0). Po wgraniu folderu design-cart-cs-gallery do wp-content/plugins/ i włączeniu wtyczki w menu pojawia się pozycja Column Scroll Gallery. Tam tworzy się instancje i kopiuje shortcode.

Osadzenie na stronie:

[design_cart_cs_gallery id="1"]

Liczba po id to numer instancji z listy galerii. Ten sam shortcode można wkleić w treść strony, w szablon motywu albo w pole shortcode sekcji produktów.

 

Lista galerii

Ekran startowy wtyczki to lista instancji, nie pojedynczy formularz. Każda karta pokazuje nazwę, liczbę produktów i shortcode. Nowa galeria startuje z domyślnym wyglądem: tło w odcieniu stalowej zieleni, kula blura dopasowana do tła, siatka 1600 px, prędkość 22, przycisk „Add to cart”. Lista produktów jest pusta — źródło to zaznaczone produkty, nie promocje ze sklepu, na którym wtyczka powstała.

Opcja	Co robi
Dodaj galerię	Tworzy nową instancję z domyślnym wyglądem i pustą listą produktów.
Shortcode na kafelku	Klik kopiuje [design_cart_cs_gallery id="…"] do schowka.
Edytuj	Otwiera konfigurację instancji (cztery zakładki).
Duplikuj	Kopiuje wygląd i listing, dopisuje do nazwy informację, że to kopia, nadaje nowy shortcode.
Usuń	Kasuje instancję po potwierdzeniu. Tej operacji nie można cofnąć.

 

Zakładka Ogólne

To serce konfiguracji instancji. Tu wybiera się skąd brać prace, jak ma wyglądać tło i jak galeria ma jechać przy scrollu.

Opcja	Co robi
Nazwa galerii	Wewnętrzna nazwa instancji. Widać ją na liście i w nagłówku edycji. Nie jest tytułem na froncie — tam są same zdjęcia, bez dużych napisów nad kolumnami.
Źródło: Zaznaczone	Galeria pokazuje wyłącznie produkty z zakładki Produkty, w kolejności z listy.
Źródło: Kategoria	WooCommerce dociąga publikacje z wybranej kategorii produktowej, z limitem.
Źródło: Promocyjne	Produkty aktualnie na promocji. Jeśli sklep nie ma nic na sale, a na liście są zapisane pozycje, wtyczka wraca do tej listy, żeby galeria nie zniknęła.
Kategoria produktów	Select z kategoriami WooCommerce. Ma znaczenie tylko przy źródle Kategoria.
Limit produktów	Maksymalna liczba prac. Przy zaznaczonych obcina listę od góry. Przy kategorii i promocjach ogranicza zapytanie. Domyślnie 24.
Kolor tła galerii	Pełne tło instancji — ten sam kolor stoi za kolumnami i za overlayem. Domyślnie #648189.
Kolor kuli (blur za kursorem)	Rozmyta kula podąża za kursorem wewnątrz galerii. Poza galerią jest niewidoczna i przycięta do ramki instancji. Domyślnie #7b959c.
Tło przycisku zamknięcia	Tło okrągłego krzyżyka w overlayu. Domyślnie białe.
Kolor ikony zamknięcia	Kolor krzyżyka. Domyślnie w kolorze tła galerii.
Szerokość kontenera	Szerokość samej siatki zdjęć, nie tła. Tło idzie na pełny viewport. Wartość w px albo %, siatka wyśrodkowana. Domyślnie 1600 px.
Prędkość przewijania	Od 10 do 100, domyślnie 22. Im wyższa, tym krótszy pin i szybszy przejazd kolumn. Nie zmienia siły kółka poza galerią.
Pokazuj pole ilości (+ / −)	Ilość w overlayu, zawsze w jednej linii z przyciskiem koszyka. Style są twarde, żeby motyw nie dokładał ramki.
Pokazuj opcje / wariacje	Selecty atrybutów w podglądzie. Dopasowanie wariacji idzie AJAX-em, bez zrzutu całej tablicy wariantów na stronę.
Shortcode	Gotowy kod instancji z przyciskiem kopiowania. Po zapisie ten sam kod jest na kafelku listy galerii.

 

Zakładka Produkty

Tu składa się listing konkretnych prac. Nawet przy źródle kategoria albo promocje ta lista trzyma dwa dodatkowe wiersze danych i kolejność, gdy wtyczka wraca do ręcznego zestawu.

Opcja	Co robi
Szukaj produktu	Wyszukiwarka WooCommerce na żywo. Wyniki pokazują miniaturę i nazwę. Klik dodaje produkt do listy instancji.
Wczytaj produkty ze źródła	Dociąga publikacje zgodnie z trybem z Ogólnych. Istniejące wiersze 1 i 2 przy tym samym ID zostają.
Lista z przeciąganiem	Uchwyt, miniatura, nazwa i kosz. Kolejność na liście to kolejność w kolumnach na froncie (rozrzut do trzech kolumn na przemian).
Wiersz 1 i wiersz 2	Dwa dowolne pola, na przykład rok i technika: „2017”, „Płótno”. Wchodzą do podglądu jako dodatkowe dane. Siatka na froncie jest ze zdjęć bez podpisów.
Usuń	Ściąga produkt z listy tej instancji, nie kasuje go w WooCommerce.

 

Zakładka Wygląd

Typografia jest rozbita na elementy, nie na jeden globalny zestaw. Każdy element ma własną czcionkę, wielkość, jednostkę, grubość, wyrównanie, uppercase i kolor. Jednostki wielkości: px, rem, vw, vh, %. Grubość: 300–800. Wyrównanie: lewo, środek, prawo. Lista krojów obejmuje czcionkę motywu oraz kroje typu Playfair Display, Cormorant Garamond, Cinzel, Inter, Montserrat i inne z zestawu Design Cart.

Element	Gdzie widać i co da się ustawić extra
Tytuł produktu w kolumnie	Przygotowane pod podpis w siatce. Siatka dziś jest ze zdjęć, ustawienie zostaje w instancji.
Dodatkowe dane w kolumnie (wiersze 1–2)	Meta przy miniaturze, gdy podpisy wrócą do siatki.
Tytuł w podglądzie	Duży tytuł w karcie overlayu. Domyślnie Playfair Display, wielkość w vh, cienka grubość.
Skrócony opis	Short description z produktu WooCommerce.
Dodatkowe dane w podglądzie	Wiersz 1 i 2 w karcie overlayu.
Cena	HTML ceny WooCommerce, w tym przekreślenia przy promocji.
Ilość	Cyfry i przyciski +/−.
Opcje produktu	Etykiety selectów wariacji.
Link do produktu	„Zobacz produkt”. Kolor i kolor hover. Na froncie podkreślenie, które się rozjeżdża, i strzałka w prawo.
Przycisk „Do koszyka”	Dodatkowo tło, tło hover i kolor hover. Treść przycisku ustawia się w zakładce Koszyk.

 

Zakładka Koszyk

Opcja	Co robi
Treść przycisku	Label na froncie. Domyślnie po angielsku „Add to cart”.
Wygląd przycisku	Nie tu — kroje, kolory i uppercase są w zakładce Wygląd, przy elemencie przycisku koszyka.
Po dodaniu do koszyka	WooCommerce dostaje standardowe fragmenty mini-koszyka, więc slidecart i widget koszyka potrafią się odświeżyć.

 

Co dzieje się na froncie

Galeria łamie się na pełną szerokość okna, nawet gdy motyw trzyma treść w wąskim kontenerze. Trzy kolumny: skrajne jadą w jedną stronę, środkowa w przeciwną. Postęp liczy się z pina na scrollu strony. Na wąskich ekranach (do 700 px) układ spada do jednej kolumny i jedzie prościej.

Klik w zdjęcie otwiera overlay na całe okno. Po lewej zdjęcie w realnych proporcjach (object-fit: contain), po prawej karta ze szklistym tłem: tytuł, meta, cena, opis, wariacje, ilość w jednej linii z przyciskiem, komunikat po dodaniu do koszyka i link do karty produktu. Overlay zamyka krzyżyk albo Escape. Scroll strony jest wtedy zablokowany.

Produkty zmienne: po wyborze atrybutów wtyczka dopytuje WooCommerce o wariację, aktualizuje cenę i zdjęcie, jeśli wariant ma własne. Produkt niewidoczny w katalogu nie wchodzi do galerii. Brak zdjęcia zastępuje placeholder WooCommerce.

 

Shortcode i wiele instancji

Jedna strona może mieć kilka galerii, ale typowy układ to jedna instancja na stronę albo sekcję sklepu. Każda instancja ma własny identyfikator, własne produkty i własne CSS zmienne. Duplikat kopiuje wygląd i listing, dopisuje do nazwy informację, że to kopia, i dostaje nowy shortcode.

Alias shortcode: [dccsg_gallery id="1"] działa tak samo jak pełna nazwa.

 

Podsumowanie

Design Cart Column Scroll Gallery to wtyczka WooCommerce, która pokazuje produkty w trzech kolumnach jadących w przeciwnych kierunkach przy scrollu strony. Klik otwiera pełny podgląd z ceną, opisem, ilością, wariacjami i koszykiem. Galerię wstawia się shortcode’em; można mieć wiele niezależnych instancji z własnymi produktami, kolorami i typografią.

Wtyczka powstała pod obrazy akrylowe: zamiast katalogowej siatki daje duże kadry i rytm oglądania jak w galerii, a nadal sprzedaje jak WooCommerce. Inspiracją było demo Column Scroll z Codrops, ale tu doszedł pin na scrollu strony, AJAX, overlay i panel konfiguracji.

Wymagania: WordPress 6.0+, PHP 7.4, WooCommerce 8.0+. Instancje tworzy się w menu Column Scroll Gallery. Źródło produktów: zaznaczone, kategoria albo promocje (z powrotem do listy ręcznej, gdy sale jest puste). Osobno ustawia się tło, kulę blura za kursorem, szerokość siatki, pole ilości i wariacje. Typografia jest rozbita na elementy (tytuł, cena, opis, przycisk). Na wąskich ekranach układ spada do jednej kolumny.

Na froncie galeria wyłamuje się na pełną szerokość okna. Overlay blokuje scroll strony, zamyka się krzyżykiem lub Escape. Produkty zmienne dopytują wariację AJAX-em. Autor: Paweł Nosko / Design Cart, licencja GPL-2.0-or-later. Gdybyś miał problemy z instalacją zawsze pomożemy jesteśmy specjalistami od tworzenia sklepów internetowych Woocommerce.