Przyklejony przycisk Dodaj do koszyka dla PrestaShop: pełny przewodnik

Prezentacja

DataFirefly Sticky Add to Cart wyświetla stały pasek „Dodaj do koszyka” na stronach produktu Twojego sklepu PrestaShop 8 albo 9. Na mobile kompaktowy pasek dokuje się na dole ekranu. Na desktopie pływający panel wsuwa się z prawej strony (albo, do wyboru, pasek na dole identyczny z mobilnym). Pasek zawiera mini wybór wariantu, wybór ilości i cenę aktualizowaną w czasie rzeczywistym.

Dodanie do koszyka odbywa się bezpośrednim żądaniem AJAX do kontrolera koszyka PrestaShop: moduł nigdy nie modyfikuje formularza ani natywnego przycisku Twojego motywu, co gwarantuje bezkonfliktowe współistnienie.

Instalacja

1. W back office PrestaShop otwórz Moduły > Menedżer modułów.
2. Kliknij Zainstaluj moduł i wybierz plik dfstickyaddtocart.zip.
3. Po zainstalowaniu modułu kliknij Konfiguruj.
4. Wyczyść cache PrestaShop: Parametry zaawansowane > Wydajność > Wyczyść cache.

Konfiguracja

Wszystkie ustawienia znajdziesz w Moduły > Menedżer modułów > DataFirefly Sticky Add to Cart > Konfiguruj.

Wyświetlanie

• Włącz moduł: wyłącznik główny.
• Wyświetlaj na mobile: włącza dolny pasek na ekranach poniżej 992 px.
• Wyświetlaj na desktopie: włącza wyświetlanie na ekranach od 992 px wzwyż.
• Tryb desktopowy: dwa warianty: Pływający panel (po prawej), czyli karta o szerokości 320 px wsuwająca się od prawej krawędzi, albo Pasek na dole, identyczny z renderem mobilnym, ale wyśrodkowany na 1280 px.
• Przesunięcie górne na desktopie (px): odległość między górą okna a pływającym panelem. Zwiększ tę wartość, jeśli Twój motyw ma przyklejony nagłówek (domyślnie 90 px).

Zawartość paska

• Wyświetlaj zdjęcie produktu: miniatura zdjęcia głównego.
• Wyświetlaj wybór wariantu: kompaktowa lista rozwijana z kombinacjami (ukrywana automatycznie, jeśli produkt nie ma kombinacji).
• Wyświetlaj wybór ilości: przyciski minus i plus (widoczne na desktopie; na mobile ilość pozostaje na 1, aby zachować kompaktowość).
• Ukrywaj, gdy główny przycisk jest widoczny: pasek pojawia się dopiero wtedy, gdy oryginalny przycisk „Dodaj do koszyka” opuści widok (zalecane). Wyłącz, aby pasek był widoczny stale.

Kolory

