<!-- Quelle: https://service.themeware.design/doku/handbuch/inhalt/offcanvas-warenkorb-and-navigation
     Alle Seiten dieser Sammlung: https://service.themeware.design/doku/llms.txt -->

# Offcanvas (Warenkorb & Navigation)

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Shopware-Standard\
• ThemeWare®

**Beispiel Wert**:\
`Shopware-Standard`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)"

**Technischer Name**:\
`twt-offcanvas-layout-type`

{% hint style="info" %}
Wähle, wie Offcanves-Elemente (z.B. Warenkorb oder Navigation) dargestellt werden.

In der Darstellungsart "Shopware" verhalten sich Offcanves-Elemente wie ausgeliefert.

In der Darstellungsart "ThemeWare®" bekommen die Elemente z.B. einen Abstand nach außen und abgerundete Ecken.
{% endhint %}

## Basiskonfiguration

***

### Außenabstand \[px]

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-offcanvas-margin`

{% hint style="info" %}
Wähle den Abstand um Offcanvas-Elemente.

**Hinweis**: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.
{% endhint %}

***

### Abgerundete Ecken \[px]

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`3`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-offcanvas-border-radius`

{% hint style="info" %}
Wähle wie stark Ecken von Offcanvas-Elementen abgerundet werden.

**Hinweis**: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.
{% endhint %}

## Farbkonfiguration

***

### Overlay-Farbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0.5)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-offcanvas-backdrop-color`

{% hint style="info" %}
Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.
{% endhint %}

***

### Glaseffekt \[px] (Overlay)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-offcanvas-backdrop-effect-blur`

{% hint style="info" %}
Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.
{% endhint %}

## Button "Menü schließen"

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Button\
• Link

**Beispiel Wert**:\
`Button`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Button "Menü schließen""

**Technischer Name**:\
`twt-offcanvas-close-style`

{% hint style="info" %}
Wähle, wie der Button "Menü schließen" über dem Inhalt dargestellt wird.

**Button**: Eine gefüllte Fläche mit Trennlinie und weichem Schatten darunter.

**Link**: Nur Text und Icon, ohne Fläche, Trennlinie und Schatten. Die Hintergrundfarbe bleibt dann wirkungslos.

**Hinweis**: Der Button gehört zur Offcanvas-Navigation und zum Offcanvas-Warenkorb gleichermaßen. Das Filter-Panel bringt einen eigenen mit.
{% endhint %}

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$twt-color-secondary-button`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Button "Menü schließen""

**Technischer Name**:\
`twt-offcanvas-close-background-color`

{% hint style="info" %}
Hier kannst du die Hintergrundfarbe für den Button "Menü schließen" konfigurieren.

**Textfarbe / Hover-Effekt:**\
Gemäß Bootstrap wird die Textfarbe automatisch aus diesem Farbwert invertiert.\
Für den Hover-Effekt wird dieser Farbwert automatisch abgedunkelt.

**Hinweis**: In der Darstellungsart "Link" bleibt diese Einstellung wirkungslos.
{% endhint %}