# 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.… - Strona: - Język: pl - Zaktualizowano: 2026-08-01 - Inne języki: [fr](https://www.datafirefly.com/documentation/dfstickyaddtocart/index.md), [en](https://www.datafirefly.com/en/documentation/dfstickyaddtocart/index.md), [es](https://www.datafirefly.com/es/documentation/dfstickyaddtocart/index.md), [de](https://www.datafirefly.com/de/documentation/dfstickyaddtocart/index.md), [it](https://www.datafirefly.com/it/documentation/dfstickyaddtocart/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfstickyaddtocart/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfstickyaddtocart/index.md) - Indeks: ## 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**. **Wymagania**: PrestaShop 8.0 do 9.x, PHP 8.1 albo nowsze. Zero zewnętrznych zależności, zero modyfikacji motywu. ## 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. Kolory są wstrzykiwane jako zmienne CSS (`--dfs-bg`, `--dfs-btn`, `--dfs-btn-text`, `--dfs-text`, `--dfs-price`). Możesz je nadpisać z arkusza stylów swojego motywu, jeśli potrzebujesz pełnej kontroli. ## 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. Moduł nigdy nie klika natywnego przycisku Twojego motywu i nigdy nie modyfikuje jego formularza. Oba przyciski działają całkowicie niezależnie. ## 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.