• Sprawdź slider na komputerze i telefonie.
• Przejdź do pierwszego i ostatniego slajdu i sprawdź, czy strzałki działają prawidłowo.
• Jeżeli włączyłeś automatyczne przewijanie, sprawdź pauzę i pasek postępu po ręcznej zmianie slajdu.
• Przy wielu podpisach na telefonie sprawdź, czy lista przesuwa się do aktualnego slajdu.
• Jeżeli używasz filmów MP4, sprawdź osobno wersję dla komputera i telefonu.

Kolekcja slider + obrazek wyświetla produkty z wybranej kolekcji jako slider i łączy je z osobną grafiką promującą kolekcję. Na większych ekranach grafika znajduje się po lewej stronie, a poniżej 980 px źródłowy CSS przełącza moduł na układ jednokolumnowy z osobną grafiką RWD nad produktami.

1. Wybierz kolekcję, której produkty mają się pojawić.
2. Wgraj grafikę desktopową oraz osobną grafikę RWD.
3. Ustaw liczbę produktów oraz liczbę kafelków widocznych jednocześnie na każdym urządzeniu.
4. Opcjonalnie dodaj własny tytuł, opis i link do pełnej kolekcji.
5. W sekcji Kafelek produktu wybierz informacje, które mają być widoczne przy każdym produkcie.

Formularz po lewej odwzorowuje kolejność i typy pól źródłowego modułu. Przełączaj widok Desktop / Laptop / Tablet / Mobile, aby zobaczyć odpowiedni breakpoint slidera oraz zmianę grafiki kolekcji.

Na szerokościach powyżej 980 px moduł ma dwie kolumny: grafikę kolekcji po lewej i slider produktów po prawej. Przy szerokości do 980 px grafika desktopowa jest ukrywana, a moduł pokazuje Grafikę kolekcji RWD nad listą produktów.

Moduł pobiera maksymalnie 16 produktów. Liczbę kafelków widocznych jednocześnie ustawiasz osobno dla telefonu, tabletu, laptopa i desktopu. Strzałki slidera pojawiają się tylko wtedy, gdy liczba produktów przekracza liczbę widocznych kafelków; na telefonie dodatkowo obowiązuje opcja Włącz strzałki nawigacji.

Druga sekcja przekazuje ustawienia bezpośrednio do standardowego makra Shopera product_tile. Możesz włączyć m.in. producenta, SKU, cenę regularną przy promocji, rabat procentowy, cenę jednostkową, informacje podatkowe, dostępność i przycisk dodawania do koszyka.

Źródłowy Twig korzysta z ObjectApi.getCollection() oraz ObjectApi.getProductsInCollection(). Sam moduł renderuje się tylko wtedy, gdy wybrana kolekcja zawiera produkty. Podgląd w instrukcji nie odpytuje ObjectApi i dlatego pole ID kolekcji jest oznaczone jako S; pozostałe edytowalne pola wpływają na wynik modułu i są oznaczone jako LIVE.

Moduł Skrócone atrybuty pokazuje na karcie produktu kilka najważniejszych cech w zwartej formie. Pod listą może wyświetlić odnośnik, który po kliknięciu płynnie przewija klienta do pełnej specyfikacji produktu.

1. Włącz Aktywuj moduł.
2. Ustaw, ile pierwszych atrybutów ma być widocznych, np. 2 lub 3.
3. W polu Treść przycisku wpisz tekst, np. Pełna specyfikacja.
4. Upewnij się, że produkt ma przypisane atrybuty w Shoperze.

Poniższy symulator odwzorowuje wszystkie trzy pola z konfiguracji modułu. Każde z nich jest LIVE, ponieważ zgodnie ze źródłem bezpośrednio zmienia renderowany wynik.

Moduł przechodzi przez grupy atrybutów produktu i pokazuje pierwsze pozycje aż do wartości ustawionej w polu Maksymalna ilość wyświetanych atrybutów. Limit dotyczy całej skróconej listy, a nie każdej grupy osobno.

W symulatorze użyto sześciu przykładowych cech, dzięki czemu możesz od razu sprawdzić wartości od 0 wzwyż.

Kliknięcie tekstu pod skróconymi atrybutami wyszukuje na stronie moduł z atrybutem data-module-name="product_attributes" i przewija do niego płynnie z przesunięciem około 150 px. W podglądzie po prawej możesz kliknąć przycisk i zobaczyć tę akcję na syntetycznej pełnej specyfikacji.

Moduł korzysta z natywnego makra Shopera product_attribute. Sam wygląd w źródle jest prosty: obramowanie górne i dolne, odstęp 20 px oraz atrybuty w jednym ciągu z dwukropkiem po nazwie cechy. JavaScript ponownie podpina obsługę przewijania po zdarzeniu PageManager.loaded.

Grafiki funkcyjne pozwalają wyświetlić grafikę z opcjonalnym nagłówkiem i odnośnikiem. Moduł sprawdzi się jako kafel promujący kategorię, usługę, korzyść lub inną ważną sekcję sklepu.

1. Wgraj grafikę w polu Image.
2. Ustaw Kolor tła modułu, jeżeli chcesz nadać kaflowi własne tło.
3. W polu Wprowadź treść do modułu wpisz nagłówek widoczny pod grafiką.
4. Jeżeli kafel ma prowadzić dalej, wpisz Tytuł odnośnika oraz Adres url.
5. Zapisz zmiany i sprawdź moduł na stronie.

• Jeżeli pole Wprowadź treść do modułu jest puste, nagłówek nie zostanie wyrenderowany.
• Odnośnik pojawia się tylko wtedy, gdy Adres url nie jest pusty.
• Nazwa wgranego pliku graficznego jest używana przez źródłowy Twig jako ALT i TITLE obrazka.
• Grafika zachowuje własne proporcje i ma maksymalną szerokość 100% kontenera.

Moduł renderuje pojedynczy kontener .modouther z obrazem oraz opcjonalnym blokiem .moditeminfo. Źródło nie zawiera własnego JavaScriptu.

Moduł Outlet automatycznie szuka tańszych egzemplarzy odpowiadających aktualnie oglądanemu produktowi. Jeżeli znajdzie dostępne produkty z dopiskiem OUTLET w nazwie, pokazuje sekcję „Kup taniej w outlecie!” z ceną, zdjęciem oraz wartością atrybutu „Stan produktu”.

1. Produkt bazowy powinien mieć zwykłą nazwę, np. Szara sofa narożna.
2. Tańszy egzemplarz utwórz jako osobny produkt i dodaj do jego nazwy słowo OUTLET, np. Szara sofa narożna OUTLET.
3. Produkt outletowy musi być dostępny do zakupu — pozycje z isBuyable = false są pomijane.
4. Dodaj atrybut Stan produktu. Jego wartość jest pokazywana bezpośrednio na liście outletowej.
5. Umieść moduł na karcie produktu w miejscu, w którym ma pojawić się sekcja outletowa.

Poniższe środowisko testowe korzysta z syntetycznych danych produktu i wyników SearchApi. Możesz przełączać scenariusze, zmienić nazwę produktu albo słowo kluczowe i od razu zobaczyć, czy źródłowy mechanizm znalazłby produkty outletowe.

Dla każdego dopasowanego produktu moduł pobiera główne zdjęcie, cenę podstawową, adres produktu i atrybut Stan produktu. Element jest oznaczony czerwonym badge’em OUTLET. Jeżeli nie ma żadnego pasującego produktu, sekcja nie jest dodawana.

Moduł pobiera nazwę aktualnego produktu z .product-section-title i jego ID z elementu .outletstorefront. Następnie używa SearchApi, a dla każdego dopasowania ProductFetcherApi. Jeśli ProductFetcher nie jest aktywny, kod rejestruje funkcję dynamicznie przez FeatureSystemApi.

W przesłanym źródle tworzony jest także DOM panelu #rightsection z maską, przyciskiem zamknięcia i tekstem informacyjnym. W tej wersji module.js nie zawiera jednak kodu, który otwiera ten panel lub wstawia do niego kliknięty produkt, dlatego instrukcja nie symuluje tej funkcji jako działającej.

Moduł wyświetla w nagłówku sklepu ikonę, numer telefonu i adres e-mail. Telefon oraz e-mail są od razu klikalne — prowadzą odpowiednio do linków tel: i mailto:.

Możesz też ustawić kolor obu odnośników, np. zgodny z głównym kolorem szablonu.

1. Wpisz numer telefonu w sekcji Numer telefonu.
2. Wpisz adres e-mail w sekcji Adres e-mail.
3. W sekcji Kolor odnośnika ustaw kolor danych kontaktowych.
4. W sekcji image dodaj grafikę / ikonę wyświetlaną obok danych.
5. Sprawdź efekt na desktopie i urządzeniu mobilnym.

Pola telefonu i e-maila obsługują tłumaczenia, więc w sklepie wielojęzycznym możesz podać inne wartości dla poszczególnych wersji językowych.

Po lewej znajduje się formularz odwzorowujący konfigurację modułu w Shoperze. Wszystkie cztery ustawienia są LIVE — ich zmiana od razu wpływa na prawy podgląd.

• Grafika jest renderowana w rozmiarze 40 × 40 px.
• Telefon i e-mail są ustawione jeden pod drugim.
• Numer telefonu otrzymuje link tel:.
• Adres e-mail otrzymuje link mailto:.
• Wybrany kolor dotyczy tekstu telefonu i e-maila.

• Kliknij numer telefonu i sprawdź, czy zawiera poprawny numer.
• Kliknij adres e-mail i zweryfikuj jego poprawność.
• Sprawdź czy grafika jest czytelna przy wymiarze 40 × 40 px.
• Upewnij się, że kolor odnośników ma odpowiedni kontrast względem tła nagłówka.
• Jeśli sklep jest wielojęzyczny, sprawdź wartości dla używanych języków.

Źródłowy Twig renderuje obraz z moduleConfig.graphicImage.paths.webp, telefon z moduleConfig.IMSocialTel, e-mail z moduleConfig.IMSocialEmail i kolor z moduleConfig.color. Moduł nie posiada własnego JavaScriptu.

Moduł wyświetla w stopce logotyp oraz dane kontaktowe firmy. Najczęściej użyjesz go do pokazania nazwy firmy, adresu, telefonu, adresu e-mail lub innych podstawowych informacji kontaktowych.

W aktualnej wersji moduł renderuje logotyp i treść z edytora WYSIWYG w jednym bloku stopki.

1. W sekcji Logotyp wybierz grafikę swojego logo.
2. W sekcji Tytuł oraz treść otwórz pole Wprowadź dane firmy.
3. Wpisz dane kontaktowe i zapisz treść.
4. Sprawdź podgląd na desktopie i telefonie.

Logo oraz treść obsługują tłumaczenia, więc w sklepie wielojęzycznym mogą mieć osobne wersje językowe.

Po lewej stronie znajduje się formularz odwzorowujący pola z edytora Shoper. Po prawej widzisz efekt modułu w stopce. Zmiana logotypu i zapis treści WYSIWYG aktualizują podgląd od razu.

W treści stopki możesz wpisać np.:

• pełną nazwę firmy,
• adres siedziby lub punktu,
• numer telefonu,
• adres e-mail,
• NIP / REGON lub godziny kontaktu, jeśli chcesz je pokazywać w stopce.

