# Bildvorschau per Mousehover

## Installation & Demo <a href="#installation" id="installation"></a>

Sie können das Plugin [hier über den Shopware Community Store erwerben](https://store.shopware.com/cbax354566541058/bildvorschau-im-listing-bei-mousehover-sw6.html). Das Plugin wird wie ein ganz gewöhnliches Plugin installiert. Sollten Sie zum ersten Mal ein Plugin installieren, finden Sie unter dem folgenden Link eine Anleitung zur Installation von Plugins:

{% embed url="<https://docs.shopware.com/de/shopware-6-de/Erweiterungen/MeineErweiterungen#meine-plugins>" %}
Shopware Handbuch zur Installation von Apps & Plugins
{% endembed %}

Nach der Installation des Plugins schalten Sie das Plugin aktiv und öffnen die Konfigurationsmaske. Hierzu klicken Sie auf die drei Punkte in der letzten Spalte und wählen "Konfiguration".

**Das Plugin im Demoshop ansehen:**

{% embed url="<https://demo-6.coolbax.com/Fashion/>" %}
Plugin live im Demoshop anschauen
{% endembed %}

## Plugin Einstellungen

{% hint style="warning" %}
Manche Einstellungen werden erst sichtbar, wenn Sie den Cache leeren. Gehen Sie hierfür zu: *Einstellungen > System > Caches & Indizes* und nutzen den Button: *Cache leeren*
{% endhint %}

| Feldname                                                  | Bedeutung                                                                                                 |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Aktiv                                                     | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren.                                          |
| Anzeigen in                                               | Bestimmung der Anzeige auf Endgeräte (Mehrfachauswahl möglich).                                           |
| [Position des Image Sliders](#position-des-image-sliders) | Vorschaubereich kann nach Innen oder Außen der Produktbox aufgehen.                                       |
| [Maximale Anzahl Bilder](#maximale-anzahl-bilder)         | Maximale Anzahl der Bilder im Vorschaubereich.                                                            |
| Aufklappgeschwindigkeit                                   | Bestimmen Sie die Aufklappgeschwindigkeit des Vorschaubereich.                                            |
| [Hover-Effekt](#hover-effekt)                             | Beim Aktivierung wird ein Schatten und/oder Rahmen um die Produktbox angezeigt (Mehrfachauswahl möglich). |

#### Position des Image Sliders

Der Bereich in dem sich die Vorschaubilder befinden, kann innerhalb oder außerhalb der Produktbox ausgeklappt werden.&#x20;

* **Anzeigemodus = Außen:** Der Bereich mit den Vorschaubilder schiebt sich an der linken Seite der Produktbox nach außen. Elemente welche sich in diesem Bereich befinden, werden überdeckt.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F2XBVmUaOKmav2qfmekOl%2FPluginSW6_BildvorschauListing-001.gif?alt=media&#x26;token=52a2aa41-671d-4548-ba4b-f4e0d3cb9a2f" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Außen</em></p></figcaption></figure>

* **Anzeigemodus = Innen:** Der Bereich mit den Vorschaubilder schiebt sich von der linken Seite nach Innen in die Produktbox und schiebt den Inhalt der Produktbox etwas zusammen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FKIeSCeEApbnL6C8oRKBA%2FPluginSW6_BildvorschauListing-002.gif?alt=media&#x26;token=d7e05139-e4f9-4958-b48f-1dbe401bc17d" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Innen</em></p></figcaption></figure>

#### Maximale Anzahl Bilder

Bestimmen Sie, wie viele Bilder sich maximal im eingefahrenen Vorschaubereich befinden können.&#x20;

Sollte der Platz für die Anzahl nicht ausreichen, wird automatisch ein vertikaler Slider eingefügt.&#x20;

Lassen Sie den Platz leer, wenn Sie alle verfügbaren Bilder darstellen möchten.

#### Hover-Effekt

Sie haben die Möglichkeit ein Rahmen und/oder einen Schatten um die Produktbox und den Vorschaubereich zu legen. Beides gleichzeitig ist ebenfalls möglich.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FT8gzHX8n4k8nNibgnIVN%2FPluginSW6_BildvorschauListing-003.jpg?alt=media&#x26;token=2fee8b2d-c7ef-4bcf-950b-e3dc29df125e" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Rahmen</em></p></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F7vAB6uRBpasuIRqAEYmo%2FPluginSW6_BildvorschauListing-004.jpg?alt=media&#x26;token=3514c3c7-d594-4e4f-97d2-a782e4843f86" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Schatten</em></p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/handbuecher/storefront/bildvorschau-per-mousehover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.