[Beta] ⭐ Zakładki na karcie produktu ⭐

Zakładki na karcie produktu automatycznie tworzą nawigację z modułów osadzonych we wskazanej strukturze kontenerów.

Zakładki na karcie produktu — instrukcja obsługi

Zakładki na karcie produktu porządkują istniejące moduły treści w jedną nawigację. Klient wybiera zakładkę, a moduł pokazuje przypisaną sekcję bez przeładowywania strony. Do uruchomienia potrzebne są odpowiednie klasy kontenerów na stronie produktu.

✦

Korzyści

Najważniejsze rzeczy, które zyskujesz po wdrożeniu modułu.

▣

Jedna nawigacja dla wielu sekcji

Wybierasz kolejne sekcje treści produktu przy pomocy czytelnych zakładek. Moduł korzysta z istniejących sekcji, dlatego nie trzeba kopiować ich zawartości.

≡

Automatyczne pobieranie nazw

Podpisy przycisków powstają z nagłówków modułów znajdujących się we wskazanym kontenerze. Aktualizacja nazwy sekcji zmienia również nazwę odpowiadającej jej zakładki.

◉

Aktywna zakładka

Po uruchomieniu widoczna jest pierwsza dostępna sekcja. Kliknięcie innego przycisku ukrywa pozostałe moduły i wyróżnia aktywną zakładkę.

◫

Elastyczny wygląd nawigacji

Osobno ustawiasz odstępy, zaokrąglenie, padding i wielkość tekstu. Dopasowujesz zakładki do kolorystyki swojego sklepu.

◈

Kolory stanu aktywnego

Kolor tekstu, tło i obramowanie aktywnej zakładki mają własne ustawienia. Dla zwykłego i aktywnego przycisku można zachować przezroczyste tło.

✓

Kontrola pustych sekcji

Możesz pominąć moduły bez nagłówka lub wyświetlić je jako zakładki pomocnicze. Opcjonalnie ukryjesz oryginalne nagłówki nad treścią każdej sekcji.

Najważniejsze możliwości modułu

generowanie nawigacji z istniejących modułów treści,
automatyczne nazwy zakładek z nagłówków sekcji,
pokazywanie jednego modułu na raz,
opcjonalne ukrycie pierwotnych nagłówków,
osobne kolory zwykłych i aktywnych zakładek,
konfiguracja odstępów, typografii i obramowań.

W praktyce: umieszczasz moduł zakładek we wspólnym kontenerze, oznaczasz element zawierający moduły treści klasą pnavcontent-items, a moduł sam tworzy przyciski na podstawie nazw ich nagłówków.

Najprostsza konfiguracja

Najpierw przygotuj strukturę kontenerów w edytorze strony produktu i dodaj wymagane klasy CSS. Następnie umieść moduł „Zakładki na karcie produktu” oraz moduły treści we właściwych miejscach. Po zapisaniu sprawdź, czy przyciski pobierają nazwy nagłówków i przełączają odpowiadające im sekcje.

Przygotowanie struktury strony

Dodaj wymagane klasy do kontenerów przed konfiguracją wyglądu.

Zakładki działają tylko w obrębie wspólnego kontenera .pnavcontent. Moduł wyszukuje w nim element .pnavcontent-items, a następnie bezpośrednio lub głębiej umieszczone moduły .module. Wpisy nawigacji otrzymują podpisy z .module__header-title.

Jak przygotować układ i gdzie dodać klasy?

pnavcontent — przypisz do nadrzędnej kolumny obejmującej cały układ zakładek, obejmującej jednocześnie moduł nawigacji i kontener modułów treści.
pnavcontent-items — przypisz do kolumny zawierającej moduły treści zakładek, w którym znajdują się przełączane moduły.
Nazwy zakładek moduł odczytuje z nagłówków .module__header-title poszczególnych modułów.
Kolejność zakładek odpowiada kolejności modułów treści umieszczonych w pnavcontent-items.

Wskazówka: w SVE warto nadawać własne, czytelne nazwy kolumnom, wierszom i sekcjom, żeby łatwo je później rozpoznawać. Nazwy na schemacie są tylko przykładowe — nie wpływają na działanie modułu.

1. Prawidłowa struktura w edytorze SVE

Przykładowy układ w SVE. Nazwy kolumn i wierszy możesz ustawić dowolnie — poniżej użyliśmy własnych nazw, by łatwiej rozpoznać elementy:

▾▮Kolumna — główny kontener (np. „Opis produktu”)ⓘ CSS: pnavcontent

▾⊟Wiersz 1 — Nawigacja

▾▥Kolumna 1

✣[Beta] ⭐ Zakładki na karcie produktu ⭐

▾⊟Wiersz 2 — Zawartość zakładek

▾▥Kolumna 2 ⓘ CSS: pnavcontent-items

✣1. Opis produktu

✣2. Specyfikacja techniczna

✣3. Opinie o produkcie

✣4. Dostawa i płatności

Nazwy „Opis produktu”, „Nawigacja” czy „Zawartość zakładek” są tylko przykładami. Warto nazywać elementy po swojemu, żeby łatwiej je odnaleźć w edytorze. Pierwszy wiersz odpowiada za nawigację, drugi za zawartość.

