Standardmäßig endet der Produkt-Slider an der Kante seines Containers. Mit dieser Erweiterung sind die benachbarten Produkte links und rechts angeschnitten sichtbar. Das signalisiert, dass es weitergeht, und lädt zum Weiterklicken ein.
Die Einstellung gilt global für alle Produkt-Slider. Für einzelne CMS-Blöcke lässt sie sich per CSS-Klasse abweichend setzen.
Info: Die Erweiterung wirkt auf alle Produkt-Slider, also auch auf das Cross-Selling der Produktseiten.
Darstellungsarten
Es stehen vier Darstellungsarten zur Verfügung:
| Darstellungsart | Wirkung |
|---|---|
| Aus (Standard) | Shopware-Standard, die Produkte enden an der Containerkante |
| Angeschnitten | Die Nachbarprodukte sind innerhalb des Containers angeschnitten sichtbar |
| Überlaufend | Die Nachbarprodukte ragen über den Container hinaus |
| Angeschnitten und überlaufend | Beides kombiniert |
Konfiguration
Theme-Konfiguration
- Wechsel in den Tab "Erlebniswelten"
- Öffne den Bereich "Produkt-Slider (Kategorie 'Commerce')"
- Wähle im Abschnitt "Design" die gewünschte "Darstellungsart"
- Passe bei Bedarf im Abschnitt "Basiskonfiguration" die weiteren Konfigurationen an
- Speicher deine Änderungen nach der Bearbeitung
Angeschnittene Produkte
Die Konfiguration "Angeschnittene Produkte" steuert, wie die angeschnittenen Nachbarprodukte dargestellt werden.
| Wert | Wirkung |
|---|---|
| Normal | Die Nachbarprodukte werden unverändert dargestellt |
| Abgeblendet | Die Nachbarprodukte werden mit reduzierter Deckkraft dargestellt und sind nicht anklickbar |
Info: Sobald ein Produkt vollständig sichtbar ist, ist es wieder anklickbar. Bei der Tastatur-Navigation wird das fokussierte Produkt automatisch nach vorn geholt und dadurch bedienbar.
Anschnitt-Breite
Die Breite des sichtbaren Teils der Nachbarprodukte lässt sich getrennt für Desktop und mobile Geräte festlegen:
- "Anschnitt-Breite @Desktop (>=992px)" – Standard: 30 (Pixel)
- "Anschnitt-Breite @Mobil (<992px)" – Standard: 20 (Pixel)
Beide Konfigurationen greifen nur bei Darstellungsarten mit Anschnitt.
Abweichende Darstellung pro CMS-Block
Du kannst die globale Einstellung beibehalten und einzelne CMS-Blöcke davon abweichen lassen. Trage dazu im CMS-Editor am jeweiligen Block eine CSS-Klasse ein.
| CSS-Klasse | Darstellungsart |
|---|---|
twt-cms-product-slider-reset |
Aus |
twt-cms-product-slider-peek |
Angeschnitten |
twt-cms-product-slider-overflow-visible |
Überlaufend |
twt-cms-product-slider |
Angeschnitten und überlaufend |
Tipp: Die Klasse twt-cms-product-slider-reset nimmt die globale Einstellung für diesen Block vollständig zurück. So kannst du auch dann einzelne Slider im Shopware-Standard belassen, wenn global eine Darstellungsart aktiv ist.
Wann der Überlauf nicht greift
Der Überlauf wird in zwei Fällen automatisch unterdrückt, weil er dort mit benachbarten Inhalten kollidieren würde. Der Anschnitt bleibt in beiden Fällen erhalten.
- Der Slider steht in einem mehrspaltigen CMS-Block – die Nachbarprodukte würden sonst in die andere Spalte ragen
- Der Slider steht in einer Sidebar-Sektion
Zusammenfassung
Theme-Konfiguration
- Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Design" => Darstellungsart
- Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Basiskonfiguration" => Angeschnittene Produkte
- Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Basiskonfiguration" => Anschnitt-Breite @Desktop (>=992px)
- Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Basiskonfiguration" => Anschnitt-Breite @Mobil (<992px)
CSS-Klassen
twt-cms-product-slider-resettwt-cms-product-slider-peektwt-cms-product-slider-overflow-visibletwt-cms-product-slider