Startseiten-Slider und Banner: Dokumentation

Überblick

DF Home Banners zeigt ein komplettes Hero-Raster auf der Startseite Ihres Shops, bestehend aus fünf Zonen: einem Hauptslider (mehrere Slides), einem oberen Seitenbanner, einem unteren Seitenbanner, einem breiten linken Banner und einem breiten rechten Banner. Auf dem Desktop nimmt der Slider etwa 75% der Breite ein, die beiden Seitenbanner sind rechts davon gestapelt, die beiden breiten Banner erscheinen darunter. Mobil stapelt sich das Raster in eine Spalte.

Das Modul ist für Geschwindigkeit gebaut: WebP-Konvertierung beim Upload, Preload des LCP-Bildes, Lazy Loading, Grössenattribute gegen CLS, 3 KB Vanilla-JavaScript und Smarty-Cache. Keine Abhängigkeiten: kein Composer, kein jQuery.

Installation

1. Gehen Sie im PrestaShop-Backoffice zu Module > Modul-Manager > Modul hochladen.
2. Wählen Sie die Datei dfhomebanners.zip aus Ihrem DataFirefly-Konto.
3. Das Modul installiert sich und legt einen Tab DF Home Banners im Menü Verbessern an, zusammen mit seinen Tabellen und dem Upload-Ordner für Bilder.

Modul-Einstellungen

Die Konfigurationsseite (Module > DF Home Banners > Konfigurieren) enthält:

• Autoplay-Verzögerung des Sliders in Millisekunden, mindestens 2000. Der Slider pausiert bei Hover, wenn der Browser-Tab verborgen ist, und respektiert die Systemeinstellung prefers-reduced-motion.
• Fünf Mobil-Schalter, einer pro Zone. Eine abgeschaltete Zone wird unter 768 px verborgen und ihre Bilder werden von mobilen Besuchern nie heruntergeladen: sie wechseln auf Lazy Loading, und ein verborgenes Lazy-Bild wird vom Browser nicht angefordert. Ist der Slider mobil abgeschaltet, wird sein LCP-Preload automatisch auf Desktop beschränkt.

Jedes Speichern der Einstellungen leert den Modul-Cache, die Wirkung im Frontoffice ist sofort sichtbar.

Banner verwalten

Die Verwaltung erfolgt im Tab DF Home Banners des Menüs Verbessern. Die Liste zeigt jedes Banner mit Zone, Titel, Daten, Position und Status, mit Filtern und Ein-Klick-Aktivierung.

Ein Banner anlegen

Klicken Sie auf Hinzufügen und füllen Sie aus:

• Zone: der Hauptslider akzeptiert mehrere Banner (eines pro Slide); jede der vier festen Zonen zeigt das erste aktive Banner gemäss Positionsreihenfolge.
• Bild: ein Feld pro Sprache. Akzeptierte Formate: JPEG, PNG, WebP. Das Bild wird auf die Maximalbreite seiner Zone verkleinert (1400 px für den Slider, 560 px für die Seitenbanner, 900 px für die breiten Banner) und in WebP mit Qualität 82 konvertiert, eine JPEG- oder PNG-Fallback-Datei bleibt erhalten. Die finalen Abmessungen werden gespeichert und als width– / height-Attribute gesetzt, um CLS zu eliminieren.
• Mobilbild: optional, ein Feld pro Sprache. Im Hochformat zuschneiden; es wird auf 768 px verkleinert, in WebP konvertiert und in Viewports unter 768 px über das picture-Element ausgeliefert. Vor allem für Slider-Slides sinnvoll.
• Titel / Alt-Text: wird als alt-Attribut des Bildes verwendet, pro Sprache.
• Link-URL: pro Sprache, optional.
• Position: Anzeigereihenfolge innerhalb der Zone (aufsteigend).

Mit Start- und Enddatum planen

Beide Datumsfelder sind optional. Akzeptiertes Format: JJJJ-MM-TT oder JJJJ-MM-TT HH:MM:SS. Ein Startdatum allein veröffentlicht das Banner ab diesem Zeitpunkt; ein Enddatum allein entfernt es zu diesem Zeitpunkt; beide zusammen rahmen die Kampagne. Leere Felder: das Banner wird dauerhaft angezeigt, solange es aktiv ist.

Multishop und Mehrsprachigkeit

Im Multishop-Kontext wird jedes Banner über die Zuordnungs-Checkboxen des Formulars den Shops Ihrer Wahl zugewiesen. Bild, Mobilbild, Link und Alt-Text werden pro Sprache definiert; eine Sprache ohne Bild zeigt schlicht nichts (das Banner bleibt in dieser Sprache verborgen, bis ein Bild hochgeladen wird). Der Cache ist pro Sprache und Shop isoliert.

Performance: was das Modul tut

• LCP: die erste aktive Slider-Slide wird im head über ein link rel="preload" mit fetchpriority="high" angekündigt. Mit Mobilbild werden zwei Preload-Tags mit media-Attributen ausgegeben: jedes Gerät lädt nur seine Variante vor.
• CLS: width– und height-Attribute sitzen auf jedem Bild, der Platz wird vor dem Laden reserviert.
• Gewicht: WebP als Ausgabe, Lazy Loading auf jedem Nicht-LCP-Bild, überall decoding="async".
• JavaScript: rund 3 KB Vanilla, per defer am Seitenende geladen. Pfeile, Punkte, Touch-Swipe, Autoplay.
• Server: Rendering pro Sprache und Shop in Smarty gecacht, eine einzige gebündelte SQL-Abfrage bei der Regeneration. CSS und JS nur auf dem Startseiten-Controller registriert.

Fehlerbehebung

Die Banner erscheinen nicht im Frontoffice

• Prüfen Sie, ob das Banner aktiv ist, ob ein Bild für die aufgerufene Sprache hochgeladen wurde und ob das heutige Datum im definierten Zeitraum liegt.
• Prüfen Sie im Multishop die Shop-Zuordnung des Banners.
• Das Theme muss den Hook displayHome bereitstellen, der in jedem Classic-basierten Theme vorhanden ist. Belegt bereits ein natives Slider-Modul den Bereich (ps_imageslider), deaktivieren Sie dieses, um ein doppeltes Bild zu vermeiden.

Die WebP-Konvertierung findet nicht statt

Ihrem PHP fehlt vermutlich imagewebp. Das Modul liefert dann die verkleinerten originalen JPEG- / PNG-Dateien aus. Bitten Sie Ihren Hoster, die WebP-Unterstützung von GD zu aktivieren.

Eine Änderung erscheint nicht sofort

Speichern Sie ein beliebiges Banner oder die Einstellungen: der Modul-Cache wird bei jedem Schreibvorgang geleert. Leeren Sie zusätzlich den globalen Smarty-Cache von PrestaShop, wenn Ihr Shop hinter einem Full-Page-Cache liegt (Varnish, LiteSpeed, CDN).

Deinstallation

Die Deinstallation entfernt den Admin-Tab, die Tabellen des Moduls und seine Konfigurationswerte. Hochgeladene Bilddateien bleiben im Modulordner, bis dieser von der Festplatte gelöscht wird.