2. Gdzie dodać klasy CSS w SVE

W drzewie SVE kliknij główną kolumnę, w której znajdują się oba wiersze (u nas nazwaną przykładowo „Opis produktu”), która zawiera jednocześnie oba wiersze: nawigację oraz zawartość zakładek.
W prawym panelu ustawień zaznaczonej kolumny rozwiń CSS i znajdź pole Klasa CSS.
Wpisz pnavcontent (bez kropki) i zapisz ustawienia tej głównej kolumny.
Następnie kliknij Kolumnę 2 w wierszu „Zawartość zakładek” i w jej polu CSS → Klasa CSS wpisz pnavcontent-items (bez kropki).

Przykład przypisania klas

Główna kolumna obejmująca oba wiersze (nazwa przykładowa: „Opis produktu”)
Pole „Klasa CSS” → pnavcontent

Kolumna 2 — moduły zawartości zakładek
Pole „Klasa CSS” → pnavcontent-items

Schemat pokazuje przykładową strukturę SVE, a nie konkretny układ narzucony szablonowi. Nadrzędnym elementem może być sekcja albo kolumna, pod warunkiem że w wygenerowanym DOM [data-pnavtabs] znajduje się wewnątrz .pnavcontent, zaś moduły treści są wewnątrz .pnavcontent-items. Nie wpisuj pnavcontent wyłącznie na Kolumnie 1 — wtedy Kolumna 2 może znaleźć się poza wspólnym kontenerem.

Ważna wskazówka techniczna

Klasy nadajesz w SVE w ustawieniach konkretnego elementu: najpierw głównej kolumny obejmującej oba wiersze (przykładowo nazwanej „Opis produktu”) (pnavcontent), potem kolumny z modułami treści (w przykładzie „Kolumna 2”) (pnavcontent-items). Jeśli nawigacja nie działa, sprawdź w wygenerowanym HTML, czy oba elementy są prawidłowo zagnieżdżone. Wpisuj klasy bez poprzedzającej kropki.

Nazwy w SVE są dowolne: dla porządku warto samodzielnie nazywać kolumny, wiersze i sekcje. W działaniu zakładek decydują wymagane klasy CSS, nie nazwy elementów.

Jak działają zakładki

Zrozum tworzenie i przełączanie elementów na stronie produktu.

Skrypt wyszukuje moduły w kontenerze treści, pobiera ich nagłówki i tworzy przyciski w tej samej kolejności. Aktywuje pierwszą dostępną zakładkę, a kliknięcie kolejnej ukrywa wszystkie moduły z listy i pokazuje tylko wskazany. Nawigacja jest ponownie inicjalizowana po zdarzeniu PageManager.loaded.

Jeżeli brakuje .pnavcontent lub .pnavcontent-items, moduł nie tworzy działającej listy zakładek.
Domyślnie pozycja bez tytułu jest pomijana. Po włączeniu „Pokaż puste zakładki” otrzyma zastępczy podpis w postaci „Tab 1”, „Tab 2” itd. (z kodu modułu).
Opcja ukrycia oryginalnych nagłówków dotyczy nagłówków modułów uwzględnionych w nawigacji.
Skrypt steruje widocznością wszystkich modułów znalezionych w .pnavcontent-items, dlatego w tym kontenerze umieszczaj tylko treści przeznaczone do przełączania.

Zachowanie zakładek

Zdecyduj, czy uwzględniać sekcje bez nagłówka i czy ukrywać oryginalne tytuły.

Puste nagłówki są domyślnie pomijane. Ukrycie oryginalnych nagłówków dotyczy tylko modułów uwzględnionych w zakładkach.

Układ i typografia

Dostosuj odstępy, padding, zaokrąglenie oraz wygląd tekstu.

Ustawienia odpowiadają wartościom z pliku konfiguracyjnego modułu i bezpośrednio zmieniają przyciski demonstracyjne.

Kolorystyka zakładek

Ustaw wygląd zwykłych zakładek i obramowanie po najechaniu.

Zwykła zakładka może mieć przezroczyste tło. Kolor po najechaniu dotyczy wyłącznie obramowania, bo tylko to przewiduje kod modułu.

Aktywna zakładka

Wybierz kolory zakładki wskazującej aktualnie widoczną sekcję.

Stan aktywny jest nadawany po kliknięciu zakładki. Przezroczyste tło aktywnej zakładki nie usuwa jej koloru tekstu ani obramowania.

Szybka checklista

Sprawdź konfigurację przed opublikowaniem strony produktu.

Dodaj pnavcontent do wspólnego kontenera zawierającego moduł zakładek oraz grupę modułów treści.
Dodaj pnavcontent-items do kontenera grupującego przełączane moduły.
Sprawdź, czy każda docelowa sekcja ma tytuł w .module__header-title.
Przełącz kolejno wszystkie zakładki i sprawdź, czy wyświetla się właściwa treść.
Sprawdź działanie opcji pustych zakładek i ukrywania oryginalnych nagłówków.
Przetestuj wygląd aktywnej zakładki i obramowanie po najechaniu.
Sprawdź ułożenie nawigacji na komputerze i telefonie.