Alles, was Sie vor der Installation wissen wollen.
Ein detaillierter Blick darauf, wie Marken-Slider für PrestaShop 8/9: Herstellerlogos als Karussell, Laufband und Logowand funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.
8 Arten, Ihre Marken zu zeigen
Das Karussell blättert 1 bis 3 Zeilen mit Logos durch, mit Pfeilen, Punkten und optionalem automatischem Bildlauf. Das Laufband lässt die Logos ohne Pause über 1 bis 4 Zeilen gleiten, mit unterschiedlichen Marken pro Zeile und jeder zweiten Zeile in Gegenrichtung, der Effekt, den man von Bereichen wie „Unsere Partner“ kennt. Das vertikale Laufband bewegt Logospalten auf und ab. Raster, Logowand mit feinen Linien, wechselnde Logowand, Chips und A-Z-Verzeichnis decken die übrigen Fälle ab, von der Seitenspalte bis zur Seite mit allen Marken.
Die richtigen Marken in der richtigen Reihenfolge
Ein Block kann alle aktiven Marken zeigen, eine Auswahl, die Sie per Drag and Drop sortieren, die Marken mit Produkten in einer Kategorie und ihren Unterkategorien oder die der gerade angezeigten Kategorie: Auf der Seite Schuhe erscheinen nur Schuhmarken. Eine Mindestanzahl Produkte, standardmäßig 1, blendet Marken aus, deren Seite leer wäre. Sortiert wird nach Name, Produktanzahl, Verkäufen im gewählten Zeitraum, Neuheit oder zufällig. Die Zufallsreihenfolge entsteht im Browser, ein Full-Page-Cache funktioniert also weiter.
Saubere Logos, auch auf farbigem Hintergrund
PrestaShop speichert Markenlogos als JPG mit weißem Hintergrund, was auf einer grauen Karte oder einem dunklen Abschnitt weiße Rechtecke hinterlässt. Im Tab Markenlogos laden Sie für jede Marke eine transparente PNG-, WebP- oder SVG-Version hoch, die in allen Blöcken verwendet wird. SVG-Dateien mit Skripten, Ereignissen oder externen Links werden abgelehnt, der Upload-Ordner ist geschützt. Auf hellen Karten lässt die Option Weiße Hintergründe entfernen das Weiß der JPGs ganz ohne Upload verschwinden. Jede Marke kann außerdem auf eine Seite Ihrer Wahl statt auf ihre PrestaShop-Seite verlinken.
Überall im Shop
Jeder Block wählt seinen Hook unter 14 gängigen Positionen oder einen von Hand eingegebenen display-Hook, der automatisch registriert wird. Er lässt sich auf bestimmte Seitentypen und Geräte beschränken. Für eine genaue Position zeigt das Widget-Tag einen bestimmten Block in jedem Template, der Hook displayDfBrandCarousel wird aus dem Theme aufgerufen und der Shortcode [dfbrandcarousel id="3"] setzt einen Block in eine CMS-Seite. Die Layouts nutzen Container Queries: In einer Seitenspalte wechselt ein Block ohne weitere Einstellung in seine kompakte Version.
Ein Editor mit Live-Vorschau
Das Backoffice listet Ihre Blöcke, die Sie aktivieren, duplizieren und per Drag and Drop neu anordnen. Der Editor fasst die Einstellungen in 5 Tabs zusammen (Inhalt, Layout, Stil, Animation, Anzeige) und zeigt daneben eine Vorschau, die sich bei jeder Änderung aktualisiert, in Desktop-, Tablet- oder Mobilbreite. Die Modi werden als illustrierte Karten angezeigt. Ein Hinweis markiert ungespeicherte Änderungen, Strg+S speichert, ohne den Editor zu verlassen. Der Tab Integration liefert die Widget-, Hook- und Shortcode-Codes jedes Blocks zum Kopieren.
Leicht und barrierefrei
Das Modul verwendet weder jQuery noch Swiper noch eine Bibliothek von einem CDN. Das Karussell nutzt das native Scrollen des Browsers, das Laufband die Web Animations API. CSS und JS werden nur auf Seiten geladen, auf denen ein Block erscheinen kann. Animationen stoppen, wenn der Block den Bildschirm verlässt, eine Pause-Schaltfläche erfüllt WCAG 2.2.2, und Besucher, die Animationen deaktiviert haben, sehen unbewegte Logos, die sie von Hand scrollen. Die Kopien für die Endlosschleife des Laufbands sind für Screenreader verborgen und von der Tastaturnavigation ausgeschlossen.
Es gibt noch keine Rezensionen.