Brand Carousel: Dokumentation des PrestaShop Marken-Sliders

Installation

Öffnen Sie im Backoffice Module > Modulverwaltung, klicken Sie auf „Modul hochladen“ und senden Sie die Datei dfbrandcarousel-2.0.0.zip. Das Modul ist mit PrestaShop 8.0 bis 9.x kompatibel.

Bei der Installation legt das Modul seine zwei Tabellen, den Hook displayDfBrandCarousel, den Ordner /img/dfbrandcarousel/ für Ersatzlogos und einen ersten Block an: ein Markenkarussell auf der Startseite (displayHome) mit dem Titel „Unsere Marken“, übersetzt in jede installierte Sprache. Öffnen Sie Ihren Shop, um das Ergebnis zu sehen, und bearbeiten oder löschen Sie diesen Block anschließend.

Das Modul wird über seine Schaltfläche „Konfigurieren“ in der Modulverwaltung bedient.

Update von Version 1.0.x

Laden Sie das ZIP 2.0.0 über die installierte Version hoch. Das Update-Skript legt die neuen Tabellen an und übernimmt Ihre Einstellungen in einen Block namens „Brand carousel“ am selben Hook: Titel, Anzahl der Marken, Spalten, automatischer Bildlauf, Geschwindigkeit, Abstand, Pfeile, Punkte, ausgewählte Marken und zufällige Reihenfolge. Marken ohne Produkte bleiben wie bisher sichtbar. Die alten Einstellungen DFBC_* werden danach gelöscht. Swiper wird nicht mehr verwendet, das beendet Konflikte mit Themes und Page Buildern, die ihre eigene Version laden.

Die Blockliste

Der Tab Blöcke listet Ihre Blöcke mit Modus, Hook und Quelle. Für jeden Block können Sie:

• den Block mit dem Schalter aktivieren oder deaktivieren,
• den Block im Editor bearbeiten,
• den Block duplizieren (die Kopie wird deaktiviert angelegt),
• den Block löschen,
• die Blöcke per Drag and Drop sortieren, wenn mehrere denselben Hook nutzen.

Die Schaltfläche „Cache leeren“ löscht den Cache für Marken, Produktanzahlen und Verkäufe (siehe Cache und Leistung).

Der Block-Editor

Der Editor zeigt links die Einstellungen, verteilt auf 5 Tabs, und rechts eine Vorschau. Die Vorschau aktualisiert sich bei jeder Änderung und lässt sich auf Desktop-, Tablet- oder Mobilbreite umschalten. Sie nutzt eine neutrale Schrift: Im Shop verwendet der Block die Schriften Ihres Themes.

Die obere Leiste enthält den internen Blocknamen, den Aktiv-Schalter, die Sprachauswahl für übersetzbare Felder und die Schaltfläche Speichern. Ein Hinweis markiert ungespeicherte Änderungen, Strg+S (Cmd+S auf dem Mac) speichert, ohne den Editor zu verlassen.

Tab Inhalt

Überschrift

• Titel und Untertitel: pro Sprache. Lassen Sie den Titel leer, um ihn auszublenden.
• Titel-Tag: H2 auf der Startseite, H3 auf einer Seite mit vorhandenen H2-Überschriften, oder p und div für einen Titel ohne Überschriftenfunktion.
• Aufbau der Überschrift: Titel links und Link rechts, alles links oder zentriert. In den beiden letzten Fällen wandert der Link unter die Logos.
• Link zu allen Marken: Text pro Sprache und URL. Ohne URL führt der Link zur Markenseite von PrestaShop.

Anzuzeigende Marken

• Alle aktiven Marken des Shops.
• Manuelle Auswahl: Fügen Sie Marken aus der linken Liste mit der Schaltfläche + hinzu und sortieren Sie sie per Drag and Drop in der rechten Liste. „Ganze Liste hinzufügen“ fügt die Marken der aktuellen Suche hinzu.
• Marken einer Kategorie: Marken mit mindestens einem sichtbaren Produkt in der gewählten Kategorie oder ihren Unterkategorien.
• Marken der aktuellen Kategorie: auf einer Kategorieseite die Marken dieser Kategorie, auf einer Produktseite die ihrer Hauptkategorie, sonst alle Marken.

