DataFirefly Nach oben — Dokumentation
Den Nach-oben-Button auf PrestaShop 8 und 9 installieren und konfigurieren.
Das Modul DataFirefly Nach oben fügt einen schwebenden Button hinzu, der Ihre Besucher mit nur einem Klick an den Seitenanfang zurückbringt. Diese Anleitung behandelt die Installation und alle verfügbaren Einstellungen.
Installation
- Gehen Sie im Back-Office zu Module > Modul-Manager.
- Klicken Sie auf Ein Modul hochladen (oben rechts) und senden Sie das Archiv
dfbacktotop.zip. - Klicken Sie nach Abschluss der Installation auf Konfigurieren.
Das Modul registriert sich automatisch an den Hooks actionFrontControllerSetMedia und displayFooter. Eine manuelle Hook-Einrichtung ist nicht erforderlich.
Konfiguration
Die Konfigurationsseite hat zwei Tabs: Verhalten und Erscheinungsbild.
Tab Verhalten
- Auslöseschwelle (px) — Anzahl der gescrollten Pixel, ab der der Button erscheint. Standard:
300. - Sanftes Scrollen — aktiviert die animierte, schrittweise Rückkehr. Deaktiviert erfolgt die Rückkehr nach oben sofort.
- Auf Mobilgeräten anzeigen — zeigt oder verbirgt den Button auf Bildschirmen unter 768 px Breite.
Tab Erscheinungsbild
- Position — unten rechts oder unten links.
- Icon — Chevron, Pfeil oder Dreieck (integrierte SVG-Icons).
- Button-Größe — Durchmesser des Buttons, von 24 bis 120 px.
- Eckenradius — von 0 % (eckig) bis 50 % (Kreis).
- Horizontaler / vertikaler Rand — Abstand zu den Bildschirmrändern.
- Hintergrundfarbe, Hintergrundfarbe (Hover), Icon-Farbe — Hexadezimalcodes.
- Schlagschatten — fügt einen weichen Schatten unter dem Button hinzu.
- z-index — erhöhen Sie diesen Wert, wenn der Button unter anderen festen Elementen erscheint (Cookie-Banner, Chat usw.).
Jede Einstellung wird beim Speichern validiert: Farben müssen gültige Hexadezimalcodes sein, und sowohl Größe als auch Radius sind begrenzt, um eine fehlerhafte Darstellung zu verhindern.
Button-Formen
Die Form wird vollständig über den Eckenradius gesteuert:
50 %— perfekter Kreis.20 %— Quadrat mit abgerundeten Ecken.0 %— scharfkantiges Quadrat.
Theme-Kompatibilität
Der Button wird über den Hook displayFooter eingefügt, der im Classic-Theme und der großen Mehrheit der PrestaShop-Themes vorhanden ist. Wenn Ihr individuelles Theme diesen Hook nicht aufruft, erscheint der Button nicht: Fügen Sie einfach den Hook-Aufruf in das Footer-Template des Themes ein.
Performance und Barrierefreiheit
- Natives JavaScript von etwa 1,5 KB, ohne jQuery oder externe Abhängigkeit.
- Scroll-Erkennung über
requestAnimationFrameund einen passiven Listener, ohne spürbaren Einfluss auf die Core Web Vitals. - Nativer Button mit
aria-label-Attribut und sichtbarem Tastaturfokus. - Berücksichtigt die Systemeinstellung
prefers-reduced-motion: Das Scrollen wird sofort, wenn der Nutzer Animationen reduziert hat. - Keine Erfassung personenbezogener Daten — DSGVO-freundlich konzipiert.
FAQ
Der Button erscheint nicht, was ist zu prüfen?
Stellen Sie sicher, dass Ihr Theme den Hook displayFooter implementiert und dass Sie weit genug gescrollt haben, um die Auslöseschwelle (standardmäßig 300 px) zu überschreiten. Leeren Sie außerdem den PrestaShop-Cache nach der Installation.
Kann ich es im Multistore verwenden?
Ja. Die Einstellungen werden über Configuration gespeichert und gelten je nach aktivem Shop-Kontext.
Ist das Modul wirklich kostenlos?
Ja, unter einer kostenlosen Lizenz, ohne Funktionsbeschränkung.