iModules — Szablon COSMO [im3] ⭐ Ustawienia stopki ⭐ Ustawienia wizualne istniejącej stopki Storefront z lazy-loadowanym tłem. Do czego służy moduł Ustawienia stopki? Moduł rozszerza istniejącą stopkę Storefront o ciemną stylistykę oraz lazy-loadowane tło graficzne. Nie tworzy własnej stopki od zera — działa na elemencie .imodules-footer, który musi już istnieć w szablonie. Grafika jest ładowana dopiero, gdy stopka zbliża się do obszaru widocznego ekranu, co ogranicza niepotrzebne pobieranie zasobu przy pierwszym renderze strony. Najprostsza konfiguracja W polu Image wybierz grafikę, która ma zostać użyta jako tło stopki. Sprawdź podgląd na desktopie i telefonie. Pamiętaj, że źródło używa cover + center, więc przy innych proporcjach część grafiki może zostać przycięta. Mimo opisu pola w Shoperze mówiącego o logotypie, aktualny kod używa tej grafiki jako tła całej stopki. Pięć pól jest obecnie niepodłączonych do źródłaAktualny module.twig i module.js korzystają wyłącznie z pola IMcolumnsImage. Pola koloru ramki, koloru tła, treści, tytułu linku i adresu URL pozostają w formularzu, ale nie wpływają obecnie na front. Dlatego w symulatorze są oznaczone jako S. Interaktywny konfigurator Po lewej stronie znajduje się formularz odwzorowujący aktualny config.json 1:1. Po prawej widzisz syntetyczną stopkę Storefront. Zmiana grafiki aktualizuje tło natychmiast; pozostałe pola można edytować, ale zgodnie ze źródłem nie zmieniają podglądu. 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 lazy loading tła? Twig zapisuje adresy grafiki WebP/JPG do window.IM_FOOTER_BG. JavaScript wybiera obsługiwany format i obserwuje .imodules-footer przez IntersectionObserver z marginesem 300 px. Gdy stopka zbliży się do viewportu, obraz jest preloadowany i dopiero po jego załadowaniu trafia do background-image. Moduł ponownie podpina logikę po zdarzeniu PageManager.loaded, dzięki czemu działa również przy przejściach Storefront bez pełnego przeładowania strony. Zachowanie bez JavaScript Źródło ma fallback w