Directe productweergave - Quick view-popup met afbeeldingsslider, hover of klik, werkt in elk thema

De productlijst is geen doodlopende weg meer

Wie een categoriepagina doorneemt, heeft maar één vraag: is dit het juiste product? Die vraag beantwoorden kost normaal gesproken een klik naar de productpagina en een klik terug — en elk van die omwegen is een kans om de bezoeker kwijt te raken.

Deze module beantwoordt die vraag precies daar waar de bezoeker al is. Hij wijst een foto aan of klikt op een kleine vergrootglasknop, en boven de lijst opent een voorbeeldpopup: de productfoto's in een slider, de naam, de prijs, de korte beschrijving en het label New (nieuw) of On sale (in de aanbieding). Geen herladen van de pagina, niets wat u in uw thema hoeft te installeren.

Hover of klik — u bepaalt het

Zet de trigger op bij hover en de weergave volgt de aandacht van de bezoeker, geheel zonder klikken. Zet hem op bij klik en er verschijnt in plaats daarvan een kleine vergrootglasknop op de foto.

De klikmodus is zorgvuldig op één punt dat er echt toe doet: een gewone klik op de foto opent nog steeds de productpagina. Alleen de vergrootglasknop opent de voorbeeldweergave. Bezoekers die weten wat ze willen, worden nooit onderschept.

Twee indelingen

Verticaal zet de hoofdfoto bovenaan met daaronder een strook miniaturen. Horizontaal zet de foto links en de details rechts. Beide gebruiken hetzelfde stylesheet en dezelfde template — wisselen is één instelling, geen ander codepad.

In de verticale indeling wisselt de hoofdfoto direct zodra de bezoeker een miniatuur aanwijst. De optionele diavoorstelling bladert door de foto's met een interval dat u zelf kiest tussen 1000 en 20000 ms, en hij pauzeert zolang de bezoeker de foto aanwijst — zo wordt een afbeelding nooit weggetrokken bij iemand die er juist naar staat te kijken.

Goed om te weten voordat u kiest: de strook miniaturen hoort uitsluitend bij de verticale indeling. In de horizontale indeling zijn de foto's alleen via de diavoorstelling bereikbaar, dus kiest u horizontaal en zet u de diavoorstelling uit, dan krijgen bezoekers nooit meer dan de eerste foto te zien.

De getoonde prijs is de prijs die ze zouden betalen

Die wordt op de server berekend en niet in de browser gegokt. De popup gebruikt de valuta van de bezoeker, de belastingregels die voor hem gelden en zijn klantengroep — inclusief de vraag of die groep überhaupt prijzen mag zien.

Draait uw winkel in catalogusmodus, staan de prijzen van het product uit, of mag de groep van de bezoeker geen prijzen zien, dan wordt het prijsblok helemaal niet weergegeven. U hoeft er niet aan te denken het uit te zetten.

Labels die de waarheid vertellen

Het label New (nieuw) verschijnt alleen bij producten die werkelijk nieuw zijn, gemeten aan de instelling aantal dagen dat een product als nieuw wordt beschouwd van uw eigen winkel — het verdwijnt dus vanzelf zodra een product niet langer nieuw is.

On sale (in de aanbieding) volgt het selectievakje Toon de "Aanbieding!"-vlag op het tabblad Prijzen van het product zelf. Het hangt bewust niet aan kortingen: een product met een verlaagde prijs krijgt geen "On sale"-label zolang u het niet daadwerkelijk als aanbieding hebt gemarkeerd. Dat is nu juist de bedoeling — het label betekent wat u hebt bepaald, niet wat een specifieke prijs toevallig doet.

Het overleeft facetzoeken en oneindig scrollen

De events zijn gedelegeerd, dus producttegels die pas na het laden van de pagina verschijnen — gefilterd door facetzoeken, bijgeladen door oneindig scrollen, vervangen door een module van derden — werken direct. Er is geen herinitialisatiestap en er valt niets aan te sluiten.

Eén schakelaar voor de Quick view van uw thema

