DataFirefly Powrót na Górę: dokumentacja
Zainstaluj i skonfiguruj przycisk „Powrót na górę” w PrestaShop 8 i 9.
Moduł DataFirefly Powrót na Górę dodaje pływający przycisk, który przenosi odwiedzających na początek strony jednym kliknięciem. Ten przewodnik obejmuje instalację i wszystkie dostępne ustawienia.
Instalacja
- W panelu administracyjnym przejdź do Moduły > Menedżer modułów.
- Kliknij Wgraj moduł (w prawym górnym rogu) i wyślij archiwum
dfbacktotop.zip. - Po zakończeniu instalacji kliknij Konfiguruj.
Moduł rejestruje się automatycznie na hookach actionFrontControllerSetMedia i displayFooter. Ręczna interwencja przy hookach nie jest potrzebna.
Konfiguracja
Strona konfiguracji składa się z dwóch zakładek: Zachowanie i Wygląd.
Zakładka Zachowanie
- Próg wyzwolenia (px) : liczba pikseli przewinięcia, po której przycisk się pojawia. Wartość domyślna:
300. - Płynne przewijanie : włącza animowany, stopniowy powrót na górę. Po wyłączeniu powrót jest natychmiastowy.
- Pokaż na urządzeniach mobilnych : wyświetla lub ukrywa przycisk na ekranach węższych niż 768 px.
Zakładka Wygląd
- Pozycja : w prawym dolnym lub lewym dolnym rogu.
- Ikona : szewron, strzałka lub trójkąt (wbudowane ikony SVG).
- Rozmiar przycisku : średnica przycisku, od 24 do 120 px.
- Promień narożników : od 0 % (kwadrat) do 50 % (koło).
- Margines poziomy i pionowy : odległość od krawędzi ekranu.
- Kolor tła, Kolor tła po najechaniu, Kolor ikony : kody szesnastkowe.
- Cień : dodaje miękki cień pod przyciskiem.
- z-index : zwiększ tę wartość, jeśli przycisk chowa się pod innymi elementami o stałej pozycji (baner cookies, czat i tym podobne).
Każde ustawienie jest walidowane przy zapisie: kolory muszą być prawidłowymi kodami szesnastkowymi, a rozmiar i promień są ograniczone zakresem, aby uniknąć zepsutego wyświetlania.
Kształty przycisku
Kształt jest w całości sterowany przez promień narożników:
50 %: idealne koło.20 %: kwadrat z zaokrąglonymi narożnikami.0 %: ostry kwadrat.
Zgodność z Twoim motywem
Przycisk jest wstrzykiwany przez hook displayFooter, obecny w motywie Classic i w zdecydowanej większości motywów PrestaShop. Jeśli Twój motyw własny nie wywołuje tego hooka, przycisk się nie wyświetli. Wystarczy wtedy dodać wywołanie hooka w szablonie stopki motywu.
Wydajność i dostępność
- Natywny JavaScript o wielkości około 1,5 kB, bez jQuery i bez zewnętrznych zależności.
- Śledzenie przewijania przez
requestAnimationFramei pasywny nasłuch zdarzeń, bez odczuwalnego wpływu na Core Web Vitals. - Natywny przycisk z atrybutem
aria-labeli widocznym fokusem klawiatury. - Poszanowanie preferencji systemowej
prefers-reduced-motion: przewijanie staje się natychmiastowe, jeśli użytkownik ograniczył animacje. - Brak zbierania danych osobowych, zgodność z RODO wynikająca z samej konstrukcji.
FAQ
Przycisk się nie wyświetla, co sprawdzić?
Sprawdź, czy Twój motyw implementuje hook displayFooter i czy przewinąłeś stronę wystarczająco daleko, aby przekroczyć próg wyzwolenia (domyślnie 300 px). Po instalacji wyczyść również pamięć podręczną PrestaShop.
Czy mogę używać modułu w multisklepie?
Tak. Ustawienia są zapisywane przez Configuration i stosowane zgodnie z aktywnym kontekstem sklepu.
Czy moduł jest naprawdę bezpłatny?
Tak, na licencji bezpłatnej, bez ograniczeń funkcjonalnych.