Diese Einstellungen ergänzen die Quelle:

• Ausgeschlossene Marken: aus der Liste entfernt, außer bei manueller Auswahl.
• Sortierung: Ihre Reihenfolge (manuelle Auswahl), alphabetisch, meiste Produkte zuerst, Bestseller zuerst über 7 bis 730 Tage, neueste Marken zuerst oder zufällig bei jedem Besuch. Die alphabetische Sortierung ignoriert Akzente und Satzzeichen: L’Oréal wird wie „loreal“ einsortiert.
• Maximale Anzahl Marken: 0 zeigt alle passenden Marken.
• Mindestanzahl Produkte: standardmäßig 1, damit Besucher nie auf einer leeren Markenseite landen.
• Nur Marken mit Logo: wird vor der Höchstanzahl angewendet, Sie erhalten also die gewünschte Anzahl.

Die Zufallsreihenfolge entsteht im Browser. Ein Full-Page-Cache kann allen Besuchern dieselbe Seite liefern, die Reihenfolge ändert sich trotzdem bei jedem Besuch. In den Laufband-Modi gilt die Höchstanzahl zuerst in alphabetischer Reihenfolge, danach werden die ausgewählten Marken gemischt.

Tab Layout

Die 8 Anzeigemodi

• Karussell: Logos, die seiten- oder logoweise weiterlaufen, auf 1 bis 3 Zeilen, mit Pfeilen, Punkten und automatischem Bildlauf.
• Laufband: Logos, die ohne Pause auf 1 bis 4 Zeilen gleiten.
• Vertikales Laufband: 1 bis 4 Spalten, die nach oben oder unten laufen.
• Raster: Karten in Spalten, optional mit Suche, Buchstabenfilter und Schaltfläche „Mehr anzeigen“.
• Logowand: Raster ohne Karten, Logos durch feine Linien getrennt.
• Wechselnde Logowand: festes Raster, dessen Logos einzeln wechseln.
• Chips: Markennamen in kompakten Chips, optional mit kleinem Logo. Geeignet für eine Seitenspalte.
• A-Z-Verzeichnis: alle Marken nach Buchstaben gruppiert, mit klickbarer Buchstabenleiste und Suche.

Spalten

Die Spaltenzahl wird getrennt für Desktop (1 bis 12), Tablet (1 bis 8) und Mobil (1 bis 4) eingestellt. Diese Stufen hängen von der verfügbaren Breite des Blocks ab, nicht von der Bildschirmbreite: Ein Block in einer Seitenspalte nutzt auch auf einem großen Bildschirm die mobile Einstellung.

• Zeilen (Karussell und wechselnde Logowand): 1 bis 3. Im Karussell füllen die Logos jede Spalte von oben nach unten, dann laufen die Zeilen gemeinsam.
• Teil des nächsten Logos zeigen (Karussell): Auf Tablet und Mobil ragt das nächste Logo herein, um zu zeigen, dass sich die Liste wischen lässt. Die seitlichen Pfeile werden dann auf Mobilgeräten ausgeblendet.
• Zeilen vor Mehr anzeigen (Raster und Logowand): 0 zeigt alles auf einmal.

Laufband und vertikales Laufband

• Zeilen (beim vertikalen Laufband Spalten): 1 bis 4, nie mehr als Marken vorhanden sind.
• Unterschiedliche Marken pro Zeile: Die Marken werden auf die Zeilen verteilt. Ausgeschaltet zeigt jede Zeile alle Marken versetzt. Die Verteilung braucht mindestens 3 Marken pro Zeile, sonst versetzt das Modul die Zeilen.
• Logobreite (horizontal) oder Höhe des Blocks (vertikal).

Suche und Filter

