iModules — Szablon Tulio
[im4] ⭐ Nowe kolekcje z markerami ⭐
Instrukcja modułu „Nowe kolekcje z markerami” z pełnym środowiskiem testowym, markerami 1:1 oraz popupem konfiguracji markerów.
Do czego służy moduł?
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.

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

Ważne zachowanie RWDW źródłowym module dla szerokości do 980 px znika desktopowa grafika z markerami. Pojawia się ta sama grafika w wersji RWD nad sliderem, ale markery nie są na niej renderowane. Symulator odwzorowuje to zachowanie.

Interaktywny konfigurator
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.

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łają markery?
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.

Limity i ustawienia zaawansowane
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().