PS PrestaShop PrestaShop Anfänger

Startseiten-Slider und Banner: Dokumentation

Startseiten-Slider- und Banner-Modul installieren und konfigurieren: Zonen, WebP, Mobilbild, Zeitplanung und Performance.

Aktualisiert Modulversion 1.4.1

Ü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.

Voraussetzungen: PrestaShop 8.0 oder höher, PHP mit GD-Erweiterung (auf praktisch allen Hostings vorhanden). Die GD-Funktion imagewebp wird für die WebP-Konvertierung genutzt; fehlt sie, funktioniert das Modul trotzdem mit den originalen JPEG- / PNG-Dateien.

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.

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. Es funktioniert in allen fünf Zonen, Slider und vier Banner: vor allem nützlich, wenn das Desktop-Visual Text enthält, der auf dem Telefon unlesbar wird (zum Beispiel ein breites Banner mit 900×260 px).
  • Dieses Bild für alle Sprachen verwenden: eine Checkbox über den Feldern Bild und eine weitere über den Feldern Mobilbild, sobald der Shop mehr als eine Sprache hat. Ist sie aktiviert, bleibt nur das Feld der Standardsprache sichtbar: das hochgeladene Bild wird einmal verarbeitet und in allen Sprachen ausgeliefert, ohne doppelte Dateien auf dem Server. Deaktivieren Sie sie, um pro Sprache ein anderes Visual zu hinterlegen (zum Beispiel mit übersetztem Text im Bild). Bei einem neuen Banner ist sie standardmässig aktiviert, bei einem bestehenden Banner dann, wenn alle Sprachen bereits dieselbe Datei nutzen.
  • Titel / Alt-Text: wird als alt-Attribut des Bildes verwendet, pro Sprache.
  • Link: wählen Sie den Typ aus der Liste: Produkt (Suche nach Name oder Referenz), Kategorie, Hersteller und CMS-Seite (Suche nach Name) oder eigene URL. Produkt-, Kategorie-, Hersteller- und CMS-URLs generiert PrestaShop automatisch in Sprache und Shop des Besuchers, URL-Rewriting inklusive. Die eigene URL wird pro Sprache eingegeben und darf für ein Banner ohne Link leer bleiben.
  • Position: Anzeigereihenfolge innerhalb der Zone (aufsteigend).

Hochladen der Bilder beim Speichern

Wenn Sie auf Speichern klicken, werden die ausgewählten Bilder nicht in einer einzigen Anfrage gesendet. Jedes Bild wird zuerst im Browser auf die Maximalbreite seiner Zone verkleinert, dann einzeln in einer eigenen AJAX-Anfrage gesendet und vom Server verarbeitet (Verkleinerung und WebP), eines nach dem anderen. Eine Meldung zeigt den Fortschritt Bild für Bild. Sind alle Bilder verarbeitet, wird das Formular ohne Dateien gespeichert. Der Server verarbeitet so immer nur ein Bild gleichzeitig, auch bei einem Banner in 8 Sprachen mit Mobilbildern.

Schlägt ein Bild fehl, stoppt das Speichern und die Meldung nennt das Feld und den Grund (Datei zu gross für das Upload-Limit, Bild zu gross für den PHP-Speicher, nicht unterstütztes Format). Korrigieren Sie dieses Feld und speichern Sie erneut: bereits hochgeladene Bilder werden nicht noch einmal gesendet.

Ist JavaScript nicht verfügbar, fällt das Formular auf den klassischen Upload aller Bilder auf einmal zurück. Wenn Sie ein Bild ersetzen, wird die alte Datei erst nach dem Speichern gelöscht, und nur dann, wenn keine andere Sprache sie noch nutzt.

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.

Da das Rendering gecacht wird, bettet das Modul ein Stunden-Token in seinen Cache-Schlüssel ein: ein geplantes Banner erscheint oder verschwindet innerhalb der Stunde nach seinem Termin, ohne jeden Eingriff. Jedes Speichern im Backoffice erzwingt die sofortige Regeneration.

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.

Für ein optimales LCP zielen Sie auf ein Slider-Visual unter 150 KB nach der Konvertierung (das Modul zeigt das erreichte Gewicht an). Ein JPEG-Original in guter Qualität genügt, die WebP-Konvertierung erledigt den Rest.

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.

Das Speichern scheitert bei vielen Bildern

Seit Version 1.4.0 werden die Bilder einzeln hochgeladen und vor dem Senden im Browser verkleinert, das sollte also nicht mehr vorkommen. Erscheint trotzdem eine Fehlermeldung, nennt sie das Feld und die Ursache. Bei einer zu grossen Datei erhöhen Sie upload_max_filesize und post_max_size in der PHP-Konfiguration oder verkleinern das Bild. Bei einem Bild, das zu gross für den Speicher ist, versucht das Modul, memory_limit automatisch zu erhöhen; verbietet Ihr Hoster das, verkleinern Sie das Visual vor dem Upload auf unter 3000 px Breite. Prüfen Sie ausserdem, dass das Modul mindestens in Version 1.4.0 installiert ist.

Das Mobilbild eines Banners erscheint nicht auf dem Telefon

Vor Version 1.4.1 nutzten nur die Slides des Sliders das Mobilbild, die vier festen Banner zeigten immer das Desktop-Bild. Aktualisieren Sie das Modul auf 1.4.1: das Update leert den Modul-Cache. Leeren Sie auch einen eventuellen Full-Page-Cache (LiteSpeed, Varnish, CDN) und testen Sie unter 768 px Breite. Im Netzwerk-Tab der Entwicklertools muss die Datei geladen werden, deren Name image_mobile enthält.

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.

War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren