PS PrestaShop PrestaShop Anfänger

Kategorie-Banner: vollständiger Leitfaden

Kategorie-Banner installieren, konfigurieren und nutzen: Position im Raster, Zeitsteuerung, Geltung für Unterkategorien, Motive pro Sprache, Multishop und Fehlerbehebung für PrestaShop 8 und 9.

Aktualisiert Modulversion 1.1.1

Überblick und Voraussetzungen

Kategorie-Banner fügt Motive an der Position Ihrer Wahl in das Produktraster Ihrer Kategorieseiten ein. Sie legen die Kategorie fest, die Produktnummer, nach der das Banner erscheinen soll, und das Bild je Sprache. Um den Rest kümmert sich das Modul, auch nach einem Facettenfilter oder einem Seitenwechsel.

  • Kompatibel mit PrestaShop 8.0 bis 9.x, Classic Theme und abgeleiteten Themes.
  • PHP 7.4 bis 8.3.
  • Multishop und mehrsprachig (fr, en, es, de, it, nl, pl, pt).
  • Kein Override, keine Template-Änderung, keine CRON-Aufgabe.
  • Das Banner-Markup wird serverseitig von einem Smarty-Template erzeugt; das JavaScript setzt es lediglich an die richtige Stelle, ohne jQuery und ohne Fremdbibliothek.

Hochgeladene Bilder liegen in /img/datafireflycategorybanner/, außerhalb des Modulordners. Sie überstehen daher Modul-Updates.

Installation

  1. Laden Sie das Archiv datafireflycategorybanner.zip aus Ihrem Kundenkonto herunter.
  2. Öffnen Sie im Backoffice Module > Modul-Manager.
  3. Klicken Sie auf Modul hochladen und legen Sie das Archiv ab.
  4. Klicken Sie auf Konfigurieren, um zur Bannerliste zu gelangen.

Bei der Installation legt das Modul seine drei Tabellen an (Banner, Übersetzungen, Shop-Zuordnung), erstellt den Ordner /img/datafireflycategorybanner/ und registriert seine Hooks.

Ein Banner anlegen

Klicken Sie auf der Konfigurationsseite auf Neues Banner hinzufügen. Das Formular fasst die folgenden Einstellungen zusammen.

