# Module Quick View voor PrestaShop 8/9: documentatie > Overzicht DF Quick View vervangt de native snelweergave van uw PrestaShop-thema door een moderne modale: een volledige beeldgalerij, het live kiezen van varianten, een voorraadaanduiding, een aantalkiezer en toevoegen aan… - Pagina: - Taal: nl - Bijgewerkt op: 2026-09-09 - Andere talen: [fr](https://www.datafirefly.com/documentation/dfquickview/index.md), [en](https://www.datafirefly.com/en/documentation/dfquickview/index.md), [es](https://www.datafirefly.com/es/documentation/dfquickview/index.md), [de](https://www.datafirefly.com/de/documentation/dfquickview/index.md), [it](https://www.datafirefly.com/it/documentation/dfquickview/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfquickview/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfquickview/index.md) - Index: ## Overzicht DF Quick View vervangt de native snelweergave van uw PrestaShop-thema door een moderne modale: een volledige beeldgalerij, het live kiezen van varianten, een voorraadaanduiding, een aantalkiezer en toevoegen aan de winkelwagen via AJAX. Dankzij het vooraf laden bij het zweven opent de modale meteen en blijft de klant tijdens zijn hele traject op zijn categoriepagina. De module overschrijft geen enkele template van het thema: hij voegt zich in via de standaardhook `actionFrontControllerSetMedia` en werkt aan browserzijde op de bestaande productminiaturen. De JavaScript is puur, zonder jQuery en zonder externe afhankelijkheid. ## Vereisten - PrestaShop 8.0 tot 9.x - PHP 7.4 of hoger - Een thema dat productminiaturen op de overzichtspagina's toont (het Classic-thema en zijn afgeleiden werken zonder instelling) ## Installatie 1. Download het archief `dfquickview-1.0.0.zip` vanuit uw DataFirefly-klantaccount. 2. Ga in de backoffice naar **Modules > Modulebeheer**, klik op **Een module installeren** en plaats het archief. 3. Klik op **Installeren** en daarna op **Configureren**. Er wordt geen enkele tabel in de database aangemaakt: de module bewaart alleen zijn instellingen in de configuratietabel van PrestaShop. Het verwijderen verloopt netjes en wist al zijn sleutels. ## Configuratie ### Manier van activeren Drie modi bepalen hoe de modale opent: - **Onderscheppen**: de module vangt de snelweergavelinks van uw thema op (de elementen met de klassen `.quick-view` of `.js-quick-view`, of met het attribuut `data-link-action="quickview"`) en opent zijn eigen modale in de plaats. Het native gedrag wordt uitgeschakeld. - **Injecteren**: de module zet zijn eigen knop over elke productminiatuur heen. Handig als uw thema geen snelweergave biedt. - **Beide** (aanbevolen, de standaardwaarde): allebei de mechanismen staan aan. ### CSS-selector van de productminiaturen De module moet weten welke elementen op de pagina een productminiatuur zijn. De standaardwaarde, `.product-miniature, .js-product-miniature`, dekt het Classic-thema en de grote meerderheid van de childthema's. Gebruikt uw thema een andere structuur, open dan een categoriepagina, bekijk de container van een product met de ontwikkelaarstools van uw browser, en vul die klasse hier in. De module zoekt daarna de product-ID in het attribuut `data-id-product` binnen de miniatuur, en leidt die anders af uit de URL van de productlink. ### Slim vooraf laden Standaard aan. Zodra de cursor tijdens de **vertraging vóór het laden** (standaard 120 ms) op een productminiatuur blijft hangen, haalt de module de productgegevens op de achtergrond op en laadt hij alvast de eerste afbeelding. Bij de klik staat alles al klaar in het geheugen: de modale opent zonder vertraging. Op mobiel start het vooraf laden bij de eerste aanraking van de miniatuur. Er vertrekt maar één verzoek per product, ook als de bezoeker meermaals over dezelfde miniatuur zweeft. Baart het vooraf laden u zorgen voor de serverbelasting, verhoog dan de vertraging (300 tot 500 ms filtert ongewilde zweefbewegingen weg) of zet die uit: de modale laadt dan bij de klik, met een geanimeerd laadskelet. ### Levensduur van de clientcache De opgehaalde productgegevens blijven gedurende de opgegeven tijd in de sessie van de browser bewaard (standaard 300 seconden). Een bezoeker die dezelfde modale opnieuw opent, veroorzaakt geen nieuw verzoek. De cache is afgeschermd per taal, valuta, winkel en klantgroep: een bezoeker kan nooit de prijs zien die voor een andere groep is berekend. Zet de waarde op 0 om de sessiecache helemaal uit te schakelen (de geheugencache van de pagina blijft dan wel actief). ### Getoonde inhoud - **De korte beschrijving tonen**: toont de samenvatting van het product in de modale (op mobiel verborgen om plaats te sparen). - **De productreferentie tonen**: toont de referentie van het product, of die van de gekozen variant als die er een heeft. - **De link « De productfiche bekijken » tonen**: zet onder de winkelwagenknop een link naar de volledige fiche. ### Op alle pagina's laden Standaard laadt de module zijn bestanden alleen op de overzichtspagina's: startpagina, categorieën, zoekresultaten, merken, leveranciers, promoties, nieuwigheden en bestsellers. Schakel die optie in als u elders productminiaturen toont, bijvoorbeeld op CMS-pagina's, in eigen blokken of in externe modules. ### Accentkleur Bepaalt de kleur van de knoppen, de selectieomranding en de actieve toestanden in de modale. Vul een hexadecimale kleur in die bij uw huisstijl past. ## Werking van de modale ### Galerij De modale toont alle afbeeldingen van het product: de hoofdafbeelding, aanklikbare miniaturen eronder en pijlen voor vorige en volgende. Bediening met het toetsenbord wordt ondersteund (de linker- en rechterpijl om van beeld te wisselen, Escape om te sluiten) en op mobiel werkt vegen. Heeft de gekozen variant in PrestaShop gekoppelde afbeeldingen, dan beperkt de galerij zich automatisch tot die afbeeldingen. Zo niet, dan blijven alle afbeeldingen van het product zichtbaar. ### Varianten De attribuutgroepen verschijnen volgens het type dat in PrestaShop is ingesteld: - **Kleurbolletje**: groepen die als kleurgroep zijn gemarkeerd, tonen een rond bolletje, met de textuur als er voor het attribuut een textuurbestand bestaat, en anders de hexadecimale kleur. - **Keuzelijst**: groepen van het type « keuzelijst » tonen een menu. - **Knop**: de andere groepen tonen aanklikbare rechthoekige knoppen. Bij elke wijziging van de keuze berekent de module de bijbehorende combinatie opnieuw en werkt hij de prijs, de doorgestreepte prijs, het kortingspercentage, de referentie, de voorraad, de minimale hoeveelheid en de afbeeldingen bij. Twee visuele toestanden wijzen op een doodlopend spoor: - **Grijs**: het attribuut komt, samen met de huidige keuze, met geen enkele bestaande variant overeen. - **Vervaagd**: de combinatie bestaat wel maar is uitverkocht, en het product staat bestellen bij uitverkocht niet toe. ### Voorraad en hoeveelheid Er verschijnen drie toestanden, afhankelijk van de beschikbaarheid van de gekozen variant: **op voorraad**, **in herbevoorrading** (bestellen bij uitverkocht is toegestaan) of **uitverkocht** (dan staat de toevoegknop uit). De aantalkiezer respecteert de minimale hoeveelheid die op het product of op de variant is bepaald: hij start op die waarde en laat niet toe daaronder te gaan. ### Toevoegen aan de winkelwagen Het toevoegen gaat via AJAX naar de native winkelwagencontroller van PrestaShop. Lukt dat, dan stuurt de module de gebeurtenis `updateCart` van het frontoffice-framework uit: het winkelwagenblok in uw kop werkt zichzelf bij, zonder herladen. Fouten die de winkel terugstuurt (uitverkocht, minimale hoeveelheid niet gehaald, product niet beschikbaar) verschijnen in de modale, onder de knop. Producten met verplichte personalisatievelden kunnen niet vanuit een modale aan de winkelwagen worden toegevoegd: de module toont dan een bericht en nodigt de klant uit de volledige productfiche te openen. ## Samengaan met het facetzoeken Past de klant een filter toe, dan vervangt PrestaShop de productlijst zonder de pagina te herladen. De module luistert naar de gebeurtenis `updateProductList` en houdt ook de wijzigingen aan het document in de gaten: zijn knoppen komen vanzelf op de nieuwe miniaturen te staan, zonder dat u iets hoeft te doen. ## Problemen oplossen ### Er verschijnt geen enkele knop op de miniaturen Controleer eerst of de manier van activeren het injecteren omvat (« Injecteren » of « Beide »). Bekijk daarna de CSS-selector van de miniaturen: open een categoriepagina, bekijk de container van een product en ga na of die met de ingestelde selector overeenkomt. Controleer tot slot of de miniatuur wel een attribuut `data-id-product` of een link naar de productfiche bevat. ### De modale opent niet bij een klik op de snelweergave van het thema De manier van activeren moet het onderscheppen omvatten (« Onderscheppen » of « Beide »). Sommige thema's gebruiken niet-standaard klassen voor hun knop: schakel dan over op « Injecteren » en verberg de native knop van uw thema met een CSS-regel in uw eigen stijlblad. ### De bestanden laden niet op een bepaalde pagina De module laadt zijn bestanden alleen op de gewone overzichtspagina's. Toont u productminiaturen op een CMS-pagina of in een externe module, schakel dan de optie **Op alle pagina's laden** in. ### De wijzigingen aan de configuratie zijn niet zichtbaar Leeg de cache van PrestaShop (**Geavanceerde parameters > Prestaties > Cache legen**) en herlaad de pagina met een geforceerde verversing van de browser. Hebt u de levensduur van de clientcache gewijzigd, dan houden bezoekers die al in sessie zijn hun gegevens tot die verloopt. ### De prijs in de modale komt niet overeen met die in het overzicht De prijzen in de modale worden aan serverzijde berekend met dezelfde methode als op de productfiche, rekening houdend met de klantgroep, de valuta en de belastingen. Blijft er een verschil, ga dan na of uw thema geen eigen prijsweergave op de miniaturen toepast, en leeg de clientcache door de levensduur tijdelijk op 0 te zetten. ## Verwijderen Kies in het modulebeheer voor **Verwijderen**. Alle configuratiesleutels van de module verdwijnen. Er raakt geen enkel product- of bestelgegeven aangetast.