Category Showcase: Dokumentation des PrestaShop Kategorie-Sliders

Installation

Öffnen Sie im Back-Office Module > Modulmanager, klicken Sie auf „Modul hochladen“ und senden Sie die Datei dfcategoryshowcase.zip. Das Modul ist mit PrestaShop 8.0 bis 9.x kompatibel.

Bei der Installation legt das Modul seine Tabellen an, den Ordner /img/dfcategoryshowcase/ für hochgeladene Bilder, den Hook displayDfCategoryShowcase und ein Demo-Showcase: die Unterkategorien der Kategorie Startseite, als Slider, auf der Startseite. Öffnen Sie Ihren Shop, um das Ergebnis zu sehen, und bearbeiten oder löschen Sie dieses Showcase danach.

Das Modul wird unter Design > Category Showcase verwaltet (der Button „Konfigurieren“ des Moduls führt ebenfalls dorthin).

Ein Showcase anlegen

Klicken Sie auf „Showcase hinzufügen“. Der Tab Allgemein enthält:

• Interner Name: nur im Back-Office sichtbar.
• Hook: der Anzeigeort (siehe unten).
• Layout: Slider (Karussell), Raster oder Masonry.
• Design-Vorlage: wendet beim Speichern einen kompletten Stil an (siehe unten).
• Angezeigte Kategorien: die Quelle der Kategorien.
• Titel, Untertitel, Text und Link „Alle ansehen“: pro Sprache.

Die drei Quellen

• Manuell ausgewählt: Nach dem Speichern führt Sie das Modul zur Kategorienliste des Showcases. Fügen Sie die Kategorien einzeln hinzu und sortieren Sie sie per Drag-and-drop.
• Unterkategorien einer übergeordneten Kategorie: Wählen Sie die übergeordnete Kategorie und bei Bedarf eine Höchstzahl. Die Liste folgt Ihrem Katalog.
• Unterkategorien der angezeigten Kategorie: zusammen mit displayHeaderCategory oder displayFooterCategory verwenden. Jede Kategorieseite zeigt ihre eigenen Unterkategorien. Eine Kategorie ohne Unterkategorien zeigt nichts an.

In beiden Unterkategorien-Modi dient das Hinzufügen einer Kategorie in der Kategorienliste nur ihrer Anpassung. Wird sie deaktiviert, verschwindet sie aus dem Showcase.

Eine Kategorie anpassen

Klicken Sie in der Liste der Showcases auf „Kategorien“ und fügen Sie eine Kategorie hinzu oder bearbeiten Sie sie. Jedes leere Feld übernimmt den Wert der PrestaShop-Kategorie:

• Eigenes Bild: JPG, PNG, WebP oder GIF. Das Modul erzeugt Kopien in 480 und 960 px, die kleinen Bildschirmen automatisch ausgeliefert werden.
• Mobiles Bild: optional, unter 768 px angezeigt. Praktisch für einen engeren Zuschnitt.
• Name und Kurzbeschreibung: Zeilenumbrüche der Beschreibung bleiben erhalten.
• Badge: zum Beispiel Neu, Sale oder -30%.
• Button-Text und Link: Der Link kann auf eine gefilterte Liste oder eine Landingpage zeigen. Akzeptiert werden nur http(s)-Links, relative Links, Anker, mailto: und tel:.
• CSS-Klasse: wird der Karte hinzugefügt.

Eine Kategorie kann pro Showcase nur einmal hinzugefügt werden.

Design

Vorlagen

Das Feld „Design-Vorlage“ im Tab Allgemein bietet Minimal, Karten, Overlay, Kreise und Banner. Die Vorlage ersetzt beim Speichern die Optionen, die sie abdeckt (Bild, Karte, Texte, Button, Spalten). Danach steht das Feld wieder auf „Meine Einstellungen behalten“ und alle Optionen bleiben bearbeitbar.

Einstellungs-Tabs

• Layout: Zeilen (1 bis 3), Spalten auf Desktop (1 bis 8), Tablet (1 bis 6) und Smartphone (1 bis 4), Abstand, Zeilenbegrenzung für Raster und Masonry, Masonry-Stil, Container (Spalte des Themes, begrenzt mit maximaler Breite, volle Breite), Abstände und Hintergrund des Bereichs.
• Kopfbereich: Titel anzeigen, Tag (H2 auf der Startseite empfohlen), Ausrichtung, Farben und Größen, Position und Stil des Links „Alle ansehen“.
• Bild: PrestaShop-Bildformat („Automatisch“ wählt das schärfste Format mit mindestens 400 px, sonst das Originalbild), Seitenverhältnis, Zuschnitt oder ganzes Bild, runde Form, Hintergrund, Lazy Loading.
• Karte: Eckenrundung, Rahmen, Schatten, Hintergrund, Innenabstand, Hover-Effekt, Animationsdauer.
• Texte: Position (unter dem Bild, auf dem Bild oben, mittig oder unten, oder kein Text), Überlagerung, Typografie des Namens, Beschreibung, Produktanzahl.
• Button und Badge, Karussell, Sichtbarkeit, Erweitert: siehe die folgenden Abschnitte.

