[im4] ⭐ Nowe kolekcje z markerami ⭐

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().