Treść możesz formatować w edytorze WYSIWYG, np. pogrubić nazwę firmy albo rozdzielić dane na kolejne linie.

• Sprawdź, czy logotyp jest czytelny i ma odpowiednie proporcje.
• Zweryfikuj numer telefonu, e-mail i adres.
• Sprawdź stopkę na desktopie i urządzeniu mobilnym.
• Jeżeli sklep jest wielojęzyczny, sprawdź wersję logotypu i treści dla każdego używanego języka.

Źródłowy Twig renderuje obraz z moduleConfig.image.paths.webp i treść z moduleConfig.footerinfo|raw. Pole title nie jest obecnie używane w szablonie modułu. Moduł nie posiada własnego JavaScriptu.

Moduł pozwala wyświetlić na karcie produktu listę dodatkowych produktów do dokupienia. Klient może zwiększać ilość wybranych dodatków przyciskami minus/plus, a moduł na bieżąco przelicza sumę produktu bazowego i wybranych dodatków.

Listę dodatków można przypisać na dwa sposoby: do konkretnego produktu albo do całej kategorii produktu. Same dodatki są pobierane z wybranej kolekcji Shopera.

1. Najpierw ustaw wygląd listy w sekcji Ustawienia podstawowe.
2. Wybierz sposób przypisania: do konkretnego produktu albo do kategorii.
3. W repeaterze wybierz produkt/kategorię bazową i kolekcję, z której mają zostać pobrane dodatki.
4. Ustaw nagłówek oraz teksty przycisku rozwijania i zwijania listy.
5. Sprawdź działanie ilości i podsumowania w środowisku testowym poniżej.

Konfigurator odwzorowuje kolejność źródłowego config.json. Po prawej masz syntetyczną kartę produktu, na której od razu widać listę dodatków, rozwijanie oraz przeliczanie sumy.

Każdy produkt z kolekcji jest renderowany jako osobny wiersz ze zdjęciem, nazwą, ceną oraz kontrolką ilości. JavaScript pilnuje, aby ilość nie spadła poniżej zera i po każdej zmianie przelicza podsumowanie.

W źródle suma startuje od ceny produktu bazowego i dodaje cena dodatku × wybrana ilość. Po dodaniu głównego produktu do koszyka moduł obsługuje również dołożenie zaznaczonych dodatków.

Pole maksymalna wysokość listy przed rozwinięciem ustala wysokość zwiniętej listy. Jeżeli produktów jest więcej, JavaScript dodaje przycisk rozwijania z tekstami ustawionymi osobno w repeaterze. Po rozwinięciu lista dopasowuje wysokość do całej zawartości.

Kolory mogą korzystać z wartości HEX albo ze zmiennych dostępnych w Shoperze, np. @primaryColor. W symulatorze taka zmienna jest odwzorowywana syntetycznym kolorem głównym.

Przy wielu regułach pamiętaj, że źródłowy Twig sprawdza osobno dopasowanie po produkcie i po kategorii. Jeżeli dana reguła nie pasuje do aktualnej karty produktu, jej lista nie zostanie wyrenderowana.

Moduł wstawia grafikę pomiędzy kafelki produktów na liście kategorii lub wyników produktów. Możesz wykorzystać ją jako baner promocyjny, odnośnik do kampanii albo wyróżnienie konkretnej akcji.

1. Włącz moduł.
2. Dodaj grafikę.
3. Ustaw link, który ma otwierać się po kliknięciu.
4. Wpisz nazwę zdjęcia — jest używana jako ALT i TITLE.
5. W polu Położenie wpisz numer produktu, za którym ma pojawić się grafika, np. 2 = za drugim produktem.

Zmień ustawienia po lewej stronie. Po prawej od razu zobaczysz, gdzie grafika trafi na przykładowej liście produktów.

Źródłowy Twig tworzy blok .im-imagelist i zapisuje pozycję jako moduleposition - 1. JS po zdarzeniu PageManager.loaded znajduje kafelki .product-tile, ogranicza indeks do zakresu aktualnej listy i przenosi grafikę bezpośrednio za wskazany produkt. Hover powiększa obraz do scale(1.05).

Lista kafelkowa kategorii tworzy czytelną siatkę graficznych odnośników do kategorii. Każdy kafelek może mieć własną grafikę, nazwę, link, ALT i tytuł obrazu.

Moduł automatycznie zmienia liczbę kolumn zależnie od szerokości ekranu, dlatego ten sam zestaw kategorii możesz ułożyć inaczej na komputerze, laptopie, tablecie i telefonie.

1. Dodaj kategorie w sekcji Slajdy / kategorie.
2. Dla każdej pozycji ustaw grafikę, nazwę i adres URL.
3. Ustaw liczbę kafelków w rzędzie osobno dla desktopu, laptopa, tabletu i telefonu.
4. Opcjonalnie dodaj tytuł modułu oraz zmień rozmiar i kolor nazw kategorii.

Poniższe środowisko testowe odwzorowuje formularz modułu oraz rzeczywiste zachowanie z Twig/CSS. Grafiki i kategorie są syntetyczne — służą tylko do sprawdzania konfiguracji bez połączenia ze sklepem.

Źródło używa czterech progów układu. Powyżej 1280 px działa ustawienie dla komputerów; do 1280 px — laptop; do 1080 px — tablet; do 767 px — telefon.

Przykładowo możesz ustawić 5 / 4 / 3 / 2, aby na dużym ekranie pokazać pięć kategorii w rzędzie, a na telefonie dwie.

• Kafelki mają zaokrąglenie 8 px i delikatną dolną linię.
• Po najechaniu obraz powiększa się do około 103%.
• Nazwa kategorii jest wyśrodkowana w polu o wysokości 45 px.
• Wyłączenie pozycji w liście powoduje pominięcie jej przy renderowaniu.

Moduł nie posiada własnego JavaScriptu — układ i hover są realizowane przez Twig oraz CSS. Lista jest renderowana tylko wtedy, gdy images zawiera pozycje. Dodatkowe klasy z pola Klasa CSS są dopisywane bezpośrednio do wrappera modułu.

Moduł ustawia wspólny wygląd i zachowanie boksów produktów na listach w sklepie. W jednym miejscu możesz skonfigurować nazwę produktu, wysokość ceny, krótki opis, warianty, etykiety, przycisk akcji oraz mini galerię zdjęć.

1. Ustaw nazwę produktu i wysokość obszaru ceny.
2. Zdecyduj, czy na listingu ma być widoczny krótki opis.
3. Skonfiguruj warianty: liczbę grup, kolejność, kolory oraz zwijanie do +N.
4. Ustaw etykiety promocji, nowości, czasu dostawy i bestsellera.
5. Jeżeli chcesz, włącz mini galerię zdjęć widoczną po najechaniu na produkt.

Podgląd używa syntetycznych produktów, dzięki czemu wszystkie opcje da się sprawdzić bez danych z realnego sklepu. Najedź na pierwszy produkt albo użyj przycisku Test hover. Przy włączonej mini galerii pojawią się miniatury. Jeżeli wariantów jest za dużo i działa automatyczne zwijanie, kliknij +N, aby sprawdzić rozwijaną chmurkę.

• Maksymalna liczba grup wariantów ogranicza widoczne grupy do 1–3.
• Priorytet ustala kolejność grup: kolor, radio i select.
• Automatycznie zwijaj przenosi nadmiarowe pozycje do przycisku +N.
• Wyświetlaj warianty typu select jako przyciski powoduje, że grupa select może wejść do prostych wariantów i podlega priorytetowi.
• Ukryj niedostępne warianty usuwa niedostępne pozycje zamiast pokazywać je z przezroczystością i przekreśleniem.

Po włączeniu mini galerii zdjęcia pojawiają się w dolnej części kafelka podczas hover. Pole Ilość wyświetlanych miniatur steruje limitem; jeżeli zdjęć jest więcej, ostatnią pozycję zastępuje kafelek +N.

Moduł Metody płatności wyświetla poziomy pasek grafik, np. logotypów dostępnych form płatności. Każdy element dodajesz w repeaterze jako osobną pozycję.

1. W sekcji Lista płatności dodaj pozycję dla każdej metody.
2. Wpisz Nazwę obrazka — zostanie użyta jako ALT i TITLE grafiki.
3. W polu grafika wgraj właściwy logotyp.
4. Powtórz dla kolejnych metod płatności. Moduł obsługuje maksymalnie 10 pozycji.

Poniższy konfigurator odwzorowuje źródłowy repeater i ma od razu wypełnione syntetyczne dane testowe, żeby można było zobaczyć działanie modułu bez przygotowywania własnych grafik.

• Używaj logotypów o podobnej wysokości i proporcjach.
• Nie dodawaj dużych zdjęć produktowych — ten moduł jest przeznaczony do niewielkich grafik / znaków metod płatności.
• Przy większej liczbie metod sprawdź wygląd także na telefonie, ponieważ źródłowy moduł nie definiuje osobnego mobilnego układu ani zawijania elementów.

Moduł informacyjny — parallax tworzy szeroką sekcję z grafiką w tle, opcjonalną nakładką, boxem z tytułem i podtytułem oraz przyciskiem CTA. Może służyć jako baner promocyjny, komunikat o dostawie, wyróżnienie kategorii albo sekcja wizerunkowa.

1. Wpisz unikalną klasę modułu — bez niej sekcja nie zostanie wyrenderowana.
2. Wgraj grafikę tła.
3. Ustaw wysokość sekcji osobno dla desktopu i mobile.
4. Wpisz tytuł, podtytuł i opcjonalny przycisk.
5. Ustaw pozycję boxa oraz jego tło, przezroczystość, border i zaokrąglenia.
6. Opcjonalnie włącz nakładkę na całe tło i efekt fixed background.

Symulator odwzorowuje ustawienia Shopera. Wszystkie pola wpływające na output są oznaczone jako LIVE. Jedynym elementem S jest techniczny infobox o unikalnej klasie.

Opcja Włącz efekt fixed background przełącza właściwość CSS background-attachment pomiędzy fixed i scroll. Grafika jest dodatkowo ładowana leniwie przez źródłowy JavaScript, gdy sekcja znajdzie się w pobliżu viewportu.

Dla szerokości do 991 px źródło używa osobnej wysokości sekcji i osobnej pozycji tła. Padding obszaru treści jest wtedy ustawiony na stałe na 24 px 20 px, a box korzysta z pola Padding boxa na mobile zamiast czterech osobnych paddingów desktopowych.

Grafika tła jest przekazywana do atrybutu data-bg. Skrypt tworzy obiekt Image i ustawia background-image dopiero po wejściu sekcji w obszar około 300 px od viewportu. Po załadowaniu dodaje klasę is-bg-loaded. Moduł ponownie inicjalizuje lazy loading po zdarzeniu PageManager.loaded w Storefront.

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.

Moduł rozbudowuje standardową galerię produktu o lokalny film MP4. Film jest pobierany bezpośrednio z pierwszego znacznika <video> znalezionego w opisie produktu i dodawany do tej samej listy mediów co zdjęcia.

Możesz ustawić miejsce filmu w galerii, pozycję miniaturek, strzałki na desktopie i mobile, wysokość filmu oraz natywne przyciski sterowania.

