Was das Plugin macht

Ein 3D-Perspektiv-Karussell als CMS-Element für die Erlebniswelten. Die Bilder drehen sich auf einer Ellipse, das vorderste ist am größten, die hinteren werden kleiner und blasser.

Die Storefront kommt ohne jQuery aus. Die Spiegelung entsteht über eine CSS-Maske statt über ein Canvas und skaliert dadurch sauber mit.

Inhalt pflegen

In den Erlebniswelten liegt der Baustein  Produkt Karussell in einer eigenen Kategorie. Er besteht aus einem Slot, der mit dem Karussell-Element vorbelegt ist.

Das Element selbst hat keine Einstellungen. Bilder, Darstellung und Verhalten stehen vollständig hier und gelten für alle Karussells eines Verkaufskanals.

Einstellungen

Die Werte gelten für alle Karussells im Shop. Über die Verkaufskanal-Auswahl in der Karte Grundeinstellungen lassen sie sich je Kanal abweichend setzen.

• Grundeinstellungen – Verkaufskanal, Hauptschalter, ein eigener Schalter für die Anzeige im Shop und einer für die Anzeige auf Mobilgeräten samt einem Ersatzbild dafür
• Bilder und Produkte – drei Bereiche: eigene Auswahl aus der Mediathek, dort je Zeile austauschbar, manuelle Produkt Auswahl oder zufällige Produkt Auswahl aus dem Shop. Dazu die Höchstzahl
• Darstellung und Verhalten – Größe, Bahn, Geschwindigkeit, Autoplay, Spiegelung, Beschriftung
• Hintergrund – Farbverlauf der Bühne, Schein darum herum, Farbe der Beschriftung
• Vorschau – zeigt die Wirkung der Werte mit sechs Platzhaltern

Änderungen erscheinen nicht im Shop

Die Storefront wird zwischengespeichert. Kommt eine Änderung im Shop nicht an, obwohl die Vorschau sie zeigt, hilft ein Leeren des Caches unter Einstellungen > Caches & Indizes.

Bleibt es dabei, liegt es meist an den veröffentlichten Dateien: Das Skript des Karussells liegt unter public/bundles und wird nur durch bin/console assets:install erneuert, nicht durch das Leeren des Caches. Welche Fassung im Browser läuft, verrät window.Dmx4AllProduktKarussellVersion in der Entwicklerkonsole.

Zurücksetzen

Die Schaltfläche „Reset“ oben setzt alle Einstellungen des gewählten Verkaufskanals auf die Vorgabewerte. Bildauswahl und Produktauswahl werden dabei geleert, deshalb kommt vorher eine Rückfrage.

Die Bahn: Breite

Die Bilder laufen auf einer Ellipse. „Breite der Bahn“ legt fest, wie weit sie in die Breite geht, als Anteil der Bühnenbreite. Kleine Werte lassen das Karussell gedrängt laufen, große ziehen es auseinander - bis die seitlichen Bilder über den Rand hinauslaufen.

xRadius 0.25 xRadius 0.435 xRadius 0.70 +--------------+ +--------------+ +--------------+ | | | | | | | o o | | o o | o| |o | [ XX ] | | [ XX ] | | [ XX ] | | | | | | | +--------------+ +--------------+ +--------------+ gedraengt Vorgabe laeuft heraus

Die Bahn: vertikale Tiefe

Sie bestimmt, wie weit die hinteren Bilder nach oben wandern, während das vorderste unten in der Mitte steht. Bei 630 Pixeln Bühnenhöhe ergibt 0.12 rund 76 Pixel Unterschied zwischen ganz vorne und ganz hinten.

yRadius 0.02 yRadius 0.12 yRadius 0.30 +--------------+ +--------------+ +--------------+ | | | o o | | o o | | o [ XX ] o | | | | | | | | [ XX ] | | | | | | | | [ XX ] | +--------------+ +--------------+ +--------------+ fast eine Linie Vorgabe tiefe Bahn

Die Bahn: vertikale Position

Sie verschiebt die ganze Ellipse nach oben oder unten, ohne ihre Form zu ändern. Nach oben werden irgendwann die hinteren Bilder abgeschnitten, nach unten fehlt der Platz für die Spiegelung.

yOrigin 0.05 yOrigin 0.18 yOrigin 0.40 +-- o -------- o + +--------------+ +--------------+ | | | o o | | | | [ XX ] | | [ XX ] | | o o | | .... | | .... | | [ XX ] | | | | | | .... | +--------------+ +--------------+ +--------------+ oben beschnitten Vorgabe knapp unten [ XX ] vorderstes Bild o hintere Bilder .... Spiegelung

Zufällige Produkt Auswahl

Im Bereich „Zufällige Produkt Auswahl“ zeigt das Karussell zufällige Produkte aus dem Shop, ohne dass etwas gepflegt werden muss. Die Zusammenstellung wechselt bei jedem Seitenaufruf, begrenzt durch die Höchstzahl. Die Auswahl trifft das Skript im Browser, denn die Storefront wird zwischengespeichert - vom Server käme sonst für alle Besucher dieselbe Zusammenstellung.

Der Ausschnitt aus dem Katalog wird ebenfalls zufällig gewählt, damit nicht immer dieselben Artikel in Frage kommen. Wie viele Produkte in die Seite gehen, bestimmt das Feld „Vorrat“ - ein Vielfaches der Höchstzahl, höchstens 30. Mehr Vorrat bringt mehr Abwechslung und mehr Seitengewicht.

Ohne Bilder

Ist noch kein Bild hinterlegt, zeigt das Karussell das Plugin-Icon als Platzhalter. Das gilt auch im Shop, ist also als Hinweis gedacht und nicht als Dauerzustand.

Bildbeschriftung

Ist „Bildbeschriftung anzeigen“ aktiv, erscheint der Text als Sprechblase im Bild, sobald es vorne in der Mitte steht. Gepflegt wird er je Bild in der Karte Bilder und Produkte; bleibt das Feld leer, gilt der Alternativtext aus der Mediathek, ersatzweise der Titel des Mediums. Bei der automatischen Auswahl ist es der Produktname.

Wo die Sprechblase sitzt, legen zwei Werte in der Karte Darstellung und Bildbeschriftung fest: waagerecht in Prozent der Bildbreite, senkrecht in Prozent der Bildhöhe. Werte über 100 setzen sie unter das Bild. Als Bezugshöhe dient das höchste der gewählten Bilder, damit sie bei allen gleich sitzt. Textfarbe, Hintergrundfarbe und Deckkraft der Blase stehen in derselben Karte.

Schmale Bildschirme

Die eingestellte Bildbreite ist eine Obergrenze. Auf schmalen Bildschirmen verkleinert das Karussell die Bilder und die Bühne im selben Verhältnis, damit sich die Bilder nicht überlappen. Ab etwa 480 Pixeln Breite gelten die eingestellten Werte unverändert. Wie viel Platz bleibt, hängt auch an der Anzahl der Bilder: je mehr, desto enger stehen sie auf der Bahn.