Category Showcase: dokumentacja karuzeli kategorii PrestaShop

Instalacja

W panelu administracyjnym otwórz Moduły > Menedżer modułów, kliknij „Prześlij moduł” i wyślij plik dfcategoryshowcase.zip. Moduł jest zgodny z PrestaShop od 8.0 do 9.x.

Podczas instalacji moduł tworzy swoje tabele, folder /img/dfcategoryshowcase/ na przesłane obrazy, hook displayDfCategoryShowcase oraz prezentację demonstracyjną: podkategorie kategorii Strona główna, jako karuzela, na stronie głównej. Otwórz sklep, aby zobaczyć efekt, a potem zmień lub usuń tę prezentację.

Modułem zarządzasz w menu Wygląd > Category Showcase (prowadzi tam też przycisk „Konfiguruj” modułu).

Tworzenie prezentacji

Kliknij „Dodaj prezentację”. Zakładka Ogólne zawiera:

• Nazwa wewnętrzna: widoczna tylko w panelu administracyjnym.
• Hook: miejsce wyświetlania (patrz niżej).
• Układ: karuzela, siatka lub masonry.
• Gotowy wygląd: przy zapisie stosuje kompletny styl (patrz niżej).
• Wyświetlane kategorie: źródło kategorii.
• Tytuł, podtytuł, tekst i link „Zobacz wszystko”: dla każdego języka.

Trzy źródła

• Wybrane ręcznie: po zapisie moduł przenosi cię do ekranu kategorii prezentacji. Dodawaj je pojedynczo i zmieniaj kolejność przeciąganiem.
• Podkategorie kategorii nadrzędnej: wybierz kategorię nadrzędną i w razie potrzeby maksymalną liczbę. Lista podąża za katalogiem.
• Podkategorie oglądanej kategorii: używaj z displayHeaderCategory lub displayFooterCategory. Każda strona kategorii pokazuje własne podkategorie. Kategoria bez podkategorii nic nie wyświetla.

W obu trybach podkategorii dodanie kategorii na ekranie kategorii służy wyłącznie do jej dostosowania. Wyłączenie jej ukrywa ją w prezentacji.

Dostosowanie kategorii

Na liście prezentacji kliknij „Kategorie”, a następnie dodaj lub edytuj kategorię. Każde puste pole przejmuje wartość z kategorii PrestaShop:

• Własny obraz: JPG, PNG, WebP lub GIF. Moduł tworzy kopie 480 i 960 px, automatycznie podawane małym ekranom.
• Obraz na telefon: opcjonalny, wyświetlany poniżej 768 px. Przydatny do ciaśniejszego kadru.
• Nazwa i krótki opis: podziały wierszy w opisie są zachowywane.
• Plakietka: na przykład Nowość, Promocja lub -30%.
• Tekst przycisku i link: link może prowadzić do przefiltrowanej listy lub strony docelowej. Akceptowane są tylko linki http(s), względne, kotwice, mailto: i tel:.
• Klasa CSS: dodawana do karty.

Tę samą kategorię można dodać do prezentacji tylko raz.

Wygląd

Gotowe style

Pole „Gotowy wygląd” w zakładce Ogólne oferuje style Minimalny, Karty, Nakładka, Koła i Banery. Przy zapisie styl zastępuje opcje, które obejmuje (obraz, karta, teksty, przycisk, kolumny). Potem pole wraca do „Zachowaj moje ustawienia”, a wszystkie opcje można dalej zmieniać.

Zakładki ustawień

• Układ: wiersze (1 do 3), kolumny na komputerze (1 do 8), tablecie (1 do 6) i telefonie (1 do 4), odstęp, limit wierszy dla siatki i masonry, styl masonry, kontener (kolumna motywu, ograniczony maksymalną szerokością, pełna szerokość), odstępy i tło sekcji.
• Nagłówek: wyświetlanie tytułu, znacznik (H2 zalecany na stronie głównej), wyrównanie, kolory i rozmiary, położenie i styl linku „Zobacz wszystko”.
• Obraz: format obrazu PrestaShop („Automatycznie” wybiera najostrzejszy format o szerokości co najmniej 400 px, w przeciwnym razie obraz oryginalny), proporcje, przycięcie lub cały obraz, kształt koła, tło, leniwe ładowanie.
• Karta: zaokrąglenie, obramowanie, cień, tło, wewnętrzny odstęp, efekt po najechaniu, czas animacji.
• Teksty: położenie (pod obrazem, na obrazie u góry, na środku lub na dole, albo brak tekstu), nakładka, typografia nazwy, opis, licznik produktów.
• Przycisk i plakietka, Karuzela, Widoczność, Zaawansowane: patrz kolejne sekcje.