Bei runder Form steht der Text immer unter dem Bild.

Slider (Karussell)

Die Optionen im Tab Karussell gelten, wenn das Layout „Karussell“ ist: automatisches Abspielen und Verzögerung, Pause beim Überfahren, Endlosschleife, Spalten pro Klick, Pfeile (auf dem Karussell, außerhalb auf großen Bildschirmen oder neben dem Titel), Farben, Navigationspunkte, Vorschau der nächsten Kategorie auf dem Smartphone, Ziehen mit der Maus.

Bei 2 oder 3 Zeilen füllen die Kategorien jede Spalte von oben nach unten, dann scrollen die Zeilen gemeinsam. Das automatische Abspielen pausiert beim Überfahren, bei Tastaturfokus, bei Berührung, wenn der Tab verborgen ist oder wenn der Slider den Bildschirm verlässt. Es ist deaktiviert, wenn der Besucher in seinem System reduzierte Bewegung eingestellt hat.

Wo ein Showcase angezeigt wird

• displayHome: Startseite.
• displayHeaderCategory und displayFooterCategory: Kategorieseiten, über oder unter den Produkten.
• displayDfCategoryShowcase: vom Modul angelegter Hook, den Sie an beliebiger Stelle im Theme mit {hook h='displayDfCategoryShowcase'} aufrufen.
• Eigener Hook: Wählen Sie „Eigener Hook…“ und geben Sie einen Namen ein (Buchstaben, Ziffern, – und _). Ein nicht vorhandener Hook wird automatisch angelegt und registriert. Rufen Sie ihn mit {hook h='ihrHook'} auf. Ein alter Hook-Name (Alias) wird unter seinem echten Namen gespeichert.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} zeigt ein bestimmtes Showcase an, unabhängig von seinem Hook.

Mehrere Showcases können einen Hook teilen: Sie erscheinen in der Reihenfolge der Liste, die Sie per Drag-and-drop ändern. Das Modul meldet sich automatisch von Hooks ab, die nicht mehr genutzt werden.

Sichtbarkeit

• Anzeigen ab / bis: Datum im Format JJJJ-MM-TT HH:MM:SS. Leer = ohne Begrenzung.
• Kundengruppen: Das Showcase wird nur den angehakten Gruppen angezeigt (Besucher, Gast, Kunde oder Ihre B2B-Gruppen). Alle angehakt = keine Einschränkung.
• Auf Mobilgeräten / auf Desktop ausblenden (Tab Erweitert): unter 768 px oder ab 1024 px.
• Shops: Ordnen Sie im Multishop jedes Showcase den gewünschten Shops zu.

Ein Showcase duplizieren

Die Aktion „Duplizieren“ in der Liste kopiert das Showcase mit seinen Kategorien, Texten, Shops und Bildern. Die Kopie wird deaktiviert angelegt: bearbeiten Sie sie und aktivieren Sie sie dann.

Eigenes CSS

Jedes Showcase wird in <section id="dfcs-ID"> ausgegeben, wobei ID die in der Liste angezeigte Nummer ist. Das Feld „Eigenes CSS“ im Tab Erweitert wird nur mit diesem Showcase ausgegeben. Beispiel:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Erscheint dasselbe Showcase zweimal auf einer Seite (Hook und Widget), erhält die zweite Kopie die ID dfcs-ID-2.

Cache und Leistung

Die Ausgabe wird pro Showcase, Sprache, Shop und Kundengruppe im Smarty-Cache gespeichert. Der Cache wird bei jedem Speichern im Modul geleert, bei jeder Änderung einer Kategorie und bei jeder Änderung eines Produkts, wenn ein Showcase die Produktanzahl anzeigt. CSS und JavaScript des Moduls werden nur geladen, wenn mindestens ein Showcase aktiv ist.

Häufige Fragen

Das Showcase wird nicht angezeigt

Prüfen Sie, ob das Showcase aktiv ist, dem Shop zugeordnet, innerhalb seines Anzeigezeitraums und für die Gruppe des Besuchers freigegeben. Prüfen Sie dann, ob Ihr Theme den gewählten Hook tatsächlich aufruft. Bei einem eigenen Hook muss das Tag {hook h='...'} in einem Template stehen.

Die Bilder sind unscharf

Lassen Sie das Bildformat auf „Automatisch“ oder laden Sie ein eigenes Bild hoch. Das Format category_default von PrestaShop 8 misst nur 141 x 180 px.

Im Masonry folgt die Reihenfolge nicht der Leserichtung von links nach rechts

Die Stile „natürliche Höhen“ und „abwechselnde Höhen“ füllen die Spalten von oben nach unten. Ist die Reihenfolge von links nach rechts wichtig, verwenden Sie das Raster oder den Stil „erste Kategorie hervorgehoben“.

Deinstallation

Die Deinstallation entfernt die Tabellen des Moduls, seine Admin-Tabs und den Ordner /img/dfcategoryshowcase/ mit den hochgeladenen Bildern.