1. W opisie produktu przejdź do edycji HTML.
2. Dodaj znacznik video z bezpośrednim adresem pliku MP4 w atrybucie src.
3. Zapisz opis produktu i włącz opcję Włącz lub wyłącz video w galerii.
4. Ustaw numer w polu Kolejność wyświetlanego video.

Parser aktualnego modułu szuka pierwszego znacznika <video> i odczytuje wartość zapisaną w formie src="...".

Pozycja miniaturek działa na desktopie: po lewej, po prawej albo pod zdjęciem. Na mobile źródłowy slider miniaturek jest ukryty.

Kolejność video określa miejsce filmu względem zdjęć. Wartość 1 oznacza film przed pierwszym zdjęciem. Jeżeli wpiszesz numer większy niż liczba zdjęć, film zostanie dopisany na końcu.

Wysokość video działa na desktopie. Na ekranach do 575 px źródłowy CSS wymusza automatyczną wysokość filmu.

Po opuszczeniu widocznego obszaru film jest pauzowany i jego czas jest resetowany do początku. To samo dzieje się po ukryciu karty przeglądarki. Pole Szerokość filmiku również nie jest aktualnie używane przez kod renderujący.

• Sprawdź, czy opcja video w galerii jest włączona.
• Upewnij się, że w opisie produktu istnieje znacznik <video>.
• Adres filmu musi znajdować się bezpośrednio w atrybucie src="..." elementu video.
• Dla wartości kolejności 0 lub liczby ujemnej źródłowy Twig nie wstawia video do galerii.
• Jeżeli używasz znacznika <source> wewnątrz video zamiast atrybutu src na samym <video>, obecny parser go nie odczyta.

Moduł buduje wspólną listę mediaList ze zdjęć produktu i opcjonalnego video. Miniatura filmu jest oznaczona ikoną play. JavaScript LocalVideoAutoplay używa IntersectionObserver z progiem 0.6, obserwuje elementy [data-video-slide] i integruje się ze Storefront przez zdarzenia PageManager.loaded oraz PageManager.beforeDestroy.

Nowa galeria produktowa [Youtube] zastępuje standardową galerię produktu wersją, która może wstawić film YouTube pomiędzy zdjęcia produktu. Klient nadal korzysta z miniaturek, strzałek i pełnoekranowego podglądu zdjęć.

1. Dodaj film YouTube do opisu produktu jako kod iframe.
2. Upewnij się, że adres iframe ma format YouTube /embed/ID_FILMU.
3. W module włącz opcję Włącz lub wyłącz video w galerii.
4. Ustaw pozycję filmu polem Kolejność wyświetlanego video.
5. Dopasuj wysokość filmu i pozostałe opcje odtwarzania.

• Pozycja miniaturek zmienia układ desktopowy: lewa / prawa / pod zdjęciem.
• Strzałki nawigacji mają osobne ustawienia dla desktopu i mobile.
• Opis zdjęcia dotyczy widoku pełnoekranowego; kliknij duże zdjęcie w symulatorze.
• Kolejność video decyduje, przed którym zdjęciem ma zostać wstawiony film.

Autoplay: Twig dodaje autoplay=1&mute=1 po zaznaczeniu pola. Niezależnie od tego JavaScript modułu obserwuje slajd z filmem przez IntersectionObserver i ładuje widoczne video z autoplay.

Loop: dodawane są parametry loop=1 i playlist=ID_FILMU.

• Sprawdź, czy w opisie produktu znajduje się iframe.
• Sprawdź, czy src zawiera fragment embed/.
• Moduł bierze pierwszy iframe znaleziony w opisie.
• Przy wartości kolejności większej od liczby zdjęć film jest dopisywany na końcu.
• Przy kolejności 0 lub ujemnej aktualna logika źródłowa nie dodaje filmu do listy.

Moduł zastępuje standardowy układ listy produktów bardziej elastyczną siatką. Możesz osobno ustawić liczbę produktów w wierszu na telefonie, tablecie, laptopie i desktopie, wybrać informacje widoczne na kafelku produktu oraz wstawiać banery promocyjne bezpośrednio pomiędzy produkty.

Dodatkowo moduł może pokazywać przycisk Powiększ widok, który przełącza listę na szerszy układ i zapamiętuje wybór użytkownika w przeglądarce.

1. Ustaw liczbę produktów w wierszu dla czterech zakresów urządzeń.
2. W sekcji Kafelek produktu zostaw tylko informacje, które chcesz pokazywać klientowi.
3. Jeżeli chcesz baner wśród produktów, włącz Baner domyślny, dodaj grafikę i ustaw jego pozycję oraz szerokość.
4. Dla wybranych kategorii możesz dodać osobne banery w repeaterze Banery dla kategorii.
5. Na końcu sprawdź sposób dopasowania grafiki, pozycję, padding, efekt hover i radius.

Lewy panel odwzorowuje kolejność i typy pól z konfiguracji Shoper. Zmiany pól oznaczonych LIVE są od razu nanoszone na syntetyczną listę produktów po prawej. Pole wyboru kategorii ma oznaczenie Konfiguracja, ponieważ służy do technicznego dopasowania kategorii Shopera.

Pozycja 0 oznacza baner przed pierwszym produktem. Pozycja 2 oznacza baner po drugim produkcie. Jeżeli ustawiona pozycja jest większa niż liczba produktów na stronie, baner trafia na koniec listy.

Liczba kolumn określa szerokość banera w siatce. Jeżeli baner ma zajmować więcej kolumn niż mieści się na danym urządzeniu, Twig rozciąga go na cały wiersz. Liczba wierszy określa wysokość zajmowaną w gridzie.

Baner domyślny i banery kategorii mogą mieć osobny zakres dat. Możesz też ograniczyć je wyłącznie do pierwszej strony listy. Symulator porównuje daty z przykładowym dniem 04.09.2026, dzięki czemu da się sprawdzić warunki bez podłączania sklepu.

Po włączeniu tej opcji nad listą pojawia się przycisk z własną grafiką, tekstem i kolorem. Kliknięcie przełącza klasy fwopened / fwhidden, aktualizuje opis przycisku i zapisuje stan w localStorage, dzięki czemu wybrany widok może zostać odtworzony przy kolejnym wejściu.

• Sprawdź liczbę kolumn na Mobile, Tablet, Laptop i Desktop.
• Zweryfikuj, czy kafelek nie pokazuje zbędnych informacji.
• Przetestuj baner domyślny poza kategorią oraz baner przypisany do kategorii.
• Sprawdź pozycję 0 oraz pozycję po kilku produktach.
• Przetestuj baner na pierwszej i drugiej stronie listy.
• Najedź na baner, jeśli efekt powiększenia jest włączony.
• Kliknij przycisk powiększenia widoku i sprawdź oba teksty.

Produkty i typy sortowania są pobierane przez ObjectApi. Siatka korzysta z natywnych makr Storefront: list_grid, pagination, sort_select oraz product_tile. Banery są wstawiane bezpośrednio do szablonu elementów listy, dzięki czemu zajmują realne komórki grida.

Jedynym polem sklasyfikowanym jako Konfiguracja jest wybór kategorii w repeaterze banera kategorii. Pozostałe pola wpływają na output HTML/CSS/JS i zgodnie ze standardem source-trace są Live.

Moduł wyświetla na karcie produktu specyfikację z grupami atrybutów pobranymi z Shopera. Pozwala dodać natywny tytuł akordeonu, ograniczyć wysokość długiej specyfikacji oraz dać klientowi przycisk rozwijania i zwijania treści.

1. Ustaw tytuł modułu, np. Specyfikacja.
2. Jeśli specyfikacja jest długa, włącz możliwość zwijania i ustaw maksymalną wysokość, np. 320 px.
3. Ustaw treść przycisków dla stanu rozwiniętego i zwiniętego.
4. Zdecyduj, czy cechy mają być zawsze w jednej kolumnie oraz czy pokazywać odstępy i nazwy grup.

Symulator poniżej odwzorowuje pola z konfiguracji Shoper. Wszystkie ustawienia wpływające na renderowany moduł są oznaczone jako LIVE. Fioletowe S dotyczy wyłącznie informacji o danych zarządzanych poza modułem.

Po włączeniu opcji zwijania moduł ogranicza wysokość treści do wartości z pola Maksymalna wysokość specyfikacji przed rozwinięciem. Na dole pojawia się gradient i przycisk. Po kliknięciu treść rozwija się do pełnej wysokości, a tekst przycisku zmienia się na wariant dla stanu rozwiniętego.

Domyślnie atrybuty mogą być prezentowane w układzie wielokolumnowym zależnym od stylów szablonu. Opcja Wyświetlaj specyfikację w jednej kolumnie na wszystkich urządzeniach wymusza jedną kolumnę. Na małych ekranach moduł i tak przechodzi do jednej kolumny.

Nazwa grupy jest renderowana tylko wtedy, gdy jednocześnie włączone są odstępy między grupami i wyświetlanie nazw grup.

Moduł korzysta z natywnego akordeonu Storefront oraz makra product_attribute. Jeśli w sklepie działa flaga dev_storefront_ai_seo, atrybuty są dodatkowo dodawane do danych strukturalnych produktu jako additionalProperty.

Nowy opis produktu wyświetla opis aktualnego produktu pobrany z ObjectApi i pozwala opcjonalnie zamknąć go w rozwijanym akordeonie. Możesz wyświetlić własny tytuł, ustawić wysokość zwiniętej treści oraz teksty przycisku rozwijania i zwijania.

1. Zdecyduj, czy nad opisem ma być widoczny tytuł modułu.
2. Jeżeli opis ma się zwijać, włącz opcję rozwijania.
3. Ustaw wysokość widocznej części opisu oraz tekst przycisku dla stanu zwiniętego i rozwiniętego.
4. Wybierz początkowy stan modułu.
5. Na końcu wybierz, czy wygląd treści ma wynikać tylko z edytora opisu, czy również ze stylu szablonu sklepu.

Poniższy konfigurator odwzorowuje pola z config.json w kolejności źródłowej. Wszystkie pola wpływają na realny output Twig/CSS modułu, dlatego są oznaczone jako LIVE.

Podgląd używa syntetycznego produktu i dłuższego opisu testowego, żeby od razu było widać działanie ograniczenia wysokości, przycisku rozwijania i trybu wyglądu treści.

Źródłowy moduł korzysta z natywnego h-accordion Shopera. Gdy zwijanie jest aktywne, wysokość treści podczas stanu zwiniętego jest ustawiana przez pole „Maksymalna wysokość opisu przed rozwinięciem”. Po kliknięciu treść przechodzi do pełnej wysokości, a tekst przycisku zmienia się na wartość z pola „Treść rozwiniętego opisu”.

Jeżeli tytuł modułu jest wyłączony, konfiguracja źródłowa blokuje możliwość normalnego zwijania i opis pozostaje otwarty.

Opcja „Wygląd treści modułu określa” zmienia klasę renderowaną przez Twig. W trybie Tylko ustawienia edytora tekstu dodawana jest klasa resetcss. W trybie Edytor tekstu i styl szablonu sklepu treść może dziedziczyć typografię i inne style aktualnego szablonu.

Treść opisu nie jest wpisywana w ustawieniach tego modułu. Twig pobiera aktualny produkt przez ObjectApi.getProduct(product_id) i renderuje jego product.description. Jeżeli produkt nie ma opisu, moduł nie wyświetla sekcji opisu. Ten sam opis jest również używany w danych strukturalnych JSON-LD po usunięciu znaczników HTML.

