Instrukcja›Szablon COSMO

[im3] ⭐ Przyklejony koszyk na karcie produktu ⭐

Mobilny przyklejony koszyk na karcie produktu. Po przewinięciu poniżej źródłowych akcji produktu kopiuje do dolnego paska aktualną cenę i moduł akcji koszyka.

Miniatura modułu: [im3] ⭐ Przyklejony koszyk na karcie produktu ⭐

Do czego służy moduł?

Przyklejony koszyk na karcie produktu dodaje na telefonie dolny pasek z aktualną ceną i akcją dodania produktu do koszyka. Pasek pojawia się dopiero po przewinięciu strony poniżej oryginalnego modułu akcji produktu.

Dzięki temu klient nadal ma dostęp do najważniejszej akcji zakupowej, nawet gdy główny przycisk koszyka zniknie już z ekranu.

Szybka konfiguracja

  1. Włącz moduł.
  2. Ustaw rozmiar i kolor ceny widocznej w dolnym pasku.
  3. Jeżeli chcesz, dopasuj również ustawienia obrazu i nazwy produktu — ich efekt możesz sprawdzić w trybie diagnostycznym konfiguratora.
  4. Na telefonie przewiń kartę produktu poniżej głównego przycisku „Dodaj do koszyka”. Wtedy pasek powinien wysunąć się od dołu.
Moduł działa tylko na mobile

Źródłowy JavaScript uruchamia StickyBasket wyłącznie przy szerokości do 767 px. Na desktopie moduł jest niszczony przez destroy() i pasek pozostaje schowany.

Konfiguracja modułu

Konfigurator poniżej odwzorowuje kolejność i typy pól z modułu Shoper. Po prawej jest syntetyczna karta produktu, dzięki której możesz od razu sprawdzić moment pojawienia się sticky paska oraz zmianę ceny.

Kiedy pasek się pojawia?

Moduł oblicza dolną krawędź źródłowej sekcji .modules-actions. Sticky zostaje pokazany dopiero wtedy, gdy pozycja przewinięcia strony przekroczy tę krawędź.

W symulatorze możesz przełączyć się między Mobile — przed progiem i Mobile — sticky, a także przewijać samą demonstracyjną kartę produktu.

Aktualizacja ceny i akcji koszyka

Źródłowy JavaScript klonuje do paska dwa elementy z realnej karty produktu: akcje koszyka oraz blok ceny. Zmiany ceny są nasłuchiwane przez event product.priceChanged oraz dodatkowo przez MutationObserver.

Przycisk Zmień cenę demo w konfiguratorze pozwala sprawdzić ten mechanizm na danych testowych bez połączenia ze sklepem.

Ustawienia zaawansowane

Obrazek i nazwa są ukryte w realnym mobile

W Twig znajdują się elementy obrazu i nazwy produktu, a ich style mają własne ustawienia. Jednocześnie CSS ukrywa oba elementy przy szerokości do 800 px, podczas gdy JavaScript uruchamia StickyBasket tylko do 767 px. Oznacza to, że w aktualnej wersji źródła nie są one widoczne w realnym działającym sticky na telefonie.

Zakładka Pola stylu w symulatorze pokazuje je wyłącznie jako inspektor istniejących stylów, żeby dało się uczciwie sprawdzić wszystkie ustawienia źródłowe.

Szczegóły techniczne

  • Źródło akcji: .modules-actions.
  • Źródło ceny: .imodules-gridppage .js__product-price-gross .product-price.
  • Breakpoint działania: window.innerWidth <= 767.
  • Lifecycle Storefront: PageManager.loaded montuje moduł, a PageManager.beforeRendered go niszczy.
  • Przy klonowaniu usuwane są identyfikatory id, aby nie powielać ich w DOM.