Das Suchfeld (Raster, Logowand, Verzeichnis) filtert die Marken schon während der Eingabe, ohne Akzente und Satzzeichen zu berücksichtigen. Der Buchstabenfilter (Raster und Logowand) zeigt eine Leiste 0-9, A bis Z und # für Namen, die weder mit einem Buchstaben noch mit einer Ziffer beginnen. Buchstaben ohne Marke sind ausgegraut. Das Verzeichnis unterstützt 1 bis 6 Spalten und kleine Logos neben den Namen.

Abstände und Breite

• Abstand zwischen den Logos und vertikaler Innenabstand des Abschnitts.
• Breite: Breite der Position, Hintergrund in voller Breite (der Hintergrund füllt den Bildschirm, der Inhalt bleibt in der Theme-Spalte) oder volle Breite von Rand zu Rand (praktisch für ein Laufband über den ganzen Bildschirm).

Tab Stil

Markenkarten

• Kartenstil: gefüllt, Kontur, Schatten oder schlicht.
• Maximale Logohöhe, minimale Kartenhöhe, Innenabstand und Eckenradius.
• Markenname: nur ohne Logo, immer unter dem Logo oder beim Überfahren.
• Kurzbeschreibung: die ersten 160 Zeichen der Kurzbeschreibung der Marke.

Logos

• Anzahl der Produkte unter dem Logo oder im Chip.
• Logo-Effekt: keiner, Graustufen und Farbe beim Überfahren, immer Graustufen, abgeblendet und voll beim Überfahren.
• Hover-Effekt der Karten: Anheben, Logo-Zoom, Kontur in Akzentfarbe oder keiner.
• Weiße Hintergründe entfernen: lässt das Weiß der JPG-Logos in hellen Karten verschwinden. Auf dunklem Hintergrund deaktiviert lassen und stattdessen transparente Logos verwenden.
• Bildgröße: Das Originalbild wird empfohlen. PrestaShop-Bildgrößen fügen oft weiße Ränder um die Logos hinzu.

Farben

Sechs Farben sind einstellbar: Akzent (Pfeile, Links, aktiver Buchstabe), Kartenhintergrund, Rahmen, Hintergrund des Abschnitts, Titel und Text. „Zurücksetzen“ überlässt die Farbe wieder dem Theme. Text auf der Akzentfarbe wird je nach Kontrast automatisch weiß oder schwarz.

Tab Animation

Karussell

• Automatischer Bildlauf und Pause zwischen den Seiten (1 bis 15 Sekunden).
• Dauer des Übergangs und Schrittweite: eine ganze Seite oder ein Logo.
• Am Ende zum Anfang zurück: Nach dem letzten Logo springt das Karussell zum ersten zurück. Für einen endlosen Lauf verwenden Sie den Modus Laufband.
• Pfeile: 4 Stile (gefüllt, Kontur, quadratisch, minimal) und 4 Positionen (an den Rändern überstehend, innerhalb der Ränder, in der Überschrift, unter den Logos).
• Punkte zur Seitennavigation.

Das Karussell lässt sich auch per Tastatur (Pfeiltasten links und rechts), per Wischen und durch Ziehen mit der Maus bedienen.

Laufband und vertikales Laufband

• Richtung: nach links oder rechts, nach oben oder unten.
• Zeilen abwechseln: Jede zweite Zeile läuft in die Gegenrichtung.
• Geschwindigkeit: 5 bis 400 Pixel pro Sekunde, unabhängig von der Länge der Zeile.
• Beim Überfahren: verlangsamen, anhalten oder weiterlaufen. Das Verlangsamen erfolgt stufenlos.
• Ränder ausblenden: Die Logos werden an den Rändern ein- und ausgeblendet.

Wechselnde Logowand

Stellen Sie die Zeilenzahl und die Zeit zwischen den Wechseln ein (0,8 bis 20 Sekunden). Bei jedem Wechsel wird ein Logo des Rasters durch eine Marke ersetzt, die noch nicht sichtbar ist.

Barrierefreiheit

Die Pause-Schaltfläche, von WCAG 2.2.2 für alle Inhalte empfohlen, die sich länger als 5 Sekunden bewegen, erscheint in der Überschrift oder unter den Logos. Animationen stoppen auch beim Überfahren, bei Tastaturfokus, bei verborgenem Tab und wenn der Block den Bildschirm verlässt. Für Besucher, die in ihrem System Bewegungen reduziert haben, wird das Laufband zu einer ruhenden Reihe, die sie von Hand scrollen, und das Karussell läuft nicht mehr von selbst.

