Produkt-Slider mit Überlauf

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

1. Wechsel in den Tab "Erlebniswelten"

2. Öffne den Bereich "Produkt-Slider (Kategorie 'Commerce')"

3. Wähle im Abschnitt "Design" die gewünschte "Darstellungsart"

4. Passe bei Bedarf im Abschnitt "Basiskonfiguration" die weiteren Konfigurationen an

5. 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-reset

• twt-cms-product-slider-peek

• twt-cms-product-slider-overflow-visible

• twt-cms-product-slider