Nowy slider z nawigacją wyświetla serię klikalnych grafik w jednym sliderze. Klient może przełączać slajdy przez tekstową nawigację pod grafiką oraz — na desktopie — strzałkami po bokach.

1. W sekcji Slajdy dodaj grafikę.
2. Uzupełnij Nazwę slajdu — będzie widoczna w nawigacji tekstowej.
3. Opcjonalnie wpisz Link URL, tytuł grafiki i tekst ALT.
4. Zostaw włączony przełącznik Aktywny slajd dla pozycji, które mają być widoczne.

Poniżej możesz przećwiczyć konfigurację niemal tak samo jak w edytorze Shopera. Zmiany pól oznaczonych Live są nanoszone bezpośrednio na podgląd po prawej stronie.

Nawigacja tekstowa tworzy pod sliderem zakładki z nazw slajdów. Aktywna zakładka ma podkreślenie w wybranym kolorze. Strzałki działają na desktopie i są ukrywane na małych ekranach zgodnie z klasami użytymi w źródle modułu.

Po włączeniu Auto-scroll ustaw czas wyświetlania jednego slajdu na co najmniej 3 sekundy. Ręczne kliknięcie nawigacji lub strzałki zatrzymuje bieżący cykl i uruchamia go ponownie.

• Sprawdź, czy każdy aktywny slajd ma grafikę.
• Kliknij nazwy w nawigacji i upewnij się, że otwierają właściwe slajdy.
• Na desktopie sprawdź obie strzałki.
• Przełącz podgląd na Mobile i upewnij się, że grafika jest czytelna, a nawigację można przewijać poziomo.
• Jeśli używasz autoplay, odczekaj ustawiony czas i sprawdź automatyczną zmianę slajdu.

Moduł renderuje aktywne slajdy w poziomym kontenerze ze scroll-snap. JavaScript synchronizuje pozycję grafiki, aktywną zakładkę oraz widoczność strzałek. Autoplay korzysta z atrybutu autoplay i data-interval, a przy ustawieniu systemowym prefers-reduced-motion: reduce nie jest uruchamiany.

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.

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

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.

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

Popularne kategorie wyświetlają klikalne grafiki kategorii w sliderze. Każdy element składa się z grafiki, nazwy oraz opcjonalnego linku prowadzącego do odpowiedniej kategorii.

1. W sekcji Slajdy dodaj kategorie i ustaw dla każdej grafikę, nazwę oraz link.
2. Wybierz Styl karuzeli.
3. W razie potrzeby włącz nawigację lub auto-scroll.
4. Jeżeli chcesz uzyskać kafelki z tłem, włącz Dodaj tło pod grafiką i ustaw kolor, zaokrąglenie oraz efekt hover.

Poniższy symulator odwzorowuje pola z aktualnego config.json oraz zachowanie wynikające z Twig/CSS. Wszystkie widoczne ustawienia wpływają na output modułu, dlatego są oznaczone jako LIVE.

Po włączeniu tła moduł dodaje warstwę pod grafiką. Zaokrąglenie 50% daje okrągłe tło. Przy najechaniu źródłowy CSS animuje obramowanie wokół kafelka za pomocą conic-gradient; jego kolor i grubość ustawisz osobno.

W wariancie Wiele slajdów liczba elementów w rzędzie jest sterowana bezpośrednio przez konfigurację slidera: 1 na mobile, 2 od 768 px, 3 od 1200 px i 4 od 1920 px. Pozostałe dwa warianty pracują po jednym slajdzie.

Moduł korzysta z natywnego komponentu h-slider Shopera. Tylko aktywne elementy z listy grafik są renderowane. Pole Klasa CSS jest emitowane zarówno na wrapperze modułu, jak i na photo-slider. JS modułu nie buduje własnego slidera — jedynie oznacza znalezione instancje klasą gotowości po inicjalizacji oraz po zdarzeniu PageManager.loaded.

Przyklejony koszyk na karcie produktu dodaje na telefonie dolny pasek z aktualną ceną i akcją dodania produktu do koszyka. Pasek pojawia się dopiero po przewinięciu strony poniżej oryginalnego modułu akcji produktu.

Dzięki temu klient nadal ma dostęp do najważniejszej akcji zakupowej, nawet gdy główny przycisk koszyka zniknie już z ekranu.

1. Włącz moduł.
2. Ustaw rozmiar i kolor ceny widocznej w dolnym pasku.
3. Jeżeli chcesz, dopasuj również ustawienia obrazu i nazwy produktu — ich efekt możesz sprawdzić w trybie diagnostycznym konfiguratora.
4. Na telefonie przewiń kartę produktu poniżej głównego przycisku „Dodaj do koszyka”. Wtedy pasek powinien wysunąć się od dołu.

Konfigurator poniżej odwzorowuje kolejność i typy pól z modułu Shoper. Po prawej jest syntetyczna karta produktu, dzięki której możesz od razu sprawdzić moment pojawienia się sticky paska oraz zmianę ceny.

Moduł oblicza dolną krawędź źródłowej sekcji .modules-actions. Sticky zostaje pokazany dopiero wtedy, gdy pozycja przewinięcia strony przekroczy tę krawędź.

W symulatorze możesz przełączyć się między Mobile — przed progiem i Mobile — sticky, a także przewijać samą demonstracyjną kartę produktu.

Źródłowy JavaScript klonuje do paska dwa elementy z realnej karty produktu: akcje koszyka oraz blok ceny. Zmiany ceny są nasłuchiwane przez event product.priceChanged oraz dodatkowo przez MutationObserver.

Przycisk Zmień cenę demo w konfiguratorze pozwala sprawdzić ten mechanizm na danych testowych bez połączenia ze sklepem.

• Źródło akcji: .modules-actions.
• Źródło ceny: .imodules-gridppage .js__product-price-gross .product-price.
• Breakpoint działania: window.innerWidth <= 767.
• Lifecycle Storefront: PageManager.loaded montuje moduł, a PageManager.beforeRendered go niszczy.
• Przy klonowaniu usuwane są identyfikatory id, aby nie powielać ich w DOM.

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.

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.

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.

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.

Źródło ma fallback w <noscript>. Jeżeli JavaScript jest wyłączony, grafika WebP zostaje ustawiona bezpośrednio jako tło stopki.

Zadzwoń i zamów dodaje na froncie prosty komunikat kontaktowy: grafikę/ikonę, własny tekst oraz klikalny numer telefonu. Najczęściej można go wykorzystać na karcie produktu, np. pod przyciskiem dodawania do koszyka.

1. Wgraj małą grafikę lub ikonę kontaktową.
2. Wpisz numer telefonu oraz tekst, który ma pojawić się przed numerem.
3. Dopasuj rozmiary i kolory tekstu do szablonu sklepu.
4. Sprawdź efekt w podglądzie Desktop/Mobile poniżej.

Na ekranach o szerokości do 575 px moduł wymusza rozmiar 14 px zarówno dla tekstu komunikatu, jak i numeru telefonu. Dlatego wartości rozmiaru ustawione w panelu wpływają przede wszystkim na desktop.

Numer telefonu jest renderowany jako klikalny link tel:. Widoczny tekst otrzymuje prefiks +48. Grafika jest renderowana z ALT i TITLE „Kontakt”. Moduł nie ma własnego JavaScriptu.

Moduł Zalety wyświetla rząd prostych kafelków z ikoną, nagłówkiem i opisem. Sprawdza się do pokazania najważniejszych przewag sklepu, np. dostawy, płatności, zwrotów albo wsparcia.

1. W sekcji Ustawienie zalet ustaw odstępy, padding kafelków, maksymalną szerokość oraz rozmiary tekstu.
2. W sekcji Lista zalet rozwiń każdą pozycję i uzupełnij nagłówek, opis oraz ikonę.
3. Dodaj kolejne pozycje przyciskiem Dodaj. Moduł obsługuje maksymalnie 10 zalet.
4. Sprawdź efekt w widoku Desktop i Mobile.

Konfigurator poniżej odwzorowuje pola modułu ze źródłowego config.json. Zielone pola LIVE zmieniają prawy podgląd natychmiast. Fioletowe S oznaczają pola, które istnieją w konfiguracji, ale aktualny kod modułu ich nie wykorzystuje.

Na desktopie zalety są ułożone obok siebie i wykorzystują ustawiony odstęp oraz rozmiary fontów. Poniżej 768 px źródło przełącza moduł w poziomo przewijany pasek: każdy kafelek ma około 64% szerokości, odstęp jest ustawiony na 10 px, tytuł ma 17 px, a opis 14 px. Ikony są na mobile delikatnie pomniejszone.

• Każda zaleta ma ikonę, krótki nagłówek i zwięzły opis.
• Na desktopie kafelki mieszczą się bez niepotrzebnego ścisku.
• Na mobile można wygodnie przesuwać zalety poziomo.
• Teksty nie są zbyt długie — szczególnie przy 4–6 zaletach.

Moduł nie korzysta z dodatkowego JavaScriptu. Układ i responsywność są realizowane przez CSS osadzony w Twig. Na hoverze desktopowym dolna krawędź kafelka przyjmuje kolor var(--primaryColor), a ikona skaluje się do 110%.

Zamów do X, a wyślemy jeszcze dzisiaj to moduł informacyjny na karcie produktu, który pokazuje klientowi odliczanie do dzisiejszej godziny wysyłki.

Jeżeli klient zdąży złożyć zamówienie przed ustawioną godziną graniczną, widzi aktywny licznik. Gdy czas minie albo aktualny dzień nie obsługuje wysyłki, moduł przełącza się na komunikat zapasowy.

1. Dodaj opcjonalną ikonkę modułu.
2. Uzupełnij teksty: Informacja nr 1, Informacja nr 2 i Informacja nr 3.
3. Ustaw godziny wysyłki od poniedziałku do soboty.
4. Dopasuj marginesy, wielkość czcionki oraz dolne obramowanie.
5. Zapisz moduł i sprawdź efekt na produkcie, który ma ustawioną dostawę 1 dzień.

• Skrypt odświeża licznik co 1 sekundę.
• W niedzielę oraz w święta stałe moduł pokazuje komunikat zapasowy.
• Jeżeli dla danego dnia ustawisz godzinę graniczną i bieżąca godzina jej jeszcze nie przekroczyła, w podglądzie zobaczysz aktywne odliczanie.
• Jeżeli produkt nie ma dostawy 1 dzień, moduł nie zostanie wyrenderowany.

Źródłowy skrypt inicjalizuje elementy .delivery-time i przy ponownym załadowaniu widoku Storefront czyści poprzedni timer, a następnie uruchamia go ponownie. Dzięki temu licznik nie duplikuje się po przeładowaniach sekcji.

Koszyk Jednoetapowy - Ustawienia dopasowuje wygląd jednoetapowego koszyka i pozwala przypisywać własne ikonki do konkretnych metod dostawy oraz płatności. Dodatkowo może wyświetlać ikonki wybranych subpłatności Shopera, m.in. kart, Google Pay, BLIK i PayPo.

1. W sekcji Ikonki dostaw dodaj pozycję repeatera.
2. Wpisz ID dostawy lub kilka ID po przecinku.
3. Wgraj ikonę, która ma być widoczna przy tych metodach.
4. Powtórz dla kolejnych przewoźników.

