Product Carousel Pro — Unbegrenzte Produkt-Karussells (dfproductcarousel)

Product Carousel Pro erstellt unbegrenzt viele Produkt-Karussells überall in Ihrem PrestaShop-Shop: Bestseller, Neuheiten, Angebote, Produkte einer Kategorie oder eine von Hand sortierte manuelle Auswahl, angezeigt an sechs Standard-Hooks oder an Ihren eigenen, spontan angelegten Custom Hooks. Die Besonderheit des Moduls: Die Produktkarten werden über das Miniatur-Template Ihres aktiven Themes gerendert, via ProductAssembler und ProductPresenter. Preise, Flags, Schnellansicht und Warenkorb-Button funktionieren exakt wie auf Ihren Kategorieseiten.

Installation

1. Öffnen Sie in Ihrem PrestaShop-Back-Office Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und legen Sie die Datei dfproductcarousel.zip ab.
3. Unter dem Menü Module erscheint ein Tab Product Carousel Pro: Dort spielt sich alles ab (der Konfigurieren-Button des Moduls leitet ebenfalls dorthin weiter).

Das Modul legt drei Tabellen an (Karussells, mehrsprachige Titel, Shop-Zuordnung) und registriert sechs Anzeige-Hooks plus actionFrontControllerSetMedia für seine Assets. Später angelegte Custom Hooks registrieren sich automatisch beim Speichern des jeweiligen Karussells.

Ein Karussell anlegen

Klicken Sie in der Liste auf Neues Karussell hinzufügen. Das Formular ist in fünf Blöcke gegliedert: Inhalt, Platzierung, Layout, Stil und Verhalten.

• Interner Name: nur im Back-Office sichtbar, zur Orientierung in der Liste.
• Titel und Untertitel: mehrsprachig, oberhalb des Karussells angezeigt. Lassen Sie den Titel leer, um gar keine Kopfzeile anzuzeigen.

Die Karussell-Liste bietet anschließend Aktivierung per Klick, Duplizierung (die Kopie wird deaktiviert angelegt) und Massenlöschung.

Produktquellen

Jedes Karussell wählt seine Quelle aus sechs Möglichkeiten:

• Bestseller: die meistverkauften Produkte des Shops.
• Neuheiten: als neu markierte Produkte (das Zeitfenster ist Ihre PrestaShop-Einstellung „Anzahl der Tage, die ein Produkt als neu gilt“).
• Angebote: Produkte mit laufendem Rabatt.
• Produkte einer Kategorie: Kategorie im Auswahlbaum wählen, die Produkte folgen der Kategorie-Reihenfolge.
• Startseiten-Kategorie: die Produkte der Stammkategorie des Shops, das Äquivalent der nativen „vorgestellten Produkte“.
• Manuelle Auswahl: Sie wählen die Produkte einzeln aus.

Das Feld Maximale Produktanzahl begrenzt die geladenen Produkte, unabhängig von der Quelle.

Die manuelle Auswahl

Tippen Sie mindestens zwei Zeichen ins Suchfeld: Die Autovervollständigung findet Ihre Produkte nach Name oder Referenz. Jedes angeklickte Produkt wandert in die Liste darunter, mit Verschiebe-Griff: Sortieren Sie per Drag-and-drop um, das Front-Office zeigt die Produkte exakt in dieser Reihenfolge. Deaktivierte oder im Katalog verborgene Produkte werden bei der Anzeige automatisch herausgefiltert, ohne das Karussell zu beschädigen.

Die Platzierung wählen

Standard-Hooks

Sechs Hooks stehen in der Auswahlliste bereit:

• displayHome: Startseite;
• displayContentWrapperTop und displayContentWrapperBottom: ober- und unterhalb des Hauptinhalts, auf den meisten Seiten;
• displayFooterBefore: direkt vor dem Footer;
• displayFooterProduct: unten auf der Produktseite, der klassische Cross-Selling-Platz;
• displayShoppingCartFooter: unter der Warenkorb-Zusammenfassung.

Mehrere Karussells können sich denselben Hook teilen: Sie stapeln sich in der Reihenfolge ihres Feldes Position.

Custom Hooks

Wählen Sie Custom Hook in der Liste und tippen Sie im erscheinenden Feld einen Namen ein, zum Beispiel MeinKarussell. Beim Speichern bereinigt das Modul den Namen (nur Buchstaben und Ziffern), stellt bei Bedarf display voran (displayMeinKarussell), registriert ihn bei PrestaShop und hört darauf. Platzieren Sie anschließend den Aufruf im Template Ihrer Wahl:

{hook h='displayMeinKarussell'}

Der angelegte Hook erscheint für die nächsten Karussells in der Auswahlliste. Sie können beliebig viele Hooks anlegen.

Widget-Syntax

Um ein bestimmtes Karussell unabhängig von seinem Hook anzuzeigen, nutzen Sie die Widget-Syntax mit der ID aus der ersten Spalte der Liste:

{widget name='dfproductcarousel' carousel=3}

Praktisch auf einer CMS-Seite oder in einem maßgeschneiderten Template. Das Karussell muss aktiv sein, um zu erscheinen.

Layout