Przy kształcie koła tekst zawsze jest pod obrazem.

Karuzela

Opcje zakładki Karuzela działają, gdy układ to „Karuzela”: automatyczne przewijanie i opóźnienie, pauza po najechaniu, pętla, liczba kolumn przewijanych na kliknięcie, strzałki (na karuzeli, poza nią na dużych ekranach lub obok tytułu), kolory, kropki nawigacji, podgląd następnej kategorii na telefonie, przeciąganie myszą.

Przy 2 lub 3 wierszach kategorie wypełniają każdą kolumnę od góry do dołu, a potem wiersze przewijają się razem. Automatyczne przewijanie zatrzymuje się po najechaniu, przy fokusie klawiatury, przy dotyku, gdy karta przeglądarki jest ukryta lub gdy karuzela znika z ekranu. Jest wyłączone, jeśli odwiedzający poprosił w systemie o ograniczenie animacji.

Gdzie wyświetlić prezentację

• displayHome: strona główna.
• displayHeaderCategory i displayFooterCategory: strony kategorii, nad produktami lub pod nimi.
• displayDfCategoryShowcase: hook tworzony przez moduł, który wywołasz w dowolnym miejscu motywu przez {hook h='displayDfCategoryShowcase'}.
• Własny hook: wybierz „Własny hook…” i wpisz nazwę (litery, cyfry, – i _). Nieistniejący hook zostanie utworzony i podpięty automatycznie. Wywołaj go przez {hook h='twojHook'}. Stara nazwa hooka (alias) jest zapisywana pod prawdziwą nazwą.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} wyświetla konkretną prezentację niezależnie od jej hooka.

Kilka prezentacji może korzystać z jednego hooka: wyświetlają się w kolejności listy, którą zmieniasz przeciąganiem. Moduł automatycznie odpina się od hooków, które nie są już używane.

Widoczność

• Wyświetlaj od / do: daty w formacie RRRR-MM-DD GG:MM:SS. Puste = bez ograniczenia.
• Grupy klientów: prezentacja wyświetla się tylko zaznaczonym grupom (Odwiedzający, Gość, Klient lub twoje grupy B2B). Wszystkie zaznaczone = brak ograniczenia.
• Ukryj na telefonie / na komputerze (zakładka Zaawansowane): poniżej 768 px lub od 1024 px.
• Sklepy: w trybie multistore przypisz każdą prezentację do wybranych sklepów.

Duplikowanie prezentacji

Akcja „Duplikuj” na liście kopiuje prezentację wraz z kategoriami, tekstami, sklepami i obrazami. Kopia jest tworzona jako wyłączona: zmień ją, a potem włącz.

Własny CSS

Każda prezentacja jest renderowana w <section id="dfcs-ID">, gdzie ID to numer widoczny na liście. Pole „Własny CSS” w zakładce Zaawansowane jest wypisywane tylko z tą prezentacją. Przykład:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Jeśli ta sama prezentacja pojawia się na stronie dwa razy (hook i widget), druga kopia dostaje identyfikator dfcs-ID-2.

Cache i wydajność

Wynik jest zapisywany w cache Smarty osobno dla prezentacji, języka, sklepu i grupy klientów. Cache jest czyszczony przy każdym zapisie w module, przy każdej zmianie kategorii oraz przy każdej zmianie produktu, jeśli prezentacja pokazuje licznik produktów. CSS i JavaScript modułu są ładowane tylko wtedy, gdy aktywna jest co najmniej jedna prezentacja.

Najczęstsze pytania

Prezentacja się nie wyświetla

Sprawdź, czy prezentacja jest włączona, przypisana do sklepu, w okresie wyświetlania i dostępna dla grupy odwiedzającego. Następnie sprawdź, czy motyw rzeczywiście wywołuje wybrany hook. W przypadku własnego hooka znacznik {hook h='...'} musi znajdować się w szablonie.

Obrazy są nieostre

Zostaw format obrazu na „Automatycznie” lub prześlij własny obraz. Format category_default w PrestaShop 8 ma tylko 141 x 180 px.

W masonry kolejność nie idzie od lewej do prawej

Style „naturalne wysokości” i „naprzemienne wysokości” wypełniają kolumny od góry do dołu. Jeśli liczy się kolejność od lewej do prawej, użyj siatki albo stylu „pierwsza kategoria wyróżniona”.

Odinstalowanie

Odinstalowanie usuwa tabele modułu, jego zakładki administracyjne i folder /img/dfcategoryshowcase/ z przesłanymi obrazami.