# DF Swipe Gallery: Produktnavigation per Swipe

> Überblick DF Swipe Gallery verwandelt die Kategorieseiten Ihres PrestaShop-Shops in ein Vollbild-Kartendeck im Tinder-Stil. Der Besucher entdeckt die Produkte einzeln: Swipe nach rechts zum Liken (Wunschliste), nach links zum Überspringen,…

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

## Überblick

DF Swipe Gallery verwandelt die Kategorieseiten Ihres PrestaShop-Shops in ein Vollbild-Kartendeck im Tinder-Stil. Der Besucher entdeckt die Produkte einzeln: Swipe nach rechts zum Liken (Wunschliste), nach links zum Überspringen, nach oben für den Warenkorb. Eine Fortschrittsleiste im Stories-Stil zeigt den Fortschritt an, ein Abschlussbildschirm fasst die Favoriten der Session zusammen. Alle Interaktionen fließen in ein Dashboard im Back Office.

Das Modul läuft ohne Abhängigkeiten: kein Composer, kein jQuery, kein externer Dienst. Kompatibel mit PrestaShop 8.0 bis 9.x, Multishop, in 8 Sprachen übersetzt (FR, EN, ES, DE, IT, NL, PL, PT).

## Installation

1. Öffnen Sie im Back Office **Module > Modul-Manager > Modul hochladen**.
2. Laden Sie `dfswipegallery.zip` hoch und klicken Sie auf **Installieren**.
3. Das Modul erstellt seine beiden Tabellen (`df_swipegallery_like` und `df_swipegallery_stat`), registriert seine Hooks und fügt den Tab **Katalog > Swipe Gallery** hinzu.

Es ist keine Theme-Anpassung nötig: Start-Button und Overlay werden über den Hook `displayFooterAfter` eingebunden, unabhängig von Ihrem Template.

### Update von 1.0.0

Laden Sie das ZIP 1.1.0 über das bestehende Modul. Das Update-Skript ergänzt die Spalte für Aufrufe der Produktseite, registriert die neuen Hooks, legt die neuen Einstellungen mit ihren Standardwerten an und behält Ihre Likes und Statistiken. Leeren Sie anschließend den PrestaShop-Cache.

Seit 1.1.0 zählt „Gesehene Karten“ nur noch Karten, die tatsächlich oben auf dem Stapel angezeigt wurden (in 1.0.0 wurden alle geladenen Karten gezählt). Die mit den neuen Daten berechneten Raten sind dadurch zuverlässiger; ein Zurücksetzen der Statistiken nach dem Update wird empfohlen.

## Konfiguration

Öffnen Sie **Module > DF Swipe Gallery > Konfigurieren**. Verfügbare Optionen:

- **Swipe Gallery aktivieren**: aktiviert oder deaktiviert das Modul global.
- **Nur Mobilgeräte**: beschränkt den schwebenden Button auf Bildschirme unter 992 px (standardmäßig aktiviert). Deaktivieren Sie die Option, um das Deck auch am Desktop anzubieten.
- **Maximale Produkte pro Deck**: von 5 bis 100 (Standard: 30).
- **Reihenfolge des Decks**: Position in der Kategorie, zufällig (zum Entdecken empfohlen) oder Neueste zuerst.
- **Swipe nach oben legt in den Warenkorb**: aktiviert den Super-Like.
- **Besucher die Variante wählen lassen**: bei Produkten mit Varianten öffnet der Swipe nach oben ein Fenster zur Wahl von Größe, Farbe usw., bevor das Produkt in den Warenkorb kommt. Deaktiviert wird direkt die Standardvariante hinzugefügt (neu in 1.2.0, standardmäßig aktiviert).
- **Bereits gelikte Produkte ausblenden**: schließt bereits gelikte Produkte aus neuen Decks aus.
- **Nicht vorrätige Produkte ausblenden**: lässt Produkte weg, die mangels Bestand nicht bestellbar sind (neu in 1.1.0).
- **Preis auf den Karten anzeigen**: zeigt den Preis, bei Rabatten mit durchgestrichenem Originalpreis. Im Katalogmodus automatisch ausgeblendet.
- **Position des Start-Buttons**: unten rechts, unten links oder unten mittig.
- **Akzentfarbe**: Farbe des Start-Buttons und des Neustart-Buttons (neu in 1.1.0). Die Textfarbe passt sich automatisch an, damit sie lesbar bleibt.

Für eine überzeugende Demo wählen Sie die **zufällige** Reihenfolge, lassen den Swipe nach oben aktiviert und schalten **Nicht vorrätige Produkte ausblenden** ein: so kann jede Karte im Warenkorb landen.

## Nutzung im Shop

Auf jeder Kategorieseite erscheint ein schwebender „Swipe-Modus“-Button. Beim Antippen öffnet sich das Deck im Vollbild:

- **Swipe nach rechts** (oder Herz-Button): das Produkt wird geliked und auf die Wunschliste gesetzt.
- **Swipe nach links** (oder Kreuz-Button): springt zum nächsten Produkt.
- **Swipe nach oben** (oder Warenkorb-Button): legt das Produkt in den Warenkorb; bei Produkten mit Varianten öffnet sich zuerst ein Fenster zur Wahl der Variante. Bei nicht verfügbaren Produkten ist der Button ausgegraut.
- **„Produkt ansehen“**: öffnet die Produktseite.

Eine kurze, aber schnelle Wischbewegung genügt, um einen Swipe auszulösen. Die Karten zeigen bei Bedarf die Hinweise „Bereits geliked“ und „Nicht verfügbar“. Am Desktop bilden die Pfeiltasten die Gesten ab (rechts: Like, links: überspringen, oben: Warenkorb), Escape schließt das Deck. Auf dem Smartphone schließt die Zurück-Taste das Deck, statt die Seite zu verlassen.

Am Ende des Decks listet ein Abschlussbildschirm die gelikten Produkte mit Preis und Link zur jeweiligen Produktseite. Der Button **Neu starten** lädt ein neues Deck, ohne das Overlay zu schließen.

Barrierefreiheit: Der Fokus springt beim Öffnen ins Deck und beim Schließen zurück zum Button, die Tab-Navigation bleibt im Deck, das aktuelle Produkt wird Screenreadern angesagt, und Animationen werden abgeschaltet, wenn der Besucher `prefers-reduced-motion` aktiviert hat.

## Wunschliste, Kunden und Gäste

Jeder Like wird in der Tabelle des Moduls gespeichert, egal ob er von einem eingeloggten Kunden oder einem Gast stammt (zugeordnet über dessen PrestaShop-Besucherkennung). Ein Unique Key verhindert Duplikate, auch wenn ein Kunde mehrere Geräte nutzt.

Ist das offizielle Modul **blockwishlist** installiert und der Kunde eingeloggt, wird das Produkt mit seiner Standardvariante seiner Standard-Wunschliste hinzugefügt, die bei Bedarf automatisch angelegt wird. Es ist keine Konfiguration nötig.

Seit 1.1.0 werden die Likes eines Gastes beim Login oder bei der Registrierung automatisch ins Kundenkonto übertragen und anschließend seiner blockwishlist-Wunschliste hinzugefügt. Die Hooks `actionAuthentication` und `actionCustomerAccountAdd` übernehmen das; ein Fehler in diesem Schritt blockiert den Login nie.

## Warenkorb per Swipe

Der Swipe nach oben fügt das Produkt serverseitig nach denselben Regeln wie der native Button hinzu: vom Besucher gewählte Variante (oder Standardvariante, wenn das Fenster deaktiviert ist), Mindestmenge, Prüfung von Bestand und Zugriffsrechten. Der Warenkorb wird bei Bedarf angelegt und in der Session des Besuchers gespeichert.

Danach wird das Warenkorb-Badge des Themes über das Standard-Event `prestashop.emit('updateCart')` aktualisiert, ohne das Theme-Fenster „Produkt hinzugefügt“ zu öffnen. Eine Meldung bestätigt das Hinzufügen; ist es nicht möglich, sieht der Besucher den Grund.

### Auswahl der Variante

Bei Produkten mit Varianten öffnen der Swipe nach oben, der Warenkorb-Button oder die Pfeiltaste nach oben ein Fenster am unteren Bildschirmrand. Farben erscheinen als Farbfelder (oder mit ihrer Textur, sofern unter **Katalog > Attribute** hinterlegt), andere Attribute als Buttons, und eine lange Liste vom Typ Dropdown bleibt ein Dropdown. Die Standardvariante ist vorausgewählt.

Bei jeder Auswahl aktualisiert das Fenster Bild, Preis (bei Rabatten durchgestrichen) und Bestand der Variante. Ein nicht vorrätiger Wert ist abgeschwächt; ein Wert, den es mit den übrigen Auswahlen nicht gibt, ist durchgestrichen, und seine Auswahl wechselt zur nächstliegenden vorhandenen Variante, bevorzugt einer vorrätigen. Der Button zum Hinzufügen bleibt deaktiviert, solange die Variante nicht bestellbar ist.

Escape, das Kreuz oder die Zurück-Taste des Smartphones schließen das Fenster, ohne das Deck zu verlassen. Die Daten werden beim ersten Öffnen geladen und für die Session zwischengespeichert. Serverseitig wird die übermittelte Variante geprüft (sie muss zum Produkt gehören und im Shop verkauft werden) und der Bestand kontrolliert, einschließlich dessen, was bereits im Warenkorb liegt.

Der Like (Swipe nach rechts) bleibt sofortig: Das Produkt kommt mit seiner Standardvariante auf die Wunschliste, damit der Swipe-Rhythmus nicht unterbrochen wird.

## Back-Office-Statistiken

Der Tab **Katalog > Swipe Gallery** zeigt:

- Die Zähler: gesehene Karten, Likes, übersprungene, Warenkorb-Zugänge, Aufrufe der Produktseite.
- Die **Like-Rate** (Likes / (Likes + übersprungen)), die Warenkorb-Rate und die Öffnungsrate der Produktseite pro gesehener Karte.
- Die **20 Produkte mit den meisten Likes**, mit Link zur Produktseite im Back Office.
- Die **am häufigsten übersprungenen Produkte** (mindestens 5 Swipes), sortiert nach Überspringrate: gute Kandidaten für ein besseres Hauptfoto oder einen überarbeiteten Preis.
- Den **CSV-Export** aller Statistiken und einen Button zum **Zurücksetzen** pro Shop (die Likes der Besucher bleiben erhalten).

Die Statistiken eines gelöschten Produkts werden automatisch bereinigt. Es werden keine Daten an Drittanbieter gesendet.

## DSGVO

Das Modul meldet sich beim offiziellen Modul **psgdpr** an: Likes, die mit einem Kundenkonto verknüpft sind, erscheinen im Export der personenbezogenen Daten und werden bei einem Löschantrag entfernt. Sie werden außerdem gelöscht, wenn ein Kunde im Back Office gelöscht wird. Die Statistiken sind pro Produkt aggregiert und enthalten keine personenbezogenen Daten.

## Multishop und Übersetzungen

Likes und Statistiken werden pro Shop erfasst. Das Modul wird in 8 Sprachen übersetzt ausgeliefert (Englisch als Ausgangssprache, dazu FR, ES, DE, IT, NL, PL, PT). Um einen Text anzupassen, nutzen Sie **International > Übersetzungen > Übersetzungen installierter Module**.

## Fehlerbehebung

- **Der Button erscheint nicht**: prüfen Sie, ob das Modul aktiviert ist, ob Sie sich auf einer Kategorieseite befinden und ob „Nur Mobilgeräte“ deaktiviert ist, wenn Sie am Desktop testen.
- **Das Deck ist leer**: die Kategorie enthält kein aktives sichtbares Produkt, ist für die Kundengruppe des Besuchers nicht zugänglich, oder alle Produkte werden durch „Bereits gelikte Produkte ausblenden“ oder „Nicht vorrätige Produkte ausblenden“ ausgeschlossen.
- **Das Warenkorb-Badge aktualisiert sich nicht**: Ihr Theme hört möglicherweise nicht auf das Event `updateCart`; das Produkt liegt im Warenkorb, passen Sie den Listener im Theme an oder kontaktieren Sie den Support.
- **Ein Theme-Element liegt über dem Deck**: das Overlay nutzt einen z-index von 100000; erhöhen Sie ihn per CSS, falls ein Cookie-Banner oder Chat-Widget es überdeckt.
- **Nach dem Update bleibt das alte Verhalten bestehen**: leeren Sie den PrestaShop- und den Browser-Cache; das Update-Skript setzt außerdem den OPcache zurück, sofern verfügbar.

## Changelog

- **1.2.0** (2026-10-13): Auswahl der Variante vor dem Warenkorb (Farbfelder, Größen, Preis, Bild und Bestand je Variante, nicht vorhandene Varianten durchgestrichen und automatischer Wechsel zur nächstliegenden); Option „Besucher die Variante wählen lassen“; genaue Meldung bei nicht vorrätiger Variante; Darstellung unabhängig vom box-sizing des Themes.
- **1.1.0** (2026-10-13): per Swipe nach oben erstellter Warenkorb bleibt jetzt erhalten; Standardvariante in Warenkorb und Wunschliste; kein Fenster „Produkt hinzugefügt“ mehr hinter dem Deck; automatische Übertragung der Gast-Likes ins Kundenkonto; zuverlässige Statistiken (tatsächlich gesehene Karten, Aufrufe der Produktseite, am häufigsten übersprungene Produkte, CSV-Export, Zurücksetzen); Optionen „Nicht vorrätige Produkte ausblenden“ und „Akzentfarbe“; durchgestrichener Preis; Zurück-Taste, schnelle Wischgeste, Fokusverwaltung; DSGVO über psgdpr; Übersetzungen in 8 Sprachen.
- **1.0.0** (2026-07-16): Erstveröffentlichung. Vollbild-Swipe-Deck, Wunschliste per Swipe nach rechts mit blockwishlist-Anbindung, Warenkorb per Swipe nach oben, Gast-Unterstützung, Dashboard, Stories-Fortschrittsleiste, Kompatibilität mit PrestaShop 8 und 9, Multishop.