Tab Anzeige

Position

Das Feld Hook bietet 14 gruppierte Positionen:

• Startseite: displayHome.
• Alle Seiten: displayWrapperTop, displayWrapperBottom, displayContentWrapperTop, displayContentWrapperBottom, displayNavFullWidth, displayFooterBefore, displayFooterAfter.
• Spalten: displayLeftColumn, displayRightColumn.
• Bestimmte Seiten: displayFooterProduct, displayFooterCategory, displayShoppingCartFooter.
• Integration: displayDfBrandCarousel, oder „Keiner“ für einen Block, der nur per Widget oder Shortcode erscheint.

„Anderer Hook“ akzeptiert jeden Namen, der mit display beginnt (Buchstaben, Ziffern und Unterstriche). Das Modul registriert sich beim Speichern darauf. Ihr Theme muss diesen Hook anschließend aufrufen.

Seiten und Geräte

Seiten beschränkt den Block auf bestimmte Seitentypen: Startseite, Kategorien, Produkte, Marken, CMS-Seiten, Suche, Warenkorb und Kasse, andere Seiten. Nichts ausgewählt bedeutet alle Seiten, auf denen der Hook existiert. Geräte blendet den Block auf Desktop (ab 992 px), Tablet (576 bis 991 px) oder Mobil (unter 576 px) aus.

Statistiken

Mit „Klicks an Google Analytics senden“ löst jeder Klick auf eine Marke das Ereignis dfbc_brand_click mit den Parametern dfbc_block, brand_id und brand_name aus. Das Ereignis geht an dataLayer, wenn Google Tag Manager vorhanden ist, sonst an gtag. Legen Sie in GTM einen Trigger „Benutzerdefiniertes Ereignis“ für dfbc_brand_click an.

Einen Block an anderer Stelle einfügen

Der Tab Integration des Moduls und der Abschnitt „Diesen Block anderswo einfügen“ jedes gespeicherten Blocks liefern die Codes zum Kopieren. Ersetzen Sie 3 durch die Blocknummer.

• In einem Theme-Template: {widget name='dfbrandcarousel' id_block=3} zeigt diesen Block, unabhängig von seinem Hook.
• Mit dem Modul-Hook: {hook h='displayDfBrandCarousel'} zeigt alle Blöcke dieses Hooks, {hook h='displayDfBrandCarousel' id_block=3} einen bestimmten Block.
• In einer CMS-Seite: Fügen Sie [dfbrandcarousel id="3"] in den Inhalt ein. Der Shortcode wird durch den Block ersetzt, auch wenn er allein in einem Absatz steht.
• AJAX-Inhalte oder Page Builder: Wird der Block nach dem Laden der Seite eingefügt, rufen Sie window.DFBC.init(container) auf. window.DFBC.destroy(container) stoppt die Blöcke sauber, bevor ihr HTML entfernt wird.

Erscheint ein Block auf einer Seite, auf der das Modul seine Dateien nicht geladen hat (Widget in einem Template, eigener Hook), fügt der Block sie selbst hinzu, einmal pro Seite.

Markenlogos

Der Tab Markenlogos listet alle aktiven Marken mit ihrem PrestaShop-Logo und ihrer Produktanzahl.