Zielsetzung

  • Kategorie: die Kategorie, in der das Banner erscheint. Die Liste bildet den Shop-Baum ab, deaktivierte Kategorien sind gekennzeichnet.
  • Auf Unterkategorien anwenden: erweitert das Banner auf alle Unterkategorien der gewählten Kategorie, unabhängig von der Tiefe.
  • Nach Produktnummer: das Banner wird nach diesem Produkt der Liste eingefügt. Der Wert 4 platziert das Banner nach dem vierten angezeigten Produkt.
  • Banner-Link: Ziel-URL, absolut (https://…) oder mit einem Schrägstrich beginnend (/neuheiten). Leer lassen für ein nicht klickbares Banner.
  • CSS-Klasse: Rasterklassen für die Banner-Zelle, zum Beispiel col-12 oder col-12 col-md-6. Leer lassen, um automatisch die Klassen der Produktzellen Ihres Themes zu übernehmen.
  • Eigenes CSS: Deklarationen, die nur für dieses Banner gelten, zum Beispiel border-radius: 12px; padding: 10px;.

Zeitsteuerung und Status

  • Startdatum und Enddatum: Anzeigefenster im Format JJJJ-MM-TT HH:MM:SS. Ein leeres Feld bedeutet keine Begrenzung auf dieser Seite.
  • Aktiv: zeigt das Banner an oder setzt es aus, ohne es zu löschen.
  • Shop-Zuordnung: im Multishop die betroffenen Shops ankreuzen.

Bilder pro Sprache

Die Felder Bannerbild und Alternativtext gibt es für jede aktive Sprache. Die Sprachreiter oben im Formular blenden die Felder der gewählten Sprache ein. Liegt bereits ein Bild vor, erscheint eine Vorschau samt Schalter Bild löschen, der nur diese Sprache betrifft.

Zulässige Formate: JPG, PNG, GIF, WebP und SVG, bis 4 MB. Eine Breite von 1200 px passt zu den meisten Rastern.

Wie die Position berechnet wird

Die Position wird als Produktanzahl angegeben und gilt für jede Seite der Liste. Ein auf 4 gesetztes Banner erscheint nach dem vierten Produkt der aktuellen Seite, egal ob der Besucher auf Seite 1 oder Seite 3 ist.

Mehrere Banner können dieselbe Kategorie betreffen, jedes an seiner Position. Teilen sich zwei Banner dieselbe Position, werden sie in der Speicherreihenfolge nacheinander eingefügt. Übersteigt die Position die Anzahl der auf der Seite angezeigten Produkte, wird das Banner für diese Seite schlicht übersprungen, ohne die anderen zu verschieben.

Standardmäßig übernimmt das Banner die Breite einer Produktzelle: Das Modul liest die Rasterklassen des ersten Produkts der Liste und wendet sie auf das Banner an. Füllen Sie das Feld CSS-Klasse aus, um eine andere Breite zu erzwingen, etwa ein Banner über die volle Breite mit col-12.

Eine Aktion planen

Tragen Sie ein Start- und ein Enddatum ein, damit ein Banner von selbst erscheint und wieder verschwindet. Das ist das richtige Werkzeug, um Schlussverkauf, Black Friday oder eine Jahresendaktion Wochen im Voraus vorzubereiten.

  • Nur Startdatum: Das Banner erscheint an diesem Datum und bleibt danach sichtbar.
  • Nur Enddatum: Das Banner wird sofort angezeigt und endet an diesem Datum.
  • Beide Daten: Das Banner ist nur in diesem Fenster sichtbar.
  • Kein Datum: Das Banner ist dauerhaft.

Die Daten werden mit der Serverzeit Ihres Shops verglichen, nicht mit der Uhr des Besuchers.

Einen ganzen Baum abdecken

Die Option Auf Unterkategorien anwenden erspart Ihnen, dasselbe Banner in jeder Abteilung neu anzulegen. Auf einer übergeordneten Kategorie gesetzt, erscheint das Banner in dieser Kategorie und in allen ihren Nachfahren.

Die Auflösung nutzt den nativen verschachtelten Baum von PrestaShop (Spalten nleft und nright) und erzeugt daher keine zusätzliche Abfrage pro Seite. Verschieben Sie Kategorien im Baum, berechnet PrestaShop diese Werte neu und der Geltungsbereich folgt automatisch.

Bilder und Sprachen

Jedes Banner nimmt ein Motiv und einen Alternativtext pro Sprache an, womit Sie eine Botschaft oder einen Preis je Markt anpassen können. Hat eine Sprache kein eigenes Motiv erhalten, zeigt das Modul das der Standardsprache des Shops an, statt das Banner auszublenden.

Die Bildabmessungen werden beim Hochladen ausgelesen und in die HTML-Attribute width und height geschrieben, was Layoutverschiebungen beim Laden verhindert. Die Dateien werden mit einem zufälligen Suffix umbenannt und in /img/datafireflycategorybanner/ abgelegt.

Den Alternativtext lesen Suchmaschinen und Screenreader. Beschreiben Sie den Inhalt des Motivs, statt den Kategorienamen zu wiederholen.

Multishop

Ist die Multishop-Funktion aktiv, zeigt das Formular einen Block Shop-Zuordnung. Ein Banner erscheint nur in den angekreuzten Shops, und die Backoffice-Liste zeigt nur die im aktuellen Shop-Kontext sichtbaren Banner.

Ist kein Shop angekreuzt, ordnet das Modul das Banner dem aktuellen Kontext zu, damit nie ein verwaistes Banner entsteht.

Facettenfilter, Sortierung und Seitennavigation

In PrestaShop 8 und 9 laden Facettenfilter, Sortierung und Seitennavigation die Produktliste per AJAX neu, ohne die Seite neu zu laden. Das Modul lauscht auf das Ereignis updateProductList von PrestaShop, entfernt die vorherigen Banner und fügt sie nach jeder DOM-Aktualisierung an den richtigen Positionen wieder ein.

CSS und JavaScript werden nur auf Kategorieseiten geladen, und nur wenn die aktuelle Kategorie mindestens ein aktives und anzeigbares Banner hat.

Update von Version 1.0.0

Installieren Sie das neue Archiv im Modul-Manager einfach über das alte. Das Update-Skript erledigt Folgendes:

  • Spalten für Geltungsbereich, Zeitsteuerung und Bildabmessungen hinzufügen;
  • die Zuordnungstabelle für Shops anlegen und den ursprünglichen Shop jedes Banners übernehmen;
  • vorhandene Bilder von views/img/banners/ nach /img/datafireflycategorybanner/ verschieben und ihre Abmessungen auslesen;
  • einen nicht mehr benötigten Hook entfernen.

Ihre Banner, deren Positionen und Motive bleiben erhalten.

FAQ und Fehlerbehebung

Das Banner erscheint nicht auf der Kategorieseite

Prüfen Sie der Reihe nach: Das Banner ist aktiv; das heutige Datum liegt im Zeitfenster; die anvisierte Kategorie ist die aufgerufene, oder die Geltung für Unterkategorien ist eingeschaltet; die angezeigte Sprache hat ein Bild, oder die Standardsprache hat eines; im Multishop ist der aktuelle Shop angekreuzt. Leeren Sie zuletzt den PrestaShop-Cache.

Das Banner erscheint an der falschen Stelle

Die Position zählt die Produkte der aktuellen Seite. Zeigt Ihre Liste 12 Produkte pro Seite, erscheint ein Banner auf Position 20 auf keiner Seite. Senken Sie den Wert oder erhöhen Sie die Produktanzahl pro Seite.

Das Banner zerstört das Rasterlayout

Leeren Sie das Feld CSS-Klasse, damit das Banner die Klassen der Produktzellen Ihres Themes übernimmt. Für ein Banner über die volle Breite tragen Sie col-12 ein. Mischen Sie keine Klassen unterschiedlicher Rastersysteme.

Das Banner verschwindet nach dem Filtern

Das Modul hängt sich erneut an das Ereignis updateProductList. Ersetzt Ihr Theme oder ein Filtermodul eines Drittanbieters den gesamten Container der Produktliste, ohne dieses Ereignis auszulösen, kann das Wiedereinfügen nicht stattfinden. Wenden Sie sich mit Theme und Filtermodul an den Support.

Das Bild lässt sich nicht hochladen

Das Modul akzeptiert JPG, PNG, GIF, WebP und SVG bis 4 MB. Prüfen Sie außerdem, ob /img/datafireflycategorybanner/ beschreibbar ist und ob die PHP-Direktiven upload_max_filesize und post_max_size größer als die Datei sind.

Akzeptiert werden nur URLs, die mit http://, https:// oder einem Schrägstrich beginnen. Das schützt vor der Einschleusung von javascript:– oder data:-Adressen.

Was passiert bei der Deinstallation?

Das Modul löscht seine Tabellen und entfernt den Ordner /img/datafireflycategorybanner/ samt der darin liegenden Motive. Sichern Sie Ihre Bilder, wenn Sie später erneut installieren wollen.

War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren