# Produktbild-Hover & Automatische Badges — Konfigurationsanleitung

> Diese Anleitung erklärt, wie Sie das Modul Produktbild-Hover & Automatische Badges für PrestaShop 8 und 9 installieren und konfigurieren. Das Modul zeigt das zweite Bild des Produkts beim Hover in…

- Seite: <https://www.datafirefly.com/de/documentation/image-survol-badges-prestashop/>
- Sprache: de
- Aktualisiert am: 2026-07-15
- Weitere Sprachen: [fr](https://www.datafirefly.com/documentation/image-survol-badges-prestashop/index.md), [en](https://www.datafirefly.com/en/documentation/image-survol-badges-prestashop/index.md), [es](https://www.datafirefly.com/es/documentation/image-survol-badges-prestashop/index.md), [it](https://www.datafirefly.com/it/documentation/image-survol-badges-prestashop/index.md), [pl](https://www.datafirefly.com/pl/documentation/image-survol-badges-prestashop/index.md), [pt](https://www.datafirefly.com/pt/documentation/image-survol-badges-prestashop/index.md), [nl](https://www.datafirefly.com/nl/documentation/image-survol-badges-prestashop/index.md)
- Index: <https://www.datafirefly.com/de/documentation/llms.txt>

Diese Anleitung erklärt, wie Sie das Modul **Produktbild-Hover & Automatische Badges** für PrestaShop 8 und 9 installieren und konfigurieren. Das Modul zeigt das zweite Bild des Produkts beim Hover in den Listen an und vergibt automatisch Badges für Neu, Sale und Geringer Bestand nach von Ihnen definierten Regeln, ohne Ihr Theme zu überschreiben.

## Installation

Die Installation funktioniert wie bei jedem PrestaShop-Modul:

1. Gehen Sie im Back-Office zu **Module > Modul-Manager**.
2. Klicken Sie auf **Ein Modul hochladen** und legen Sie das ZIP-Archiv des Moduls ab.
3. Klicken Sie nach Abschluss der Installation auf **Konfigurieren**, um die Einstellungsseite zu öffnen.

Das Modul registriert den Hook `actionFrontControllerSetMedia` und lädt seine Assets (CSS und JavaScript) nur auf den Listenseiten und der Produktseite. Keine Template-Datei wird überschrieben.

## Einstellungen für das Hover-Bild

Der erste Konfigurationsblock steuert den Bildwechsel beim Hover:

- **Zweites Bild beim Hover anzeigen**: aktiviert oder deaktiviert den Effekt. Produkte mit nur einem Bild werden automatisch übersprungen.
- **Übergangseffekt**: _Überblenden_, _Überblenden + Zoom_ oder _Sofort_.
- **Badge-Position**: die Ecke, in der die Badges erscheinen (oben links, oben rechts, unten links, unten rechts). Diese Einstellung gilt gemeinsam für alle Badges.

Das Hover-Bild ist das **zweite Bild des Produkts** gemäß der Positionsreihenfolge, die im Reiter Bilder der Produktseite festgelegt ist. Um das beim Hover angezeigte Bild zu ändern, ordnen Sie einfach die Bilder des Produkts neu an.

## Die drei automatischen Badges

Jedes Badge kann unabhängig aktiviert werden, mit eigener mehrsprachiger Beschriftung, Hintergrund- und Textfarbe.

### Badge „Neu“

Es wird für eine konfigurierbare Anzahl von Tagen nach dem Erstellungsdatum des Produkts angezeigt. Der Standardwert übernimmt die PrestaShop-Einstellung `PS_NB_DAYS_NEW_PRODUCT`. Legen Sie die gewünschte Dauer im Feld **Produkt gilt als neu für (Tage)** fest.

### Badge „Sale“

Es erscheint, wenn ein Produkt als „Im Angebot“ markiert ist oder wenn ein **spezifischer Preis mit Rabatt** für den Kontext des Besuchers aktiv ist (Shop, Währung, Land, Kundengruppe und Gültigkeitszeitraum). Die Option **Rabattprozentsatz anzeigen** ersetzt die Beschriftung durch den Wert, zum Beispiel `-20 %`, wenn der Rabatt prozentual ist.

### Badge „Geringer Bestand“

Es erscheint, wenn die verfügbare Menge des Produkts strikt größer als 0 und kleiner oder gleich dem von Ihnen festgelegten **Schwellenwert für geringen Bestand** ist. Die Menge wird aus der Tabelle `stock_available` mit Multishop-Auflösung gelesen (der aktuelle Shop hat Vorrang vor der Shop-Gruppe).

## Mehrsprachige Beschriftungen

Die Beschriftungen Neu, Sale und Geringer Bestand werden standardmäßig in Französisch, Englisch, Spanisch, Deutsch und Italienisch geliefert. Jede Beschriftung ist sprachweise auf der Konfigurationsseite bearbeitbar: Wählen Sie die Sprache im Feldauswähler und geben Sie dann den gewünschten Text ein.

## Performance und Kompatibilität

- **Ein einziger gebündelter AJAX-Aufruf** pro Seite ruft die Daten aller sichtbaren Produkte ab (bis zu 120 Produkte pro Los).
- Das Hover-Bild wird per **Lazy-Loading** geladen, nur beim ersten Hover mit der Maus.
- Das Skript ist **Vanilla-JavaScript**, ohne jQuery-Abhängigkeit.
- Das Modul erkennt die Produkt-Miniaturen in JavaScript: Es ist mit dem _classic_-Theme und Child-Themes kompatibel und passt sich nach Facettennavigation und AJAX-Paginierung automatisch wieder an.
- Auf reinen Touch-Geräten wird der Bildwechsel beim Hover automatisch deaktiviert.

## Fehlerbehebung

**Der Hover zeigt kein zweites Bild.** Prüfen Sie, dass das Produkt mindestens zwei Bilder im Reiter Bilder seiner Seite hat und dass die Hover-Bild-Option aktiviert ist.

**Ein Badge erscheint nicht.** Stellen Sie sicher, dass das Badge aktiviert ist, dass seine Beschriftung für die aktuelle Sprache nicht leer ist und dass die Bedingung erfüllt ist (neues Produkt, aktiver spezifischer Preis oder Menge unter dem Schwellenwert).

**Nach dem Filtern wird nichts angezeigt.** Das Modul passt sich nach der Facettennavigation wieder an; wenn Ihr Theme einen benutzerdefinierten Rendering-Mechanismus verwendet, leeren Sie nach der Installation den PrestaShop-Cache (Erweiterte Einstellungen > Leistung).