iModules — Szablon COSMO [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 konfiguracjaNajpierw 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. 01 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 technicznaKlasy 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. 02 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. 03 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. Interaktywny podgląd Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki. 04 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. Interaktywny podgląd Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki. 05 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. Interaktywny podgląd Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki. 06 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. Interaktywny podgląd Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki. 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.