• Alternatives Logo: Laden Sie eine PNG-, JPG-, WebP-, GIF- oder SVG-Datei bis 2 MB hoch. Sie ersetzt das PrestaShop-Logo in allen Blöcken. „Entfernen“ stellt das Originallogo wieder her.
• Eigener Link: vollständige URL (https://…) oder Pfad, der mit / beginnt. Ein Link zu einer anderen Website öffnet sich in einem neuen Tab. Leer führt der Link zur Markenseite.

SVG-Dateien mit Skripten, Ereignisattributen, eingebetteten Objekten oder externen Links werden abgelehnt: Exportieren Sie sie erneut als einfaches SVG. Die Dateien liegen in /img/dfbrandcarousel/, dessen .htaccess die Ausführung von Skripten verhindert und für SVG eine Sicherheitsrichtlinie setzt.

Hat ein Bildoptimierungsmodul .webp– oder .avif-Versionen neben den PrestaShop-Logos in /img/m/ erzeugt, werden sie kompatiblen Browsern automatisch ausgeliefert.

HTML anpassen

Kopieren Sie modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl nach themes/ihr-theme/modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl und bearbeiten Sie die Kopie. Modul-Updates überschreiben sie nicht. Alle Werte im Template sind bereits vom Modul maskiert, daher die Verwendung von nofilter.

Jeder Block wird in einem Element <section class="dfbc dfbc--MODUS"> mit der ID dfbc-NUMMER-N ausgegeben. Verwenden Sie für gezieltes CSS bevorzugt die Klassen, zum Beispiel:

.dfbc--marquee .dfbc-card { border-radius: 999px; }

Multistore und Sprachen

Blöcke werden pro Shop verwaltet: Wählen Sie vor dem Bearbeiten einen Shop in der Shop-Auswahl des Backoffice. Ersatzlogos und eigene Links gelten für alle Shops. Titel, Untertitel und Linktext werden pro Sprache eingegeben. Das Modul ist ins Englische, Französische, Spanische, Deutsche, Italienische, Niederländische, Polnische und Portugiesische übersetzt und unterstützt Sprachen mit Schreibrichtung von rechts nach links.

Cache und Leistung

Das Modul lädt weder jQuery noch Swiper noch eine andere externe Bibliothek. CSS und JavaScript wiegen komprimiert etwa 5 KB und 7 KB und werden nur auf Seiten geladen, auf denen ein Block erscheinen kann: Ein Block an displayHome lädt auf Produktseiten nichts.

Die Markenliste wird 6 Stunden zwischengespeichert, die Produktanzahl pro Marke 1 Stunde und die Verkäufe 12 Stunden, in var/cache/. Dieser Cache wird bei jedem Speichern im Modul geleert und immer dann, wenn eine Marke oder ein Produkt angelegt, geändert oder gelöscht wird. PrestaShop führt diese Auslöser nur für Mitarbeiter mit Leserecht auf das Modul aus: Ändert ein Kollege ohne dieses Recht den Katalog, nutzen Sie die Schaltfläche „Cache leeren“.

Häufige Fragen

Der Block erscheint nicht

Prüfen Sie, ob der Block aktiv ist, ob Ihr Theme seinen Hook aufruft und ob die Filter Seiten und Geräte die aktuelle Seite zulassen. Prüfen Sie dann, ob noch Marken übrig bleiben: Die Vorschau im Editor zeigt die Zahl der ausgewählten Marken und meldet, wenn keine passt (Quelle, Mindestanzahl Produkte, Logo-Filter).

Die Logos zeigen weiße Rechtecke

PrestaShop-Logos sind JPG-Dateien mit weißem Hintergrund. Aktivieren Sie auf hellen Karten „Weiße Hintergründe entfernen“ oder laden Sie im Tab Markenlogos transparente Logos hoch.

Die Logos sind unscharf

Wählen Sie unter Bildgröße „Originalbild“ oder laden Sie ein Ersatzlogo als SVG oder als hochauflösendes PNG hoch.

Das Laufband bewegt sich nicht

Möglicherweise wurde die Pause-Schaltfläche gedrückt, oder das System des Besuchers verlangt reduzierte Bewegung. Im zweiten Fall zeigt das Modul die Logos absichtlich unbewegt.

Eine Marke fehlt

Die Marke muss aktiv, dem Shop zugeordnet sein und mindestens die Mindestanzahl sichtbarer Produkte haben. Prüfen Sie auch die ausgeschlossenen Marken und die Option „Nur Marken mit Logo“.

Deinstallation

Die Deinstallation löscht die Tabellen des Moduls, den Ordner /img/dfbrandcarousel/ mit den Ersatzlogos und den Cache des Moduls.