iModules — Szablon COSMO
[im3] ⭐ Pasek nad nagłówkiem ⭐
Pasek informacyjny nad nagłówkiem z wieloma komunikatami, ikonami i stylowanymi odnośnikami.
Do czego służy moduł?
Moduł wyświetla pasek informacyjny nad nagłówkiem sklepu. Możesz dodać od 1 do 10 komunikatów, opcjonalne ikony oraz linki. Gdy komunikatów jest więcej, źródłowy JavaScript przewija je pionowo w pętli.

Najprostsza konfiguracjaDodaj 2–3 krótkie komunikaty, np. o dostawie, rabacie i kontakcie. W treści możesz dodać link — jego wygląd ustawisz bezpośrednio w konfiguracji modułu.

Jak skonfigurować pasek?
Ustaw maksymalną szerokość, wysokość paska oraz wielkość i kolor tekstu.
Dopasuj wygląd odnośników — kolor tekstu, tło, hover, rozmiar i zaokrąglenie.
W sekcji Treść modułu dodaj kolejne elementy. Każdy może mieć własną treść WYSIWYG oraz ikonę.
Zapisz moduł i sprawdź, czy krótkie komunikaty dobrze mieszczą się także na telefonie.

Konfiguracja modułu
Symulator poniżej odwzorowuje pola z aktualnego config.json oraz rzeczywisty markup Twig. Wszystkie pola są oznaczone jako LIVE, ponieważ wpływają na generowany output 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.
Jak działa przewijanie?
Slider przewija elementy pionowo i po ostatnim komunikacie wraca płynnie do pierwszego.
Jeżeli wszystkie elementy mieszczą się w wysokości viewportu, JS nie uruchamia mechanizmu przewijania.
Autoplay zatrzymuje się po najechaniu kursorem oraz gdy karta przeglądarki jest w tle.
Źródłowy JS obsługuje także klawiaturę dla przycisków poprzedni/następny.

Pole „Czas przewijania slidera”Aktualny Twig zapisuje tę wartość jako data-duration, ale obecny module.js nie czyta tego atrybutu. JS korzysta z data-interval albo wartości domyślnej 5000 ms. W tej wersji modułu zmiana pola nie zmienia więc realnego czasu autoplay.

Szczegóły techniczne
ElementZachowanie źródłowe
Maksymalna szerokośćmax-width na .topbarinner
Wysokość paskamax-height viewportu + height i line-height slajdu
TreśćWYSIWYG renderowane przez Twig z filtrem raw
Ikonypaths.original przed treścią komunikatu
Przewijaniepionowy scroll + klon pierwszego elementu do pętli
Autoplay5000 ms domyślnie w aktualnym JS