W dostarczonym HTML koszyka występują m.in. ID: 1 — InPost Paczkomaty 24/7, 2 — InPost Kurier, 6 — DHL Kurier i 8 — Odbiór osobisty.

1. W sekcji Ikonki płatności dodaj pozycję.
2. Wpisz ID głównej płatności.
3. Wgraj odpowiadającą jej grafikę.

Dostarczony HTML sklepu zawiera tylko płatność Gotówka (ID 1). W środowisku testowym dodałem jeszcze trzy przykładowe płatności, żeby można było normalnie sprawdzać różne przypisania ikon.

Poniższy konfigurator odwzorowuje formularz źródłowy Shopera i cały kontekst koszyka ze screena/HTML. Lewa strona zachowuje strukturę sekcji oraz repeaterów z config.json, a po prawej od razu widać, do których metod trafiają wybrane ikonki.

Po włączeniu opcji Włącz ikonki subpłatności moduł korzysta ze stałego zestawu identyfikatorów w źródle: 1500-18 — karty, 1512-18 — Google Pay, 509-18 — BLIK oraz 8888-18 — PayPo. Pole „ID głównej płatności” wskazuje bramkę, np. Autopay lub Przelewy24, do której należą te subpłatności.

Źródłowy Twig przypisuje grafiki przez selektory CSS bazujące na atrybucie controlid. Dla dostaw szuka shipping-ID, a dla głównych płatności payment-ID-ID. Osobny skrypt korzysta z basketShippingsApi po zdarzeniu basket.initialized; ta część nie posiada pól konfiguracyjnych i nie wymaga ustawień klienta.

Moduł wyświetla na produktach etykiety tworzone na podstawie atrybutów produktu. Każda aktywna reguła wskazuje nazwę atrybutu, opcjonalnie wymaganą wartość oraz wygląd etykiety. Reguły mogą działać osobno na liście produktów i na karcie produktu.

Moduł może wyświetlić do 30 aktywnych reguł etykiet. Każda reguła jest sprawdzana niezależnie, dlatego jeden produkt może otrzymać kilka etykiet.

• Reguła bez nazwy atrybutu nie jest przekazywana do JavaScriptu.
• Nieaktywny wpis repeatera nie jest używany.
• Atrybut z pustą wartością nigdy nie tworzy etykiety.
• Każda pasująca reguła tworzy własną etykietę; kod nie usuwa duplikatów między regułami.
• Jeżeli JSON konfiguracji lub danych produktu jest niepoprawny, moduł bezpiecznie zwraca pustą listę i nie renderuje etykiet.
• Ikona jest ładowana leniwie i ma pusty ALT, ponieważ pełni funkcję dekoracyjną przy tekście etykiety.
• Na mobile popover ogranicza szerokość do szerokości viewportu.

1. Wybierz produkt, który ma atrybut o znanej nazwie i niepustej wartości.
2. Dodaj regułę tylko z nazwą atrybutu i włącz wyświetlanie w miejscu, które testujesz.
3. Sprawdź, czy etykieta pojawia się bez kontroli wartości.
4. Włącz kontrolę wartości i podaj wartość zgodną z produktem — etykieta nadal powinna być widoczna.
5. Zmień wymaganą wartość na inną — etykieta powinna zniknąć.
6. Sprawdź tekst, kolory i opcjonalną ikonę SVG.
7. Włącz informację, dodaj treść i sprawdź otwieranie, zamykanie kliknięciem poza etykietą oraz klawiszem Escape.
8. Jeżeli korzystasz z obu miejsc, wykonaj osobny test na liście produktów i na karcie produktu.

Większość opisów ustawień została przeniesiona bezpośrednio do oznaczeń przy polach konfiguratora. Dzięki temu klient nie musi czytać osobnych tabel przed konfiguracją.

Oznaczenia: niebieskie Konfiguracja ⓘ = ustawienie konfiguracyjne w Shoperze; zielone Live ⓘ = ustawienie, którego efekt można od razu zobaczyć po prawej stronie. Jedno pole ma zawsze tylko jedno oznaczenie. Kliknięcie oznaczenia otwiera pełny opis pola.

Boxy produktowe PRO pozwalają wstawić w dowolnym miejscu treści sklepu pusty element HTML, który moduł automatycznie uzupełni produktami pobranymi ze Storefront API.

Każdy box może działać jako siatka albo slider i może mieć własne źródło produktów, limit, liczbę produktów w rzędzie, rozmiar zdjęć oraz odstępy.

1. W miejscu, w którym ma pojawić się box, przejdź do edycji HTML treści/WYSIWYG.
2. Najwygodniej użyj generatora kodu poniżej: wybierz źródło produktów, wpisz ID lub frazę, ustaw limit i opcjonalnie slider.
3. Kliknij Generuj i kopiuj kod, a następnie wklej gotowy element HTML w wybranym miejscu.

Nie musisz ręcznie składać atrybutów data-*. Ustaw źródło produktów i parametry poniżej, a generator przygotuje pełny element HTML oraz skopiuje go po kliknięciu jednego przycisku.

Symulator poniżej odwzorowuje sekcje i typy pól z konfiguracji Shoper. Zielone LIVE zmieniają prawy podgląd. Fioletowe S oznaczają ustawienia techniczne albo pola, których aktualny kod modułu jeszcze nie wykorzystuje w renderowaniu — ich działania nie udajemy.

Moduł buduje kafelek na bazie natywnego elementu product-tile. Możesz włączyć m.in. ulubione, SKU, kod producenta, nazwę producenta, cenę jednostkową, przycisk do koszyka, status dostępności albo wymusić przycisk „Zobacz produkt”.

Jeżeli produkt nie ma stockId, JS również przechodzi na link „Zobacz produkt” zamiast buy-button.

Grid używa CSS Grid, a slider własnego viewportu z poziomym przewijaniem i scroll-snap. Breakpointy w źródle to: 768 px tablet, 1024 px laptop i 1280 px desktop.

Ustawienia globalne są tylko fallbackiem. Jeśli konkretny box ma własne data-mobile-items, data-tablet-items, data-laptop-items, data-desktop-items albo data-gap, wartości z HTML mają pierwszeństwo.

Jeżeli przez pomyłkę ustawisz kilka atrybutów źródłowych jednocześnie, JS sprawdza je w kolejności: custom → category → collection → related → news → promo → bestseller → potd → search. Pierwszy znaleziony typ wygrywa.

Produkty są pobierane przez ProductFetcherApi. Jeżeli API nie jest jeszcze dostępne, moduł próbuje dynamicznie zarejestrować feature ProductFetcher. Dla data-search używany jest SearchApi lub awaryjnie ProductSearchApi.

• Sprawdź, czy HTML boxu pasuje do globalnego selektora, domyślnie .productbox.
• Upewnij się, że box ma dokładnie jedno prawidłowe źródło produktów.
• Sprawdź grid i slider na telefonie oraz desktopie.
• Zweryfikuj limit produktów i liczbę produktów w rzędzie.
• Przetestuj produkt z wariantem możliwym do zakupu oraz produkt bez stockId.
• Jeśli box może zwrócić pusty wynik, sprawdź zachowanie opcji „Ukryj box, gdy nie ma produktów”.

Moduł buduje responsywną sekcję contentową z trzema częściami: treścią po lewej, dużym zdjęciem pośrodku oraz treścią z opcjonalnym zdjęciem po prawej.

Najlepiej sprawdza się jako rozbudowana sekcja wizerunkowa lub informacyjna, w której tekst jest przeplatany dużymi zdjęciami. Treści po lewej i po prawej edytujesz przez WYSIWYG, a kształt obu grafik możesz dopasować niezależnymi promieniami narożników.

1. W Ustawieniach ogólnych ustaw maksymalną szerokość sekcji oraz odstępy.
2. W sekcji Lewa kolumna wpisz treść przez edytor WYSIWYG.
3. Dodaj wymagane Zdjęcie środkowe i ustaw jego tekst ALT.
4. W Prawej kolumnie uzupełnij treść i — jeśli potrzebujesz — dodaj drugie zdjęcie.
5. Dla obu zdjęć możesz osobno ustawić zaokrąglenie każdego z czterech narożników.

Panel po lewej odwzorowuje kolejność i typy pól z edytora Shoper. Wszystkie ustawienia tego modułu są oznaczone jako Live, ponieważ zmieniają renderowaną sekcję albo jej właściwości bezpośrednio w podglądzie.

Na dużym ekranie moduł korzysta z trzech kolumn. Przy mniejszej szerokości układ przechodzi najpierw w dwie kolumny, a na telefonie w jedną kolumnę.

Na mobile kolejność wynika bezpośrednio ze struktury modułu: lewa treść → zdjęcie środkowe → prawa treść → zdjęcie prawe. Obrazy nie są sztucznie kadrowane — źródło używa width: 100% i height: auto, więc zachowują własne proporcje.

• Sprawdź, czy oba bloki tekstowe nie są zbyt długie względem grafik.
• Przełącz podgląd na Mobile i zweryfikuj kolejność elementów oraz odstępy.
• Sprawdź zaokrąglenia każdego narożnika obu zdjęć.
• Uzupełnij sensowne teksty ALT dla używanych grafik.
• Jeżeli prawe zdjęcie nie jest potrzebne, pozostaw je puste — prawa treść nadal będzie działać.

Moduł wyświetla w jednym rzędzie linki do profili w social media — np. Instagram, Facebook, YouTube czy TikTok. Każdy element może mieć własną ikonę, nazwę i adres URL.

1. W sekcji Lista social media rozwiń wybrany element lub kliknij Dodaj element social media.
2. Wgraj Ikonę.
3. Wpisz Nazwę, np. Instagram.
4. W polu Adres URL podaj pełny adres profilu, np. https://instagram.com/twojprofil.
5. Powtórz dla pozostałych serwisów i zapisz moduł.

Poniższy konfigurator odwzorowuje formularz modułu. Możesz dodawać i usuwać pozycje, zmieniać nazwę i URL oraz lokalnie podmieniać ikonę.

Jeżeli element ma adres URL, ale nie ma wgranej ikony, moduł wyświetli w jej miejscu nazwę elementu. Dzięki temu link nadal pozostanie widoczny i klikalny.

• Sprawdź, czy każdy element ma poprawny adres URL.
• Upewnij się, że nazwy odpowiadają serwisom i są czytelne.
• Jeżeli używasz ikon, najlepiej przygotuj je w zbliżonych wymiarach.
• Na mobile sprawdź, czy zestaw ikon mieści się w nagłówku — źródłowy moduł zmniejsza odstęp między elementami z 12 px do 8 px.

Na froncie renderowane są tylko elementy z adresem URL. Link ma target="_blank" oraz rel="noopener noreferrer". Nazwa jest używana w aria-label, title i alt ikony.

Poniżej każda sekcja jest pokazana w jednym, stałym układzie: opis po lewej, przykładowe ustawienia na środku i — tam, gdzie ma to sens — dynamiczna wizualizacja po prawej. Ustawienia techniczne, takie jak SEO, nie dostają sztucznego podglądu wizualnego.