De meeste thema's hebben een eigen Quick view-knop, en twee concurrerende popups zijn een slechte ervaring. In plaats van u naar de themabestanden te sturen, kan de module de knop van uw thema voor u verbergen — met één schakelaar.

Hij kent zowel de Classic-markup (.quick-view, [data-link-action="quickview"]) als die van Hummingbird (.product-miniature__quickview-button, [data-ps-action="open-quickview"]). En hij regelt precies het detail dat hier meestal misgaat: de knop zit vaak in een wit hoverpaneel, zodat alleen de knop verbergen een lege witte balk op de tegel achterlaat. De module meet wat het paneel werkelijk bevat — was de Quick view het enige element erin, dan verdwijnt het hele paneel; bevat het paneel ook kleurstalen, dan blijven die zichtbaar.

Waar het verschijnt — en waar bewust niet

De voorbeeldweergave laadt op de homepage en op de pagina's categorie, zoekresultaten, merk, leverancier, nieuwe producten, best verkocht en prijsverlagingen — en ook op de productpagina, zodat de tegels Producten in dezelfde categorie en Bekeken producten er eveneens van profiteren.

De afrekenpagina wordt nooit aangeraakt. Daar wordt helemaal niets geladen.

Telefoons houden hun normale gedrag

Hover bestaat niet op een aanraakscherm, en een voorbeeldpopup die met een tik vecht, is erger dan geen voorbeeldweergave. Stel een minimale schermbreedte in — standaard 432 px — en daaronder schakelt de module zichzelf volledig uit, zodat uw mobiele bezoekers het eenvoudige, snelle gedrag houden dat ze verwachten.

Versie 3 verving twee werkelijk onveilige endpoints

Dat verdient het om gewoon gezegd te worden.

