Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa Moduł Karuzela Kategorii PrestaShop 8/9: Kategorie na Stronie Głównej, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Konfigurowalna wystawa kategorii zamiast sztywnego bloku
Natywny blok kategorii PrestaShop pokazuje listę linków lub miniatury w formacie narzuconym przez motyw. Tutaj każdą prezentację ustawiasz w formularzu z zakładkami: układ, liczba wierszy, kolumny na komputerze, tablecie i telefonie, odstępy, szerokość kontenera, tło sekcji. Wybierasz kategorie ręcznie i układasz je przeciąganiem albo pozwalasz modułowi wyświetlić podkategorie danego działu, z limitem. Podczas instalacji na stronie głównej powstaje prezentacja demonstracyjna, więc efekt widać od razu.
Własny obraz, nazwa i tekst dla każdej kategorii
Kategoria często nazywa się w katalogu „Odzież damska”, a na stronie głównej chcesz pokazać „Nowa kolekcja”. Dlatego każda kategoria dodana do prezentacji przyjmuje własną nazwę, krótki opis, własny obraz i obraz na telefon z ciaśniejszym kadrem, plakietkę, tekst przycisku oraz link do przefiltrowanej listy lub strony docelowej. Bez zmian moduł używa obrazu i nazwy kategorii. Przy obrazie automatycznie wybiera najostrzejszy dostępny format PrestaShop, bo format category_default w PrestaShop 8 ma tylko 141 x 180 px.
Karuzela, siatka lub masonry, w 1 do 3 wierszach
Karuzela przewija 1, 2 lub 3 wiersze naraz, ze strzałkami, kropkami, pętlą i opcjonalnym autoodtwarzaniem. Na telefonie pokazuje fragment następnej karty, żeby było widać, że wiersz można przesunąć. Siatka układa kategorie w równych kolumnach, z opcjonalnym limitem wierszy. Masonry ma trzy style: naturalne wysokości obrazów, naprzemienne wysokości lub pierwsza kategoria wyróżniona 2 x 2. Gdy wiersz ma mniej kategorii niż kolumn, wyrównuje się do tytułu zamiast przykleić do lewej krawędzi.
5 gotowych stylów na start, 81 opcji do dopracowania
Styl „Koła” daje jednym kliknięciem okrągłe obrazy w stylu Instagram Stories, 6 w wierszu na komputerze. „Nakładka” umieszcza tekst na obrazie z gradientem, „Banery” pokazują 2 duże kafelki z nazwami wielkimi literami, a „Karty” wstawiają każdą kategorię do białej karty z opisem i linkiem. Styl wypełnia opcje wyglądu przy zapisie, a potem wszystko można dalej zmieniać: kolory, rozmiary, zaokrąglenia, obramowania, cienie, 6 efektów po najechaniu, położenie tekstu, styl przycisku i plakietki. Pole własnego CSS, ograniczone do identyfikatora prezentacji, obejmuje ostatnie szczegóły.
Na stronie głównej, na stronach kategorii lub gdziekolwiek
Każda prezentacja wybiera swój hook z listy lub w wolnym polu: nieznana nazwa hooka jest tworzona i podpinana automatycznie, a moduł odpina się od hooków, które nie są już używane. Źródło „oglądana kategoria” pokazuje na każdej stronie kategorii jej własne podkategorie, z jedną prezentacją dla całego katalogu. Hook displayDfCategoryShowcase i tag widget pozwalają umieścić konkretną prezentację w dowolnym szablonie. Daty początku i końca oraz ograniczenie do grup klientów służą akcjom sezonowym i selekcjom B2B.
Szybko i dostępnie
Karuzela korzysta z natywnego przewijania przeglądarki (CSS scroll-snap), sterowanego przez około 3 KB skompresowanego JavaScriptu, bez jQuery. Przesłane obrazy są generowane w rozmiarach 480 i 960 px i podawane z atrybutami srcset i sizes wyliczonymi według kolumn. Pierwszy obraz ładuje się od razu, kolejne leniwie, z atrybutami width i height. Wynik trafia do cache Smarty i czyści się sam po zmianie kategorii lub produktu. Dostępność: sekcja jest opisana swoim tytułem, przyciski i kropki są odczytywane przez czytniki ekranu, nawigacja klawiaturą ma widoczny fokus, autoodtwarzanie zatrzymuje się przy fokusie, a prefers-reduced-motion jest respektowane.
Na razie nie ma opinii o produkcie.