• Otwórz każdą kategorię 1 poziomu i sprawdź właściwy wariant submenu.
• Zweryfikuj przełączanie kategorii 2 i 3 poziomu.
• Sprawdź osobno Nowości, Promocje, Bestsellery i Marki, jeśli są aktywne.
• Przetestuj badge, grafiki, linki po prawej stronie i produkty.
• Na mobile przejdź minimum dwa poziomy w dół i sprawdź poprawność powrotu.

Nowe kolekcje z markerami łączą dużą grafikę kolekcji z markerami wskazującymi konkretne produkty oraz sliderem produktów z tej samej kolekcji. Na desktopie możesz najechać marker lub kafelek produktu — oba elementy zostają ze sobą powiązane.

1. Wybierz kolekcję i wgraj główną grafikę.
2. W sekcji Markery dodaj produkt oraz ustaw jego pozycję procentowo od góry i od lewej strony grafiki.
3. Ustaw liczbę produktów w sliderze i liczbę produktów w rzędzie dla poszczególnych urządzeń.
4. Opcjonalnie włącz własny tytuł, opis i link do całej kolekcji.
5. Dostosuj elementy kafelka produktu w sekcji Kafelek produktu.

Podgląd korzysta z syntetycznej kolekcji i produktów, dzięki czemu możesz od razu sprawdzić pozycje markerów, hover marker ↔ produkt, slider, tytuł/opis oraz opcje kafelka bez połączenia z ObjectApi sklepu. W tej wersji grafika kolekcji zachowuje naturalne proporcje, a dodatkowy popup Konfiguruj pozwala dodawać i przeciągać markery bez kadrowania obrazu.

Każdy aktywny marker wskazuje produkt przez jego ID. Pozycja markera jest ustawiana przez wartości procentowe top i left. Po najechaniu marker pokazuje popup z obrazem, nazwą i ceną produktu. JavaScript modułu łączy marker z kafelkiem w sliderze po wspólnym atrybucie product-id. W symulatorze możesz dodatkowo ustawić pozycję markera wizualnie w popupie Konfiguruj, a wartości pól po lewej stronie zaktualizują się automatycznie.

• Maksymalnie 10 aktywnych markerów w repeaterze.
• Maksymalnie 16 produktów pobieranych do modułu.
• Liczba produktów w rzędzie jest osobna dla Mobile, Tablet, Laptop i Desktop.
• Ustawienia kafelka produktu są przekazywane do natywnego makra product_tile Shopera.
• Wyświetlana kolekcja jest pobierana przez ObjectApi.getCollection() i ObjectApi.getProductsInCollection().

Poniżej każda część v5 jest pokazana w stałym układzie. W większości sekcji zobaczysz opis po lewej, przykładowe ustawienia na środku i dynamiczną wizualizację po prawej. Tam, gdzie środkowa kolumna nic realnie nie wnosi, zostawiamy tylko opis i wizualizację, żeby instrukcja była krótsza i czytelniejsza.

• Sprawdź szerokość zwykłego dropdownu oraz dropdownu produktowego na desktopie.
• Otwórz kilka głównych kategorii i zweryfikuj szerokość lewej kolumny oraz ikony.
• Przejdź do kategorii 2 poziomu i sprawdź liczbę kolumn, ikonę oraz zdjęcie po prawej stronie.
• Zweryfikuj zdjęcia / ikony dodane do kategorii 3 poziomu.
• Otwórz Nowości i Promocje i sprawdź liczbę produktów w rzędzie na różnych urządzeniach.
• Jeżeli włączasz Producentów, sprawdź logo, linki i liczbę logotypów w rzędzie.
• Sprawdź dodatkowe linki po prawej stronie głównego menu.
• Na telefonie przejdź przez minimum dwa poziomy menu i sprawdź nawigację powrotną.

Moduł tworzy rozbudowaną sekcję prezentującą najważniejsze zalety, przewagi lub etapy. Składa się z dużej grafiki, tytułu, listy zalet z ikonami oraz opcjonalnego przycisku.

Grafikę możesz ustawić po lewej albo prawej stronie. Każda zaleta ma własną ikonę, tytuł i treść WYSIWYG, a wygląd całej sekcji można dopasować bez dodatkowego CSS.

1. Ustaw unikalną klasę modułu — bez niej Twig nie renderuje sekcji.
2. Wybierz pozycję głównej grafiki, jej szerokość, wysokość, kadrowanie i zaokrąglenia.
3. Wpisz tytuł i zdecyduj, czy pod nim ma pojawić się linia oraz kolorowy akcent.
4. W sekcji Zalety dodaj od 1 do 12 pozycji. Każda może mieć ikonę, ALT, tytuł i treść.
5. Na końcu skonfiguruj typografię i opcjonalny przycisk CTA.

Symulator odwzorowuje kolejność i typy pól z edytora Shoper. Zmiana wartości nie resetuje stanu lewego panelu: otwarte zakładki, pozycja scrolla, tryb Desktop/Mobile i fokus pozostają bez zmian. Dodanie lub usunięcie zalety przebudowuje wyłącznie repeater i również odtwarza jego stan.

Przy szerokości poniżej 992 px układ przechodzi do jednej kolumny: grafika znajduje się nad treścią i korzysta z osobnej wartości Wysokość grafiki mobile.

Poniżej 576 px każda zaleta układa ikonę nad tekstem, a tytuł, opis oraz przycisk są wyśrodkowane. To zachowanie wynika bezpośrednio z kodu Twig/CSS modułu.

• Sprawdź, czy unikalna klasa jest uzupełniona.
• Przetestuj pozycję grafiki po lewej i prawej stronie.
• Zweryfikuj kadrowanie grafiki na Desktop i Mobile.
• Sprawdź, czy wszystkie zalety mają poprawne ikony, ALT-y, tytuły i treści.
• Jeśli używasz przycisku, sprawdź link i ustawienie otwierania w nowej karcie.
• Przełącz preview na Mobile i upewnij się, że teksty nie są zbyt długie dla układu jednokolumnowego.

Sekcja sprzedażowa buduje trzyczęściowy baner: grafikę po lewej, centralny box z nagłówkiem, opisem, ikoną i przyciskiem oraz grafikę po prawej. Moduł nadaje się m.in. do prezentacji konkretnej kategorii, serii produktów, promocji albo wyróżnienia kluczowej oferty.

1. Wgraj lewą i prawą grafikę.
2. Ustaw Tytuł oraz Treść środkowego boxa.
3. Opcjonalnie wgraj ikonę treści.
4. Włącz przycisk, wpisz jego tekst i link.
5. Dopasuj szerokości kolumn oraz parametr Nachodzenie boxa na grafiki.
6. Na końcu ustaw kolory, zaokrąglenia, cień i typografię.

Poniższy symulator odwzorowuje formularz modułu z Shopera. Zmiany pól LIVE są nanoszone na prawy podgląd bez przeładowania formularza. Fioletowe S użyłem tylko przy dwóch polach wysokości grafik mobile, ponieważ obecny CSS ukrywa te grafiki na telefonie i nie da się uczciwie pokazać ich efektu.

Najbardziej charakterystyczny efekt daje układ z bocznymi grafikami po około 25–30% szerokości oraz centralnym boxem nachodzącym na obie strony. Parametr Nachodzenie boxa na grafiki działa przez ujemny margines środkowej karty — zwiększaj go stopniowo, aż karta wejdzie na grafiki w pożądanym stopniu.

Jeżeli zdjęcie jest mocno kadrowane, ustaw Dopasowanie = Wypełnij i skoryguj kadr polem pozycji, np. center top albo 50% 20%.

Przycisk może prowadzić do kategorii, produktu, landing page lub dowolnego adresu. Po włączeniu opcji Otwórz przycisk w nowej karcie Twig dodaje target="_blank" oraz zabezpieczenie rel="noopener noreferrer".

• Box za mocno nachodzi na grafiki — zmniejsz wartość „Nachodzenie boxa na grafiki”.
• Zdjęcie ucina ważny fragment — zmień pozycję obrazu albo użyj trybu „Dopasuj”.
• Przycisku nie widać — sprawdź, czy opcja „Pokaż przycisk” jest aktywna oraz czy „Tekst przycisku” nie jest pusty.
• Brak całej sekcji — sprawdź pole „Włącz moduł”.

Moduł automatycznie wyświetla pod aktualnym artykułem powiązane wpisy blogowe w formie slidera. Dobieranie może wykorzystywać wspólne tagi, wspólną kategorię albo połączenie obu kryteriów.

Aktualnie oglądany wpis jest zawsze pomijany, a analizowane są wyłącznie artykuły blogowe oznaczone w Shoperze jako „Moduł”.

1. Ustaw tytuł modułu, np. Powiązane wpisy blogowe.
2. Wybierz sposób dobierania wpisów. Najbardziej uniwersalny wariant to Najpierw tagi, potem kategoria.
3. Ustaw maksymalną liczbę wpisów oraz liczbę kafelków widocznych na poszczególnych urządzeniach.
4. W sekcji Kafelek wpisu blogowego zdecyduj, które elementy mają być widoczne.

Poniższy symulator odwzorowuje kolejność i typy pól z konfiguracji Shoper. Zielone LIVE aktualizują podgląd natychmiast. Fioletowe S dotyczą logiki dobierania lub źródła danych, której nie należy sztucznie udawać bez prawdziwych tagów i kategorii sklepu.

Moduł korzysta z natywnego slidera Storefront. Liczbę widocznych wpisów ustawiasz osobno dla telefonu, tabletu, laptopa i desktopu. Strzałki pojawiają się wtedy, gdy liczba znalezionych wpisów jest większa od liczby mieszczącej się w aktualnym widoku.

Breakpointy używane przez moduł: 576 px dla telefonu, 1000 px dla tabletu i 1440 px dla laptopa.

Każdy kafelek może niezależnie pokazywać zdjęcie główne, kategorię, datę, skróconą treść, tagi, autora i liczbę komentarzy. Licznik komentarzy jest widoczny tylko wtedy, gdy komentarze są również włączone globalnie w ustawieniach bloga.

Liczba analizowanych wpisów określa wielkość puli pobieranej przez ObjectApi.getModuleBlogArticles(). Wartość powinna być większa niż maksymalna liczba wpisów wyświetlanych. Jeżeli jest mniejsza, moduł automatycznie podnosi ją do wartości limitu wyświetlania.

Sortowanie „Najlepiej dopasowane” uwzględnia priorytet wybranego trybu, liczbę wspólnych tagów, wspólne kategorie i datę wpisu.

• Sprawdź, czy wpisy przeznaczone do analizy są oznaczone jako „Moduł”.
• Otwórz artykuł mający tagi i kategorie wspólne z innymi wpisami.
• Zweryfikuj liczbę kafelków na telefonie, tablecie i desktopie.
• Sprawdź działanie paginacji oraz strzałek slidera.
• Jeśli włączasz liczbę komentarzy, upewnij się, że komentarze są aktywne w ustawieniach bloga.

Zamów teraz, wyślemy dzisiaj pokazuje na karcie produktu informację o szybkiej wysyłce i – przed ustawioną godziną graniczną – odlicza pozostały czas.

Po przekroczeniu godziny wysyłki, w niedzielę albo w skonfigurowany dzień wolny licznik znika, a moduł pokazuje komunikat zapasowy. Możesz też użyć osobnej treści weekendowej oraz informacji dla produktów z wariantami.