• Produkte pro Reihe: drei unabhängige Werte, 1 bis 8, für Desktop (ab 992 px), Tablet (768 bis 991 px) und Mobil (unter 768 px). Die klassische Konfiguration ist 4 / 3 / 1.
• Blättermodus: „Ein Produkt auf einmal“ rückt pro Klick eine Karte weiter, „Ganze Reihe“ eine komplette Seite.
• Abstand: der Abstand in Pixeln zwischen den Karten (standardmäßig 20 px).
• Volle Breite: das Karussell verlässt seinen Container und nutzt die gesamte Bildschirmbreite, besonders wirkungsvoll auf der Startseite in Kombination mit dem Skin Dunkle Sektion.

Stil

Die fünf Skins

• Klassisch: die Produktkarten des Themes bleiben strikt unberührt. Die Standardwahl und die sicherste.
• Minimal: entfernt Schatten und Rahmen für ein flaches Erscheinungsbild.
• Karte: Schlagschatten, abgerundete Ecken und leichtes Anheben beim Hover.
• Rahmen: eine feine Umrandung um jede Karte, die beim Hover die Akzentfarbe annimmt.
• Dunkle Sektion: setzt das gesamte Karussell auf einen dunklen Hintergrund, mit angepasstem Titel und Pagination.

Ergänzende Einstellungen

• Titelausrichtung: links, zentriert oder rechts, die Akzent-Unterstreichung folgt.
• Akzentfarbe: verwendet für Pfeile beim Hover, die aktive Pagination und die Titel-Unterstreichung. Leer lassen, um die Primärfarbe Ihres Themes zu erben.
• Pfeile: ein- oder ausgeblendet, in drei Stilen (Kreis, Quadrat, minimal ohne Hintergrund).
• Pagination: Punkte oder Balken, automatisch aus der Seitenzahl erzeugt.

Verhalten

• Autoplay: automatisches Weiterblättern mit konfigurierbarer Verzögerung (standardmäßig 5.000 ms, mindestens 1.000 ms). Die Wiedergabe pausiert, wenn der Browser-Tab verborgen ist.
• Pause bei Hover: setzt das Autoplay aus, solange der Cursor über dem Karussell liegt.
• Endlosschleife: das Karussell springt ohne Ruckeln zum Anfang zurück, dank transparentem Klonen der Ränder. Ohne diese Option deaktivieren sich die Pfeile an den Enden.

Unabhängig von den Einstellungen lässt sich das Karussell per Wischen bedienen (Touch und Maus, mit Schutz vor versehentlichen Klicks am Ende der Geste), per Tastatur (Pfeiltasten links und rechts bei Fokus) und respektiert die RTL-Leserichtung sowie die Systemeinstellung prefers-reduced-motion.

Theme-natives Rendering: So funktioniert es

• Die Produkte werden von ProductAssembler und ProductPresenter zusammengestellt und aufbereitet, den Mechanismen, die PrestaShop selbst für seine Listen nutzt.
• Jede Karte wird anschließend vom Template catalog/_partials/miniatures/product.tpl Ihres aktiven Themes gerendert: Preise, Rabatte, Flags, Schnellansicht und Warenkorb-Button sind die des Themes, ohne jede Anpassung.
• Das Modul schreibt niemals in Theme-Dateien: Es lädt sein eigenes Stylesheet für die Karussell-Mechanik, nach dem CSS des Themes.
• Ein fehlerhaftes Produkt wird stillschweigend übersprungen, statt das ganze Karussell lahmzulegen.

Multishop

Jedes Karussell wird beim Speichern den Shops des Kontexts zugeordnet. Um ein Karussell für einen bestimmten Shop anzulegen, wechseln Sie vor dem Anlegen über den Multishop-Selektor in dessen Kontext. Ein im Kontext „Alle Shops“ gespeichertes Karussell erscheint überall.

Fehlerbehebung

• Das Karussell erscheint nicht: Prüfen Sie der Reihe nach, ob das Karussell aktiv ist, ob seine Quelle mindestens ein Produkt liefert (eine leere Kategorie oder eine manuelle Auswahl deaktivierter Produkte ergibt ein stummes Karussell), ob der gewählte Hook auf der besuchten Seite existiert, und leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen > Leistung).
• Der Custom Hook zeigt nichts an: Der Name in {hook h='...'} muss exakt dem registrierten Namen entsprechen, Präfix display inklusive, sichtbar in der Hook-Spalte der Liste. Nach dem Einfügen des Aufrufs in ein Template den Smarty-Cache leeren.
• Die Pfeile erscheinen nicht: Sie werden automatisch ausgeblendet, wenn alle Produkte in eine einzige Reihe passen. Fügen Sie Produkte hinzu oder reduzieren Sie die Spaltenzahl.
• Der Skin Karte oder Rahmen wirkt mit meinem Theme unruhig: Manche Themes versehen ihre Miniaturen bereits mit Schatten und Rahmen. Wechseln Sie zum Skin Klassisch, der nichts anfasst, oder Minimal, der die Effekte des Themes neutralisiert.
• Zwei Karussells in falscher Reihenfolge am selben Hook: Passen Sie ihr Positionsfeld an, die Anzeige folgt aufsteigender Reihenfolge.
• Die Produktsuche schlägt nichts vor: Die Suche startet ab zwei Zeichen und durchsucht Namen und Referenzen der gerade bearbeiteten Sprache.

Deinstallation

Die Deinstallation entfernt die drei Tabellen, den Back-Office-Tab und die registrierten Hooks. Ihr Theme und Ihre Templates bleiben unberührt; nur die {hook h='...'}-Aufrufe, die Sie selbst in Ihre Templates eingefügt haben, entfernen Sie manuell (ein Hook ohne lauschendes Modul zeigt einfach nichts an und erzeugt keinen Fehler).