[im3] ⭐ Moduł z rozwijalną treścią ⭐

Moduł skraca dłuższą treść do ustalonej wysokości i dodaje pod nią przycisk Pokaż więcej. Po kliknięciu treść rozwija się do pełnej wysokości, a przycisk zmienia się na Pokaż mniej.

Sprawdza się m.in. przy długich opisach kategorii, treści SEO, poradnikach oraz dodatkowych informacjach, które mają być dostępne dla klienta, ale nie powinny od razu zajmować całej strony.

1. Kliknij Edytuj treść i wprowadź zawartość modułu.
2. Ustaw wysokość, która ma być widoczna przed rozwinięciem.
3. Jeśli chcesz pozwolić przewijać złożony blok, włącz opcję Pokaż scroll po prawej stronie.
4. Wybierz, czy wygląd ma wynikać tylko z formatowania edytora, czy również ze stylów szablonu sklepu.
5. Opcjonalnie dodaj własną klasę CSS, jeśli masz przygotowane dodatkowe style w szablonie.

Poniższy podgląd odtwarza pola modułu z Shoper SVE oraz jego rzeczywiste zachowanie. Zmień wysokość, scroll, wygląd albo treść i od razu sprawdź efekt po prawej stronie. Przycisk Pokaż więcej / Pokaż mniej działa tak samo jak w źródłowym JavaScript.

Po załadowaniu modułu kontener .toggledmodule ma wysokość ustawioną w konfiguracji. Kliknięcie Pokaż więcej animuje wysokość do pełnego scrollHeight, a po zakończeniu animacji ustawia wysokość na auto. Dzięki temu późniejsze zmiany treści nie są ucinane.

Przy zwijaniu moduł wraca do skonfigurowanej wysokości. Na urządzeniach mobilnych przycisk jest centrowany.

Scroll: włączenie opcji dodaje klasę scrollon i ustawia pionowe przewijanie na kontenerze.

Wygląd treści: tryb „Tylko ustawienia edytora tekstu” dodaje fr-view resetcss. Tryb łączony pozwala korzystać również ze stylu aktywnego szablonu sklepu.

Klasa CSS: wpisane klasy są dołączane bezpośrednio do wrappera treści. Moduł sam nie definiuje dla nich wyglądu — muszą istnieć w CSS sklepu.

• Prawie nic nie widać przed rozwinięciem: zwiększ wysokość złożonego bloku. Źródłowy default to tylko 2 px.
• Treść ma inne fonty lub kolory niż reszta sklepu: sprawdź ustawienie wyglądu treści i formatowanie nadane bezpośrednio w edytorze.
• Własna klasa CSS nic nie zmienia: samo wpisanie klasy nie tworzy stylu — odpowiednia reguła CSS musi istnieć w szablonie.
• Przycisk pojawił się drugi raz: źródłowy skrypt przy ponownej inicjalizacji najpierw wykonuje destroy(), dlatego w poprawnie działającym Storefront nie powinien duplikować obsługi.

JavaScript działa jako obiekt ToggleModules. Moduł wyszukuje kontenery .toggledmodule oraz przycisk .toggle-btn, zapamiętuje wysokość złożoną i zarządza animacją height. Integracja ze Storefront ponownie inicjalizuje moduł po zdarzeniu PageManager.loaded i czyści bindingi przy PageManager.beforeDestroy.