Instrukcja›Szablon COSMO

[im3] ⭐ Ustawienia stopki ⭐

Ustawienia wizualne istniejącej stopki Storefront z lazy-loadowanym tłem.

Miniatura modułu: [im3] ⭐ Ustawienia stopki ⭐

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

  1. W polu Image wybierz grafikę, która ma zostać użyta jako tło stopki.
  2. Sprawdź podgląd na desktopie i telefonie.
  3. 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ła

Aktualny 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.

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 <noscript>. Jeżeli JavaScript jest wyłączony, grafika WebP zostaje ustawiona bezpośrednio jako tło stopki.