iModules — Szablon COSMO
[NEW]⭐Produkty powiązane "dodaj do koszyka" ⭐
Moduł automatycznie dodaje slider produktów powiązanych do natywnego popupu „dodano do koszyka”. Relacje pobiera z kafelka produktu lub z cache zapisanego na karcie produktu, a dane produktów dociąga przez ProductFetcherApi.
Do czego służy moduł?
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ą.

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

Relacje ustawiasz na produktachTen moduł nie ma własnej listy produktów do ręcznego uzupełniania w SVE. Źródłem propozycji są produkty powiązane aktualnego produktu.

Sprawdź działanie modułu
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.

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.
Co klient zobaczy po dodaniu produktu?
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.

Zachowanie automatyczne
Moduł nie ma własnych pól SVEsource/config.json oraz source/translations.json są puste. Nie ma więc formularza ustawień do odwzorowania. Tytuł sekcji ma fallback „Powiązane produkty”; kod pozwala go nadpisać przez globalne window.imodules.relatedProductsTitle, ale nie jest to pole konfiguracji tego modułu.

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.

Szczegóły techniczne
ElementWartość / mechanizmZnaczenie
Event startowyaddedToBasketUruchamia próbę dodania produktów powiązanych do modala
Źródło relacji 1product-tile[product-id] → relatedidsPodstawowe źródło ID produktów powiązanych
Źródło relacji 2localStorage.productRelatedCacheFallback zapisany przez Twig na karcie produktu
Klucz cacheproductRelatedCacheObiekt: ID produktu → tablica ID relacji
Pobieranie danychFeatureSystemApi + ProductFetcherApiDociąga dane produktów po ID
Tytułwindow.imodules.relatedProductsTitle lub „Powiązane produkty”Nagłówek sekcji
Animacja260 msRozwijanie wysokości kontenera .relatedProducts
Gap slidera12 pxOdstęp pomiędzy slajdami
Szerokość slajdu desktop40%Widać ok. 2–2,5 produktu jednocześnie
Szerokość slajdu mobile80%Widać jeden produkt i fragment następnego
Ź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.