> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/erweiterungen/produkt-slider-mit-uberlauf.md).

# 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.

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FfPVxGAIGHTObFyiuiol2%2Fimage.png?alt=media&amp;token=dcd48aa6-537c-4364-a74a-7d10cee5568c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Info**: Die Erweiterung wirkt auf alle Produkt-Slider, also auch auf das Cross-Selling der Produktseiten.
{% endhint %}

***

## 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 |

{% hint style="info" %}
**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.
{% endhint %}

### **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 |

{% hint style="success" %}
**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.
{% endhint %}

***

## 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`