# DF Swipe Gallery: producten ontdekken door te vegen

> Overzicht DF Swipe Gallery maakt van de categoriepagina's van uw PrestaShop-winkel een schermvullend kaartendek in Tinder-stijl. De bezoeker ontdekt de producten één voor één: naar rechts vegen om te liken…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfswipegallery/>
- Taal: nl
- Bijgewerkt op: 2026-09-09
- Andere talen: [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), [de](https://www.datafirefly.com/de/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)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

## Overzicht

DF Swipe Gallery maakt van de categoriepagina's van uw PrestaShop-winkel een schermvullend kaartendek in Tinder-stijl. De bezoeker ontdekt de producten één voor één: naar rechts vegen om te liken (verlanglijst), naar links om over te slaan, naar boven om aan de winkelwagen toe te voegen. Een voortgangsbalk in storiesstijl toont hoever hij staat, en een eindscherm vat de favorieten van de sessie samen. Alle interacties voeden een analysedashboard in de backoffice.

De module werkt zonder enige afhankelijkheid: geen Composer, geen jQuery, geen externe dienst. Compatibel met PrestaShop 8.0 tot 9.x, multistore en meertalig.

## Installatie

1. Open in uw backoffice **Modules → Modulebeheer → Een module installeren**.
2. Verstuur het bestand `dfswipegallery.zip` en klik op **Installeren**.
3. De module maakt automatisch zijn twee tabellen aan (`df_swipegallery_like` en `df_swipegallery_stat`), registreert zijn hooks en voegt het tabblad **Catalogus → Swipe Gallery** toe.

Er is geen enkele aanpassing aan het thema nodig: de startknop en de overlay worden via de hook `displayFooterAfter` geïnjecteerd, los van uw template.

## Configuratie

Open **Modules → DF Swipe Gallery → Configureren**. De beschikbare opties:

- **Swipe gallery inschakelen**: zet de module globaal aan of uit.
- **Alleen mobiele toestellen**: beperkt de zwevende knop tot schermen smaller dan 992 px (standaard aan). Schakel dit uit om het dek ook op desktop aan te bieden.
- **Maximaal aantal producten per dek**: aantal kaarten per sessie, van 5 tot 100 (standaard 30).
- **Volgorde van het dek**: volgorde van de kaarten: positie in de categorie, willekeurig (aanbevolen om te ontdekken) of nieuwigheden eerst.
- **Naar boven vegen voegt toe aan de winkelwagen**: schakelt de superlike in: naar boven vegen legt het product in de winkelwagen.
- **Al gelikete producten verbergen**: houdt producten die de bezoeker al likete uit nieuwe dekken.
- **Prijs op de kaarten tonen**: toont of verbergt de prijs op de kaarten (automatisch verborgen in catalogusmodus).
- **Positie van de startknop**: positie van de zwevende knop: rechtsonder, linksonder of onderaan gecentreerd.

Voor een overtuigende demonstratie kiest u de **willekeurige** volgorde en laat u het naar boven vegen naar de winkelwagen aanstaan: die combinatie levert de meeste betrokkenheid op.

## Gebruik aan winkelzijde

Op elke categoriepagina verschijnt een zwevende knop « Swipe-modus ». Bij een tik opent het dek schermvullend:

- **Naar rechts vegen** (of de hartknop): liken, waarna het product op de verlanglijst komt.
- **Naar links vegen** (of de kruisknop): door naar het volgende product.
- **Naar boven vegen** (of de winkelwagenknop): legt het product in de winkelwagen.
- **Tik op « Product bekijken »**: opent de productfiche.

Op desktop bootsen de pijltoetsen de gebaren na (→ liken, ← overslaan, ↑ winkelwagen) en sluit de Escape-toets het dek. Op geschikte toestellen begeleidt een haptische trilling elke veeg, en de animatie wordt uitgeschakeld als de bezoeker `prefers-reduced-motion` heeft aangezet.

Aan het einde van het dek toont een overzichtsscherm de gelikete producten met hun prijs en een rechtstreekse link naar elke fiche, plus een knop om een nieuwe sessie te starten.

## Verlanglijst, klanten en gasten

Elke like wordt in de eigen tabel van de module bewaard, of die nu van een ingelogde klant komt of van een gastbezoeker (gekoppeld aan zijn `id_guest`). Een unieke sleutel voorkomt dubbels.

Is de officiële module **blockwishlist** geïnstalleerd en is de klant ingelogd, dan komt het product ook op zijn standaardverlanglijst, die automatisch wordt aangemaakt als die nog niet bestaat. Daarvoor is geen configuratie nodig: de brug werkt stil en faalt nooit luidruchtig.

De likes van gasten blijven aan hun sessie hangen. De module stelt een samenvoeghelper beschikbaar (`attachGuestLikesToCustomer`) waarmee u die likes na het inloggen aan het klantaccount kunt koppelen, als u dat gedrag wilt aansluiten.

## Aan de winkelwagen toevoegen door te vegen

Naar boven vegen voegt het product aan serverzijde toe: de winkelwagen wordt zo nodig aangemaakt, de minimale hoeveelheid van het product wordt gerespecteerd en de winkelwagenteller van het thema wordt vernieuwd via de standaardgebeurtenis `prestashop.emit('updateCart')`. Producten die niet besteld kunnen worden, worden netjes geweigerd met een melding.

## Statistieken in de backoffice

Het tabblad **Catalogus → Swipe Gallery** toont het dashboard:

- Globale tellers: bekeken kaarten, likes, overslagen en toevoegingen aan de winkelwagen.
- **Globaal likepercentage**: likes / (likes + overslagen).
- **Top 20 van de producten op likes**, met weergaven, overslagen, winkelwagens en het likepercentage per product.

Die gegevens vormen een rechtstreeks merchandisingsignaal: producten met een hoog likepercentage verdienen meer aandacht, producten die massaal worden overgeslagen verdienen een betere foto of een andere positionering. De statistieken van een verwijderd product worden automatisch opgeruimd.

Er wordt geen enkel gegeven naar een externe dienst gestuurd: alle statistieken blijven in uw eigen database.

## Multistore en meertaligheid

De likes en de statistieken worden per winkel vastgelegd (`id_shop`). De teksten van het dek (Liken, Overslaan, Product bekijken, het overzichtsscherm en zo verder) lopen via het native vertaalsysteem van PrestaShop: vertaal ze in **Internationaal → Vertalingen → Vertalingen van de geïnstalleerde modules**.

## Problemen oplossen

- **De knop verschijnt niet**: controleer of de module aanstaat, of u wel op een categoriepagina bent en of de optie voor alleen mobiel niet aanstaat wanneer u op desktop test.
- **Het dek is leeg**: de categorie bevat geen enkel actief en zichtbaar product, of alle producten vallen weg door de optie « Al gelikete producten verbergen ».
- **De winkelwagenteller wordt niet bijgewerkt**: uw eigen thema luistert mogelijk niet naar de gebeurtenis `updateCart`; pas de luisteraar in uw thema aan of neem contact op met de ondersteuning.
- **Weergaveconflict**: de overlay gebruikt een z-index van 1060; verhoog die via CSS als een element van uw thema erbovenop komt.

## Changelog

- **1.0.0** (16-07-2026): eerste versie met een schermvullend swipedek, verlanglijst door naar rechts te vegen met een brug naar blockwishlist, toevoegen aan de winkelwagen door naar boven te vegen, ondersteuning voor gasten, een analysedashboard, een voortgangsbalk in storiesstijl, toegankelijkheid, en compatibiliteit met PrestaShop 8 en 9 en met multistore.