1. Ustaw główną i dodatkową treść komunikatu przed odliczaniem.
2. W sekcji Godziny wysyłki wpisz godzinę graniczną osobno dla każdego dnia roboczego.
3. Jeśli wysyłasz także w sobotę, włącz tę opcję i ustaw sobotnią godzinę graniczną.
4. Dodaj daty dni wolnych, w których licznik ma być wyłączony.
5. Dopasuj kolory, obramowanie i odstępy do wyglądu karty produktu.

W repeaterze Dni wolne dodajesz konkretne daty, w których aktywne odliczanie ma być zablokowane. Bieżąca wersja źródła sprawdza tylko datę; nazwa dnia wolnego jest zapisywana w konfiguracji, ale nie jest wyświetlana klientowi.

Alternatywny tekst weekendowy może być użyty w sobotę, niedzielę oraz w piątek po przekroczeniu godziny granicznej.

Moduł jest pokazywany tylko dla produktów z szybkim czasem dostawy: maksymalnie 1 dzień, maksymalnie 24 godziny albo – gdy API nie zwraca czasu liczbowo – przy dokładnym dopasowaniu nazwy dostawy do pola Nazwa czasu dostawy.

Jeżeli włączysz informację dla wariantów magazynowych, produkt mający warianty może wyświetlić dodatkową notatkę pod komunikatem.

Moduł rozszerza standardowy popup Shopera pojawiający się po dodaniu produktu do koszyka. Pod informacją o dodanym produkcie automatycznie wstawia sekcję „Powiązane produkty” ze sliderem produktów przypisanych jako powiązane do właśnie dodanego produktu.

Klient może od razu zobaczyć zdjęcie, nazwę i cenę produktu powiązanego oraz przejść do jego karty przez przycisk ze strzałką.

1. Na produktach, dla których popup ma pokazywać propozycje, ustaw w Shoperze produkty powiązane.
2. Moduł musi działać w kontekście produktu, aby Twig mógł pobrać product.relatedProducts i zapisać ich ID do lokalnego cache.
3. Produkty powiązane muszą być dostępne dla ProductFetcherApi — moduł sam rejestruje dynamiczną funkcję ProductFetcher, jeżeli jest potrzebna.
4. Po dodaniu produktu do koszyka moduł korzysta z natywnego eventu addedToBasket i dołącza slider do standardowego modala Shopera.

Poniższe środowisko testowe odtwarza oba źródłowe sposoby pobierania relacji: atrybut relatedids z kafelka produktu oraz fallback z localStorage.productRelatedCache. Wybierz scenariusz i kliknij Dodaj do koszyka. Kontrolki po lewej służą wyłącznie do testu — nie są polami konfiguracji SVE.

Standardowy modal Shopera zostaje poszerzony do około 740 px na desktopie. Główna część modala pokazuje dodany produkt, a sekcja powiązanych produktów zajmuje pełną szerokość pod nim. Każdy kafelek ma kompaktowy układ: zdjęcie po lewej, nazwa i cena po prawej oraz mały przycisk przejścia do produktu.

Na ekranach do 576 px modal ma prawie pełną szerokość, główna część przechodzi do jednego bloku, a pojedynczy slajd zajmuje około 80% szerokości — dzięki temu widać fragment kolejnego produktu.

• Jeżeli event pochodzi z mechanizmu AdditionalProducts i trwa dodawanie dodatków, moduł go pomija.
• Na jedno otwarcie modala sekcja jest renderowana tylko raz dzięki atrybutowi data-related-rendered.
• Najpierw używany jest atrybut relatedids z kafelka produktu. Gdy go nie ma, kod korzysta z lokalnego cache productRelatedCache.
• ID są zamieniane na liczby, duplikaty są usuwane, a po pobraniu produktów kolejność jest odtwarzana zgodnie z kolejnością ID relacji.
• Jeżeli nie ma relacji, moduł niczego nie dopisuje do natywnego popupu.

Źródłowy Twig zapisuje relacje tylko wtedy, gdy istnieje product_id i produkt ma co najmniej jeden element w relatedProducts. JavaScript nasłuchuje również PageManager.beforeRendered, aby wyczyścić strażnik renderowania przy zmianie widoku.

Moduł automatycznie wyświetla pod listą produktów w koszyku dodatkowy slider z rekomendacjami. Produkty mogą pochodzić z własnych reguł, produktów powiązanych albo z kolekcji zapasowej. Moduł na bieżąco reaguje na zmiany koszyka, odrzuca produkty już znajdujące się w koszyku i ponownie sprawdza filtry przed pokazaniem rekomendacji.

Poniżej konfiguracja jest rozbita funkcjonalnie: najpierw wybór źródła produktów, następnie reguły produktowe i kategoriowe, filtry, slider oraz wygląd kafelka. W każdej sekcji po lewej znajduje się konfiguracja zbliżona do panelu Shopera, a po prawej praktyczna wizualizacja działania.

W tej sekcji ustawiasz tytuł, liczbę rekomendacji i przede wszystkim sposób, w jaki moduł ma szukać produktów. Tryb inteligentny łączy wszystkie źródła w ustalonej kolejności: najpierw reguły produktowe, następnie reguły kategorii, później produkty powiązane, a brakujące miejsca może uzupełnić kolekcja zapasowa.

Reguła produktowa odpowiada na proste pytanie: jeżeli klient ma w koszyku konkretny produkt, z jakiej kolekcji mamy dobrać mu dodatki? Możesz przygotować wiele takich reguł. Gdy kilka reguł pasuje jednocześnie, moduł przeplata produkty z aktywnych kolekcji zamiast opróżniać najpierw tylko jedną z nich.

Reguły kategorii działają podobnie, ale zamiast konkretnego produktu sprawdzają kategorię produktu znajdującego się w koszyku. To wygodne rozwiązanie, gdy wiele produktów z jednej kategorii powinno prowadzić do tej samej kolekcji dodatków.

Filtry są stosowane do kandydatów ze wszystkich aktywnych źródeł. Moduł nie rekomenduje produktów, które są już w koszyku. Dodatkowo możesz wymagać dostępności, ograniczyć rekomendacje do promocji albo wykluczyć promocje oraz ustawić przedział ceny finalnej.

Ta sekcja odpowiada już za sposób prezentacji gotowych rekomendacji. Desktop, tablet i telefon mają osobną liczbę produktów na widoku. Możesz także ustawić liczbę produktów przesuwanych jednym kliknięciem, odstęp, strzałki, szybkość animacji oraz tryb Slide lub Loop.

Na końcu ustawiasz sam wygląd pojedynczego produktu. Moduł korzysta z natywnej struktury kafelka Storefront, ale pozwala zmienić rozmiar miniatury, widoczność etykiety rabatu, tryb CTA oraz podstawową typografię nazwy i ceny.

Źródła nie są mieszane przypadkowo. W trybach wykorzystujących reguły najpierw brane są kolekcje przypisane do konkretnych produktów, potem kolekcje przypisane do kategorii. Produkty powiązane są kolejnym źródłem w trybie inteligentnym. Kolekcja zapasowa jest pobierana dopiero wtedy, gdy wcześniejsze źródła nie dają wystarczającej liczby kandydatów. Kandydaci z kilku aktywnych źródeł w tej samej grupie są przeplatani, a duplikaty są usuwane.

1. Dodaj produkt do koszyka i sprawdź, czy sekcja pojawia się bezpośrednio pod listą produktów koszyka.
2. Sprawdź tryb Inteligentny i przynajmniej jedną działającą regułę produktową albo kategoriową.
3. Usuń lub dodaj produkt do koszyka — rekomendacje powinny zostać ponownie przeliczone.
4. Sprawdź, że produkt już znajdujący się w koszyku nie wraca jako rekomendacja.
5. Przetestuj filtr dostępności, promocji i przedział ceny.
6. Sprawdź slider na desktopie, tablecie i telefonie, szczególnie liczbę produktów na widoku i strzałki.
7. Przetestuj przycisk Dodaj do koszyka oraz produkt posiadający warianty.

13.10.2026 — Pierwsza kompletna instrukcja modułu

• opisano cztery tryby doboru produktów i kolejność źródeł,
• dodano osobne symulatory reguł produktowych i kategoriowych,
• dodano podgląd filtrów, slidera i kafelka produktu,
• uzupełniono pomoc S/LIVE dla wszystkich pól konfiguracji.

Moduł tworzy responsywny slider banerowy z nawigacją. Każdy slajd może mieć własną nazwę, link, grafikę desktopową, opcjonalną grafikę mobilną i tekst alternatywny.

Na desktopie nawigację tekstową można umieścić na dole, po lewej albo po prawej stronie. Na mobile dostępna jest dolna nawigacja lub jej całkowite ukrycie. Dodatkowo możesz włączyć strzałki, dopasować ich pozycję i ustawić wygląd całego panelu nawigacji.

1. W sekcji Slajdy dodaj kolejne pozycje.
2. Uzupełnij Nazwę slajdu — będzie używana w nawigacji tekstowej.
3. Dodaj wymagany Obraz desktop.
4. Opcjonalnie dodaj Alternatywny obraz mobile. Jeżeli go nie ustawisz, na urządzeniach mobilnych zostanie użyta grafika desktopowa.
5. Jeżeli cały slajd ma prowadzić do konkretnej strony, uzupełnij Link URL.
6. Dodaj opis alt odpowiadający zawartości grafiki.

Dla spójnego przełączania najlepiej przygotować slajdy o takich samych proporcjach. Na mobile warto użyć osobnej grafiki z własnym kadrem — często kwadratowej lub bardziej pionowej. Moduł nie powinien sztucznie przycinać takiej grafiki do proporcji desktopowej; obraz jest wyświetlany na pełną szerokość z zachowaniem jego naturalnych proporcji.

W symulatorze poniżej lewy panel odwzorowuje kolejność i typy pól z edytora Shoper. Przełącznik Desktop / Mobile nad podglądem pozwala sprawdzić osobne ustawienia responsywne.

Live ⓘ oznacza pole, którego efekt jest od razu widoczny po prawej. Konfiguracja ⓘ dotyczy ustawienia technicznego lub takiego, którego nie należy sztucznie udawać w podglądzie.

Nawigacja desktop pozwala wybrać układ dolny, lewy lub prawy. Dla układu dolnego możesz zdecydować, czy panel ma leżeć na grafice czy pod nią, ustawić jego szerokość oraz wyrównanie. Dla układu bocznego możesz sterować szerokością panelu, odstępem od krawędzi oraz pionowym rozmieszczeniem zakładek.

Nawigacja mobile ma osobne ustawienia. Możesz ją pokazać pod/na grafice albo całkowicie ukryć.

W sekcji Style nawigacji ustawisz kolory, rozmiar tekstu, padding, zaokrąglenie i cień. Wszystkie te parametry można sprawdzić bezpośrednio w podglądzie.

Strzałki mają osobne ustawienia dla desktopu i mobile. Mogą być nakładane bezpośrednio na slajd albo umieszczone w panelu nawigacji. Na pierwszym i ostatnim slajdzie niedostępna strzałka pozostaje na swoim miejscu, ale jest przygaszona i nieaktywna.

Pole Automatyczne przewijanie (niezalecane) jest domyślnie wyłączone. Po włączeniu slider przechodzi między slajdami automatycznie, a kod modułu obsługuje również pauzowanie i wskaźnik postępu.