Versie 2.x leverde losstaande ajax/*.php bestanden mee die de PrestaShop-kern met de hand opstartten en beveiligd waren met een hardgecodeerd token — dezelfde waarde in elke installatie ter wereld. Wie de module één keer had gelezen, kende het token van elke winkel die hem gebruikte.

Versie 3 vervangt ze door een echte PrestaShop-frontcontroller, beschermd met een winkelspecifiek token dat wordt vergeleken met hash_equals(). De controller valideert het product-ID en levert alleen producten die actief zijn, zichtbaar in de catalogus zijn en bij de huidige winkel horen. Al het andere krijgt een 404 of een 403.

Wat versie 3 verder oploste

Versie 2.x laadde jquery-1.11.0.min.js vanaf een pad dat in PrestaShop 1.7 en later niet meer bestaat, waardoor de popup in veel winkels stilzwijgend kapotging. Daarnaast leverde ze zestien jQuery-bestanden per versie mee, elk met een eigen SHA-1-implementatie van 130 regels. Dat is allemaal verdwenen: de front-end bestaat nu uit één afhankelijkheidsvrij vanilla JavaScript-bestand.

Ook de oude truc met de web_url-cookie is weg — de configuratie bereikt het JavaScript-bestand nu via Media::addJsDef.

Zoekmachinevriendelijke URL's doen er niet meer toe. Het product wordt geïdentificeerd via het data-id-product attribuut van de tegel zelf, met een URL als terugvaloptie, in plaats van door herschreven adressen te ontleden.

Afbeeldingsformaten worden gedetecteerd, niet hardgecodeerd. De popup kiest passende formaten uit uw Ontwerp → Afbeeldingsinstellingen in plaats van namen aan te nemen die per PrestaShop-versie verschillen, zodat ook eigen thema's met hernoemde afbeeldingstypen blijven werken.

Versie 3.0.2 liet het werken op Hummingbird

Dit verdient het genoemd te worden, omdat de fout onzichtbaar was in plaats van luidruchtig. Hummingbird rendert de miniatuurlink als .product-miniature__image-link, waar Classic .product-thumbnail / a.thumbnail gebruikt. Die class stond niet in de triggerselector, dus op Hummingbird opende er helemaal niets — en de Quick view-knop van het thema bleef zichtbaar, omdat ook geen van zijn classnamen op de verbergregels paste. Beide worden nu naast de Classic-markup herkend, en de CSS en JavaScript in de front-end krijgen de moduleversie mee tegen caching, zodat de correctie ook terugkerende bezoekers bereikt zonder dat iemand een cache hoeft te legen.

De configuratiepagina controleert zichzelf

Elke keer dat u hem opent, voert de module vier controles uit — Module enabled (module ingeschakeld), Front office hook (hook in de front-end), Product image formats (afbeeldingsformaten van producten) en Secure requests (beveiligde aanvragen) — en toont u van elke controle het resultaat. Als de voorbeeldweergave niet verschijnt, vertelt dat paneel u meestal waarom, voordat u begint te gokken. Restanten van versies vóór 3.0.0 worden bovendien automatisch opgeruimd.

Compatibiliteit

PrestaShop 1.7 tot en met 9, in acht talen: Nederlands, Duits, Engels, Frans, Italiaans, Pools, Spaans en Turks.

Geen overrides, geen wijziging aan de kern of aan het thema, en geen jQuery. Bijwerken vanaf 2.x gaat automatisch: uw instellingen blijven behouden, nieuwe opties krijgen verstandige standaardwaarden en de overbodige bestanden worden voor u verwijderd.

Veelgestelde vragen

Opent een gewone klik nog steeds de productpagina?

Ja. In de klikmodus opent alleen de kleine vergrootglasknop de voorbeeldweergave — een klik op de foto zelf gedraagt zich precies zoals altijd. In de hovermodus wordt er helemaal geen klik onderschept.

Komt de prijs in de popup overeen met wat de klant werkelijk betaalt?

Ja. Hij wordt op de server berekend met hun valuta, de belastingregels die voor hen gelden en hun klantengroep. In catalogusmodus, of bij een groep die geen prijzen mag zien, wordt het prijsblok helemaal niet getoond.

Werkt het nog als ik een categorie filter met facetzoeken?

Ja. De events zijn gedelegeerd, dus tegels die door facetzoeken of oneindig scrollen opnieuw worden weergegeven, blijven werken zonder herinitialisatie.

Mijn thema heeft al een Quick view-knop — krijg ik dan twee popups?

Niet als u de optie Quick view-knop van het thema verbergen ingeschakeld laat. Die dekt zowel de Classic- als de Hummingbird-markup en verwijdert het omliggende hoverpaneel alleen wanneer de Quick view het enige element erin was, zodat kleurstalen niet verloren gaan.

Werkt het op telefoons?

Het schakelt zichzelf bewust uit onder een door u ingestelde schermbreedte — standaard 432 px — omdat hover op aanraakschermen niet bestaat. Uw mobiele bezoekers houden het normale gedrag.

Mijn afgeprijsde product toont geen "On sale"-label — waarom niet?

Omdat een korting en de markering aanbieding twee verschillende dingen zijn. Het label volgt het selectievakje Toon de "Aanbieding!"-vlag op het tabblad Prijzen van het product, niet de specifieke prijzen. Vink dat vakje aan en het label verschijnt. Het label New (nieuw) gaat automatisch en volgt de instelling "aantal dagen dat een product als nieuw wordt beschouwd" van uw winkel.

Vertraagt het mijn productpagina's?

De HTML van de popup wordt pas opgehaald wanneer een bezoeker daadwerkelijk een voorbeeldweergave opent, en het antwoord wordt een minuut lang privé gecachet. De pagina zelf laadt één klein stylesheet en één klein vanilla JavaScript-bestand — en op de afrekenpagina helemaal niets.

Ik stap over van 2.x — moet ik iets doen?

Nee. De upgrade behoudt uw bestaande instellingen, geeft de nieuwe opties verstandige standaardwaarden en verwijdert zelf de oude losstaande AJAX-bestanden en de assets per versie.

Wijzigt het mijn thema of overschrijft het kernbestanden?

Nee. Eén weergavehook en één frontcontroller, verder niets.