[NEW]⭐Produkty powiązane "dodaj do koszyka" ⭐

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.