Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa Przyklejony przycisk Dodaj do koszyka dla PrestaShop, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Po co przyklejony przycisk zakupu
Na mobile ponad 60 procent odwiedzających przewija poniżej przycisku Dodaj do koszyka, nie klikając go. Na desktopie jest niewiele lepiej przy długich kartach produktu ze szczegółowym opisem, opiniami klientów i produktami powiązanymi. Przyklejony pasek, który podąża za klientem, przechwytuje intencję zakupową dokładnie w momencie, gdy ta zanika. Duże marketplace'y, z Amazonem na czele, mają tę funkcję w standardzie od lat.
UX dopasowany do każdego formatu ekranu
Na mobile (poniżej 992 pikseli szerokości) kompaktowy pasek dokuje się na dole ekranu, z poszanowaniem safe-area iPhoneów z wcięciem. Na desktopie masz dwa tryby do wyboru w back office: pływający panel po prawej, który wsuwa się z dyskretną animacją, albo wyśrodkowany pasek na dole w stylu mobilnym. Wybierasz według swojego designu i typu karty produktu.
Inteligentny mini wybór wariantu
Kompaktowy selektor pokazuje wszystkie dostępne kombinacje wraz z ich ceną i dostępnością. Gdy klient zmienia wariant w przyklejonym pasku, moduł automatycznie synchronizuje interfejs wariantów na głównej stronie (przyciski radio albo listy rozwijane), co uruchamia natywny silnik kombinacji PrestaShop: cena przeliczona, stan zweryfikowany, zdjęcie zaktualizowane, dokładnie tak, jakby klient klikał w samej karcie.
Czysta integracja, zero niespodzianek
Moduł używa oficjalnych hooków PrestaShop i trzyma się z dala od głównego drzewa DOM Twojego motywu. Kliknięcie Dodaj do koszyka w przyklejonym pasku wyzwala programowo oryginalny przycisk, co zachowuje modal potwierdzenia, zdarzenia updateCart, powiadomienia o sukcesie i wszelkie personalizacje już obecne w Twoim motywie albo innych modułach.
Dopracowana wydajność
Żadnego frameworka, żadnych zewnętrznych zależności. CSS waży około 7 kB, a JavaScript około 12 kB łącznie z gzipem. Zasoby są ładowane wyłącznie na stronach produktu, nigdy na stronie głównej, w katalogu czy w checkoucie. Widocznością paska steruje natywny IntersectionObserver, znacznie wydajniejszy niż ciągły nasłuch przewijania.
Personalizacja z back office
Wszystko konfigurujesz z panelu PrestaShop, bez dotykania kodu: globalna aktywacja, wyświetlanie per urządzenie (mobile i lub desktop), tryb desktopowy (pływający panel albo pasek na dole), przesunięcie górne dla motywów z przyklejonym nagłówkiem, wyświetlanie miniatury, wyboru wariantu i wyboru ilości oraz pełna paleta kolorów (tło, przycisk, tekst przycisku, kolor tekstu, kolor ceny).
Dostępność i dobre praktyki
Przyklejony pasek respektuje zalecenia ARIA: rola region, jednoznaczne etykiety dla każdej kontrolki, komunikaty aria-live przy zmianach ceny, widoczny fokus na wszystkich przyciskach, pełna obsługa klawiatury. Media query prefers-reduced-motion wyłącza przejścia dla użytkowników wrażliwych na animacje. Wszystkie teksty są tłumaczalne.
Na razie nie ma opinii o produkcie.