[im3] ⭐ Dodatkowe produkty na karcie produktu ⭐

Lista dodatkowych produktów na karcie produktu z ilością, automatyczną sumą, przypisaniem po produkcie lub kategorii oraz kolekcją jako źródłem danych.

Do czego służy moduł?

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.

Jak skonfigurować moduł?

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

Produkt, kategoria i kolekcja są polami konfiguracyjnymi

Te pola korzystają z ObjectApi i wybierają prawdziwe dane sklepu. Symulator nie łączy się z Twoim sklepem, dlatego dla nich pokazuje dane demonstracyjne. Wszystkie pola wpływające na HTML/CSS modułu są oznaczone jako LIVE.

Konfiguracja modułu

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.

Jak działa lista i podsumowanie?

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.

Rozwijanie długiej listy

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.

Ustawienia zaawansowane

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.