Priorytetowe ładowanie pierwszego slajdu nadaje pierwszej aktywnej grafice wysoki priorytet pobierania. Zgodnie z opisem pola jest to szczególnie przydatne, gdy slider znajduje się wysoko na stronie.

Pole Klasa CSS pozwala dodać jedną lub kilka własnych klas do wrappera modułu. Nazwy wpisuj bez kropki; kilka klas oddziel spacjami.

1. Sprawdź, czy każdy aktywny slajd ma grafikę desktopową.
2. Kliknij każdą nazwę w nawigacji i upewnij się, że przełącza właściwy slajd.
3. Sprawdź strzałki na pierwszym, środkowym i ostatnim slajdzie.
4. Przetestuj osobno desktop i mobile — szczególnie położenie nawigacji oraz grafikę mobilną.
5. Jeżeli używasz linków na slajdach, sprawdź ich docelowe adresy na froncie sklepu.
6. Jeżeli włączasz autoplay, pozostaw stronę przez kilka cykli i sprawdź przejście z ostatniego slajdu z powrotem do pierwszego.

Moduł przejmuje istniejący wpis blogowy Shopera i rozbudowuje jego prezentację: układ boxów, typografię, główną grafikę, spis treści, udostępnianie, obrazy, przyciski, callout, cytaty, linki produktowe, FAQ oraz dane strukturalne. Poniżej wszystkie funkcje są pokazane jedna pod drugą. Każda sekcja ma własny opis, ustawienia po lewej i odpowiadającą im wizualizację po prawej.

Moduł wyświetla pasek informacyjny nad nagłówkiem sklepu. Możesz dodać kilka komunikatów z ikonami, ustawić automatyczne przewijanie oraz dopasować wygląd osobno do desktopu i urządzeń mobilnych.

1. W sekcji Wygląd ustaw kolor lub grafikę tła, kolor tekstu oraz wysokość paska.
2. W sekcji Slider zdecyduj, czy komunikaty mają przewijać się automatycznie i czy pokazywać strzałki.
3. W sekcji Treść dodaj komunikaty. Każdy może mieć własny tekst oraz opcjonalną ikonę.
4. Zapisz moduł i sprawdź efekt na desktopie oraz urządzeniach mobilnych.

Poniższy symulator odwzorowuje formularz Shopera i zachowanie modułu. Wszystkie pola są oznaczone jako LIVE, ponieważ zgodnie ze źródłowym Twig/JS każde z nich wpływa na output albo zachowanie paska.

Przy tle typu Grafika możesz ustawić osobny obraz dla desktopu, laptopa, tabletu i telefonu. Moduł korzysta z elementu picture i dobiera wariant do szerokości ekranu. Jeśli część wariantów nie jest ustawiona, pierwsza dostępna grafika służy jako fallback.

• Autoplay działa tylko wtedy, gdy aktywnych komunikatów jest więcej niż jeden.
• Po najechaniu kursorem autoplay może zostać zatrzymany — zależnie od ustawienia Zatrzymaj przewijanie po najechaniu.
• Przy wyłączonym autoplay strzałki są pokazywane automatycznie, nawet gdy opcja Pokaż strzałki nawigacji jest wyłączona.
• Strzałki nie są renderowane przy tylko jednym aktywnym komunikacie.

Grafiki kafelki v2 - GEAR pozwala budować elastyczne siatki banerów / kafelków graficznych. Aktualizacja rozszerza generator o osobny widok Laptop, responsywne odstępy, nowe opcje wyglądu i pozycjonowania oraz dodatkowe ustawienia pojedynczego kafelka.

Kreator nadal obsługuje przeciąganie kafelków, zmianę ich szerokości i wysokości oraz bibliotekę gotowych układów 2–8 banerów. Presety zachowują dotychczasowy kierunek, a układ laptopowy jest automatycznie budowany na bazie wariantu desktopowego i można go później dopracować osobno.

• Podgląd ma teraz cztery widoki: Desktop / Laptop / Tablet / Telefon.
• Kliknięcie koła zębatego na kafelku ustawia szerokość i wysokość osobno dla aktywnego urządzenia.
• Możesz włączyć osobny odstęp między kafelkami dla każdego urządzenia.
• Sekcja Wygląd i interakcje steruje zoomem hover, zaokrągleniem, pozycją grafiki oraz boxem z treścią.
• Każdy kafelek może mieć własny ALT, własny kolor ramki hover, link na całym kafelku oraz otwieranie w nowej karcie.
• Gotowe układy 2–8 pozostają dostępne i po załadowaniu generują także kod laptopowy.

1. Ustaw podstawowe opcje modułu i wgraj grafiki po lewej stronie.
2. Jeżeli chcesz szybki start, użyj przycisku Gotowe układy i załaduj preset dla wybranej liczby banerów.
3. Doprecyzuj układ przeciągając kafelki na wizualizacji albo zmieniając szerokość / wysokość w dymku ustawień.
4. Na końcu skopiuj układ lub przepisz kody grida z lewej strony do docelowego modułu w Shoperze.

Zmiany pól oznaczonych jako LIVE są pokazane na podglądzie, gdy wpływają na wygląd lub bezpośrednie zachowanie. Pola techniczne, takie jak ID triggera albo prefiksy URL, mają oznaczenie S i dokładne objaśnienie po kliknięciu.

Moduł pokazuje na karcie produktu produkty powiązane w formie miniaturek przypominających warianty. Możesz zdecydować, czy na początku listy ma pojawiać się również aktualnie oglądany produkt, a także ukryć produkty powiązane ze stanem magazynowym 0.

Na urządzeniach obsługujących hover najechanie na kafelek tymczasowo podmienia główne zdjęcie w galerii produktu. Opcjonalnie może również pojawić się chmurka z nazwą i ceną. Na urządzeniach dotykowych tap działa jak zwykłe przejście do produktu.

1. Włącz Aktywuj moduł.
2. Ustaw tytuł, np. Podobne produkty:.
3. Ustal limit kafelków widocznych przed przyciskiem +N.
4. Zdecyduj, czy pokazywać aktywny produkt oraz czy ukrywać produkty ze stanem 0.
5. Dopasuj rozmiar kafelków i zdjęć.
6. W razie potrzeby ustaw pionową pozycję zdjęcia oraz tryb Contain / Cover.
7. Opcjonalnie włącz chmurkę z nazwą i ceną produktu.

Moduł pobiera dane z produktów powiązanych aktualnego produktu. Jeżeli produkt nie ma żadnych relacji, moduł się nie wyświetli.

Poniższy konfigurator odwzorowuje pola modułu w kolejności źródłowej. Wszystkie pokazane ustawienia wpływają na wynik lub zachowanie modułu, dlatego są oznaczone jako LIVE.

W danych testowych część produktów ma stan magazynowy 0. Dzięki temu możesz sprawdzić filtr stanów, widoczność aktywnego produktu, sposób liczenia +N, pozycjonowanie zdjęć, hover oraz chmurkę.

Limit nie zakłada już, że pierwszy kafelek zawsze jest aktualnym produktem. Najpierw moduł filtruje produkty ze stanem 0 — jeżeli ta opcja jest włączona — a następnie sprawdza ustawienie Pokaż aktywny produkt.

Jeżeli aktywny produkt jest widoczny, zajmuje jedno miejsce w limicie. Jeżeli jest wyłączony, cały limit może zostać wykorzystany przez produkty powiązane. Kafelek +N pokazuje liczbę elementów pozostałych po tych filtrach.

Podmiana głównego zdjęcia działa teraz tylko wtedy, gdy urządzenie faktycznie obsługuje hover i precyzyjny wskaźnik: (hover: hover) and (pointer: fine). Na urządzeniach dotykowych moduł nie przechwytuje tapnięcia jako hover — tap działa jak zwykły link do produktu.

Hover jest obsługiwany na całym kafelku produktu. Po wejściu kursorem JavaScript odczytuje data-bigimg i podmienia srcset aktywnego źródła w galerii. Po opuszczeniu kafelka przywracane jest wcześniejsze zdjęcie.

Po włączeniu pola Pokaż chmurkę z nazwą i ceną produktu nieaktywne miniatury pokazują na hover dodatkowy boks z nazwą i ceną. Aktualny, aktywny produkt nie pokazuje tej chmurki.

Rozmiar zdjęcia i rozmiar boksa to dwie niezależne wartości. Dla czytelnego efektu zdjęcie powinno mieścić się w boksie z uwzględnieniem zapasu wynikającego z paddingu.

Nowe ustawienia Pozycja zdjęcia w pionie oraz Dopasowanie zdjęcia pozwalają niezależnie określić położenie obrazu i sposób wypełnienia dostępnej przestrzeni. Tryb Contain zachowuje całe zdjęcie, natomiast Cover wypełnia cały obszar kosztem możliwego przycięcia.

Kolor aktywny dotyczy aktualnego produktu, kolor hover pozostałych produktów po najechaniu, a zwykły kolor obramowania — stanu spoczynkowego.

W edytorze modułu znajdują się także: waga i wyrównanie nagłówka, style podtytułu, nazwy i ceny produktu, kolory hover przycisku, obramowania miniaturek, grafiki tła desktop/mobile z nakładką oraz szczegółowe opcje responsywne. Wszystkie te wartości są dostępne bezpośrednio w konfiguracji Shoper.

Uwaga: podglądy tej instrukcji korzystają z neutralnych przykładowych danych. Zapis demonstracji nie zastępuje zapisania konfiguracji modułu w sklepie.

• Sprawdź wyświetlanie modułu na komputerze i telefonie oraz pozostałych obsługiwanych urządzeniach.
• Upewnij się, że wybrane źródło produktów zwraca właściwe promocje i że nie brakuje ich zdjęć.
• Sprawdź datę startu, tryb rotacji oraz zachowanie po wyświetleniu ostatniego produktu.
• Sprawdź, czy licznik pokazuje właściwy koniec promocji, a komunikaty mają poprawne polskie treści.
• Przetestuj galerię po prawej stronie: liczbę zdjęć, nawigację i rozmieszczenie strzałek.
• Sprawdź wygląd wyprzedanego produktu, działanie przycisku i konfigurację na urządzeniach mobilnych.

• Dodaj przynajmniej jedną kolekcję i sprawdź, czy prowadzi do właściwej strony.
• Sprawdź, czy wszystkie kolekcje mają odpowiednie zdjęcia.
• Włącz i wyłącz liczbę produktów, aby sprawdzić czytelność kafelków.
• Jeśli pokazujesz strzałki, sprawdź je przy większej liczbie kolekcji niż mieści się na ekranie.
• Sprawdź liczbę widocznych kart i wielkość podpisów na telefonie oraz komputerze.
• Po zmianach zapisz moduł i obejrzyj efekt na stronie sklepu.

• Uzupełnij nazwy klientów i treści wszystkich widocznych opinii.
• Sprawdź liczbę gwiazdek oraz widoczność awatarów w poszczególnych wpisach.
• Sprawdź liczbę widocznych kart na komputerze, tablecie i telefonie.
• Jeżeli włączasz slider, przetestuj strzałki, kropki i zapętlenie.
• Jeżeli włączasz autoplay, sprawdź czas przewijania oraz przycisk pauzy.
• Porównaj wysokości kart i czytelność typografii na urządzeniach.