• Kolor tła: tło paska (domyślnie biały).
• Kolor przycisku: przycisk dodania do koszyka (domyślnie turkusowy #2fb5d2).
• Kolor tekstu przycisku: etykieta przycisku.
• Kolor tekstu: nazwa produktu i etykiety.
• Kolor ceny: opcjonalny; jeśli pusty, używany jest kolor przycisku.

Działanie

Wykrywanie widoczności

Moduł obserwuje oryginalny blok „Dodaj do koszyka” za pomocą przeglądarkowego API IntersectionObserver. Gdy tylko ten blok opuści widok (użytkownik przewinął stronę), przyklejony pasek pojawia się z animacją wsunięcia. Gdy blok wraca w pole widzenia, pasek znika. Mechanizm jest natywny dla przeglądarki i nie dokłada żadnego kosztu wydajnościowego przy przewijaniu.

Wybór wariantu

Przy produktach z kombinacjami mini selektor pokazuje każdą kombinację z jej ceną i dostępnością (kombinacje niedostępne są wyłączone). Wybór jest lokalny dla przyklejonego paska: nie zmienia interfejsu wariantów na głównej stronie. Gdy klient zmieni wariant z poziomu głównej strony, przyklejony pasek synchronizuje się automatycznie przez zdarzenie updatedProduct PrestaShop.

Dodanie do koszyka

Kliknięcie przyklejonego przycisku wysyła żądanie AJAX POST bezpośrednio do kontrolera koszyka PrestaShop (ten sam endpoint co motyw), z kombinacją i ilością wybranymi w pasku. W razie powodzenia moduł emituje zdarzenie updateCart: licznik koszyka w nagłówku i podgląd koszyka Twojego motywu aktualizują się normalnie, a przyklejony przycisk pokazuje znacznik potwierdzenia.

Wyświetlanie na mobile

Na mobile pasek dopasowuje się automatycznie:

• Produkt bez wariantów: jedna linia: miniatura, nazwa, cena i przycisk. Poniżej 600 px etykieta przycisku ustępuje miejsca ikonie koszyka; poniżej 380 px miniatura jest ukrywana.
• Produkt z wariantami: dwie linie: miniatura, nazwa, cena i przycisk w pierwszej; wybór wariantu na pełną szerokość w drugiej.

Pasek respektuje strefę safe-area-inset-bottom iPhoneów z wcięciem oraz preferencję prefers-reduced-motion użytkowników wrażliwych na animacje.

Zgodność z motywami

Moduł celuje w standardowe selektory CSS motywu Classic i jego pochodnych: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. Zdecydowana większość motywów dostępnych na rynku trzyma się tych konwencji.

Jeśli Twój motyw używa innych klas, na początku pliku views/js/dfstickyaddtocart.js znajdziesz dwie funkcje do dostosowania: getMainBtn() (selektor natywnego przycisku) i getMainForm() (selektor formularza produktu). To jedyne dwa punkty styku z Twoim motywem.

Rozwiązywanie problemów

Pasek się nie pojawia

1. Sprawdź, czy moduł jest włączony w konfiguracji i czy wyświetlanie jest aktywne dla testowanego urządzenia (mobile albo desktop).
2. Wyczyść cache PrestaShop (Parametry zaawansowane > Wydajność), a następnie przeładuj stronę skrótem Ctrl+Shift+R.
3. Jeśli opcja „Ukrywaj, gdy główny przycisk jest widoczny” jest włączona, pasek pojawia się dopiero po przewinięciu poniżej oryginalnego przycisku: to zachowanie oczekiwane.
4. Sprawdź w konsoli przeglądarki, czy błąd JavaScript z innego modułu nie blokuje wykonania strony.

Dodanie do koszyka nie działa

1. Otwórz konsolę przeglądarki: moduł zapisuje tam swoje błędy z prefiksem [dfsticky].
2. Sprawdź w zakładce Sieć żądanie POST do kontrolera koszyka: kod HTTP i treść odpowiedzi wskazują dokładną przyczynę (brak towaru, minimalna ilość i tak dalej).
3. Moduł toleruje ostrzeżenia PHP w środowisku deweloperskim (wyodrębnia JSON, nawet jeśli poprzedzają go ostrzeżenia), ale czyste środowisko produkcyjne pozostaje zalecane.

Panel zachodzi na nagłówek motywu

Zwiększ wartość Przesunięcie górne na desktopie (px) w konfiguracji, aż panel ustawi się pod Twoim przyklejonym nagłówkiem.

FAQ techniczne

Czy moduł spowalnia strony?

Nie. Zasoby (około 7 kB CSS i 12 kB JavaScript) są ładowane wyłącznie na kontrolerze product. Zero zewnętrznych bibliotek, zero nasłuchu przewijania: widocznością steruje IntersectionObserver.

Czy moduł obsługuje multistore?

Tak. Wszystkie wartości są zapisywane przez klasę Configuration PrestaShop z natywnym kontekstem multistore: każdy sklep może mieć własne kolory i ustawienia.

Jakie hooki są używane?

actionFrontControllerSetMedia (rejestracja zasobów), displayFooterProduct (render markupu) i displayHeader (krytyczne mikro-CSS przeciw migotaniu).

Czy teksty są tłumaczalne?

Tak. Wszystkie ciągi przechodzą przez system tłumaczeń PrestaShop. Moduł jest dostarczany po francusku, angielsku, hiszpańsku i niemiecku; kolejne języki dodasz w Międzynarodowe > Tłumaczenia.

Historia wersji

1.0.3

• Tolerancyjne parsowanie odpowiedzi kontrolera koszyka: JSON jest poprawnie wyodrębniany także wtedy, gdy poprzedzają go ostrzeżenia PHP (środowiska deweloperskie).
• Treść żądania w formacie URL-encoded, identycznym z natywną serializacją motywu, dla maksymalnej zgodności.
• Trwałe usunięcie programowego wyzwalania natywnego przycisku: oba przyciski są teraz całkowicie niezależne.

1.0.2

• Usunięcie renderowania modala potwierdzenia zwracanego przez kontroler koszyka, który mógł pozostawić niewidoczną nakładkę blokującą kliknięcia na niektórych stronach. Potwierdzenie odbywa się przez zdarzenie updateCart i znacznik na przyklejonym przycisku.
• Defensywne czyszczenie osieroconych modali przy ładowaniu strony.

1.0.1

• Przejście na dodawanie do koszyka bezpośrednim żądaniem AJAX: moduł nie modyfikuje już formularza produktu i nie zależy od stanu DOM motywu.
• Referencje DOM rozwiązywane w locie, odporne na podmianę formularza przez silnik kombinacji.
• Zabezpieczające resetowanie wskaźnika ładowania.

1.0.0

• Wersja początkowa: przyklejony pasek na mobile i desktopie, mini wybór wariantu, wybór ilości, personalizacja kolorów, dostępność ARIA, multistore, FR/EN/ES/DE.