Alles, was Sie vor der Installation wissen wollen.
Ein detaillierter Blick darauf, wie PrestaShop Kategorie-Slider Modul 8/9: Kategorien auf der Startseite anzeigen funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.
Ein einstellbares Kategorie-Schaufenster statt eines starren Blocks
Der native Kategorieblock von PrestaShop zeigt eine Linkliste oder Vorschaubilder im Format, das das Theme vorgibt. Hier wird jedes Showcase in einem Formular mit Tabs eingestellt: Layout, Zeilenzahl, Spalten auf Desktop, Tablet und Smartphone, Abstände, Containerbreite, Hintergrund des Bereichs. Sie wählen die Kategorien von Hand und sortieren sie per Drag-and-drop, oder das Modul zeigt die Unterkategorien einer Abteilung mit einer Obergrenze. Bei der Installation wird ein Demo-Showcase auf der Startseite angelegt, damit Sie das Ergebnis sofort sehen.
Eigenes Bild, eigener Name und eigener Text für jede Kategorie
Eine Kategorie heißt im Katalog oft „Damenbekleidung“, während auf der Startseite „Neue Kollektion“ stehen soll. Jede Kategorie in einem Showcase akzeptiert deshalb einen eigenen Namen, eine Kurzbeschreibung, ein eigenes Bild und ein enger zugeschnittenes Mobilbild, ein Badge, einen Button-Text und einen Link zu einer gefilterten Liste oder einer Landingpage. Ohne Anpassung übernimmt das Modul Bild und Namen der Kategorie. Beim Bild wählt es automatisch das schärfste verfügbare PrestaShop-Format, denn das Format category_default von PrestaShop 8 misst nur 141 x 180 px.
Slider, Raster oder Masonry, auf 1 bis 3 Zeilen
Der Slider bewegt 1, 2 oder 3 Zeilen gemeinsam, mit Pfeilen, Punkten, Endlosschleife und optionalem Autoplay. Auf dem Smartphone lässt er einen Teil der nächsten Karte sehen, damit klar ist, dass man wischen kann. Das Raster ordnet die Kategorien in gleichmäßigen Spalten an, mit optionaler Zeilenbegrenzung. Masonry bietet drei Stile: natürliche Bildhöhen, abwechselnde Höhen oder die erste Kategorie hervorgehoben auf 2 x 2. Hat eine Zeile weniger Kategorien als Spalten, richtet sie sich am Titel aus, statt links zu kleben.
5 Vorlagen für den Start, 81 Optionen für den Feinschliff
Die Vorlage „Kreise“ liefert per Klick runde Bilder im Stil von Instagram-Stories, 6 pro Zeile auf dem Desktop. „Overlay“ legt den Text mit Verlauf auf das Bild, „Banner“ zeigt 2 große Kacheln mit Namen in Großbuchstaben, „Karten“ setzt jede Kategorie in eine weiße Karte mit Beschreibung und Link. Die Vorlage füllt beim Speichern die Designoptionen aus, danach bleibt alles bearbeitbar: Farben, Größen, Rundungen, Rahmen, Schatten, 6 Hover-Effekte, Textposition, Stil von Button und Badge. Ein Feld für eigenes CSS, auf die ID des Showcases begrenzt, deckt die letzten Details ab.
Auf der Startseite, auf Kategorieseiten oder überall
Jedes Showcase wählt seinen Hook aus einer Liste oder in einem freien Feld: Ein unbekannter Hook-Name wird automatisch angelegt und registriert, und das Modul meldet sich von nicht mehr genutzten Hooks ab. Die Quelle „angezeigte Kategorie“ zeigt auf jeder Kategorieseite deren eigene Unterkategorien, mit einem einzigen Showcase für den ganzen Katalog. Mit dem Hook displayDfCategoryShowcase und dem Widget-Tag platzieren Sie ein bestimmtes Showcase in jedem Template. Start- und Enddatum sowie die Einschränkung nach Kundengruppe dienen saisonalen Aktionen und B2B-Auswahlen.
Schnell und barrierearm
Der Slider nutzt das native Scrollen des Browsers (CSS scroll-snap), gesteuert von etwa 3 KB komprimiertem JavaScript ohne jQuery. Hochgeladene Bilder werden in 480 und 960 px erzeugt und mit srcset und sizes passend zu Ihren Spalten ausgeliefert. Das erste Bild lädt sofort, die folgenden per Lazy Loading, mit width- und height-Attributen. Die Ausgabe liegt im Smarty-Cache und wird automatisch geleert, wenn sich eine Kategorie oder ein Produkt ändert. Zur Barrierefreiheit: Der Bereich ist über seinen Titel beschriftet, Buttons und Punkte werden Screenreadern angekündigt, die Tastaturnavigation hat einen sichtbaren Fokus, Autoplay pausiert bei Fokus und prefers-reduced-motion wird beachtet.
Es gibt noch keine Rezensionen.