Hoe wij een op maat gemaakte lensconfigurator bouwden in Magento 2
Een bril op sterkte kopen is niet hetzelfde als een paar sneakers in je winkelmandje leggen. De klant moet een montuur kiezen dat bij zijn gezicht past, het juiste glastype selecteren, de exacte oogsterkte per oog invoeren en vervolgens beslissen over coatings en filters. Het is een persoonlijk, optisch en technisch proces, en dat moet foutloos verlopen in een webshop. Standaard Magento biedt daar geen oplossing voor. Toch verwacht de moderne consument precies díe ervaring online.
Voor Wink & See, een Nederlandse online opticien die brillen op sterkte aanbiedt vanaf €29,95, ontwikkelde Younify een volledig op maat gemaakte lensconfigurator als Magento 2-module. In dit artikel laten we zien hoe we dat hebben aangepakt, en welke technische en UX-keuzes daarbij kwamen kijken.
Wink & See verkoopt brillen op sterkte, zonnebrillen, leesbrillen en multifocale brillen, volledig online, zonder fysieke winkel. Klanten configureren hun bril zelf: van montuur tot glastype, van dioptrie tot blauwlichtfilter. Het bestelproces is daarmee fundamenteel anders dan dat van een standaard e-commerce product.
De kern van het probleem? In Magento 2 bestaan configurable products en bundled products, maar geen van beide dekt de complexiteit van een bril op sterkte. Denk aan de volgende uitdagingen:
In de standaard Magento-productflow is hier simpelweg geen voorziening voor. Custom options komen niet in de buurt van de benodigde logica, en een third-party configurator voor optiek was niet beschikbaar op het niveau dat Wink & See nodig had.
Younify ontwikkelde de lensconfigurator als een op maat gemaakte Magento 2-module, volledig geïntegreerd in de bestaande webshop van Wink & See. De configurator leidt de klant door het volledige keuzeproces in duidelijke, overzichtelijke stappen.
De klant kiest eerst een montuur. Dit is het vertrekpunt van de configuratie en bepaalt welke glasopties beschikbaar zijn. Het montuur is een regulier Magento-product met afbeeldingen, maten en een virtuele pasproperty, zodat klanten het montuur direct online op hun gezicht kunnen passen via de ingebouwde try-on van Wink & See.
In de tweede stap kiest de klant het type glas: enkelvoudig, multifocaal, leesbril, zonneglas, meekleurend of zonder sterkte. Elke optie heeft een eigen toeslag die direct zichtbaar is. De stap is bewust beperkt tot een helder overzicht: de klant ziet per optie wat het is, wat het kost en voor wie het geschikt is.
Hier wordt het persoonlijk. De klant voert per oog de waarden in die op het brilrecept staan: sfeer (SPH), cilinder (CYL), as (AXIS) en bij multifocale glazen de additie (ADD). De module valideert elke invoer op basis van optisch verantwoorde bereiken. Foutieve combinaties worden direct afgevangen met duidelijke meldingen. Klanten kunnen hun receptwaarden ook opslaan in hun account, zodat een volgende bestelling nog sneller verloopt.
De klant kan vervolgens extra opties toevoegen: anti-reflectiecoating, blauwlichtfilter, krasbestendige coating of een upgrade naar dunnere glazen. Elke optie wordt helder uitgelegd en de prijsimpact is direct zichtbaar in de running total.
Voor klanten die prismacorrectie of een specifieke pupilafstand (PD) nodig hebben, is er een optionele vijfde stap. Deze stap is alleen zichtbaar wanneer relevant, om het proces voor de meerderheid van de klanten zo eenvoudig mogelijk te houden.
Gedurende het volledige configuratieproces ziet de klant een live prijsoverzicht. Elke keuze — glastype, coating, sterkte-optie, wordt direct verrekend. Geen verborgen kosten, geen verrassingen bij de checkout. Transparantie is een kernwaarde van Wink & See, en de configurator weerspiegelt dat.
Een van de belangrijkste eisen was dat het Wink & See-team zelfstandig wijzigingen kan doorvoeren. Alle stap-opties, prijzen, beschrijvingen en beschikbare combinaties zijn configureerbaar vanuit de Magento-admin. Nieuwe glastypen toevoegen, een coating tijdelijk uitschakelen of de prijs van het blauwlichtfilter aanpassen? Dat kan het team zelf, zonder tussenkomst van een ontwikkelaar.
Klanten die hun brilrecept invoeren, kunnen deze gegevens opslaan in hun Wink & See-account. Bij een volgende bestelling, bijvoorbeeld een zonnebril op sterkte of een reservebril, worden de receptwaarden automatisch ingeladen. Dit verlaagt de drempel aanzienlijk en verkort de bestelflow.
De webshop van Wink & See draait op het Hyvä-thema, bekend om zijn performance en lichtgewicht frontend. De configurator is naadloos geïntegreerd in de Hyvä-frontend, met gebruik van Alpine.js voor interactieve elementen. Het resultaat: een snelle, soepele configuratie-ervaring zonder de zware JavaScript-overhead die bij Luma of PWA Studio komt kijken.
Optische waarden zijn niet willekeurig. SPH-waarden lopen doorgaans van −20.00 tot +20.00 in stappen van 0.25, CYL van −6.00 tot 0.00, en AXIS van 0 tot 180. De module valideert elke invoer in real-time en voorkomt dat klanten onmogelijke combinaties bestellen. Als er geen CYL is ingevoerd, wordt AXIS automatisch uitgeschakeld, precies zoals een opticien het zou doen.
Een brillenconfigurator bouwen in Magento 2 is geen kwestie van een extensie installeren. Het vereist een diep begrip van zowel het e-commerce platform als het productdomein, in dit geval de optiek. Door de lensconfigurator als een op maat gemaakte module te ontwikkelen, volledig beheerbaar vanuit de admin en naadloos geïntegreerd in de Hyvä-frontend, heeft Younify voor Wink & See een oplossing neergezet die de klant centraal stelt.
Het resultaat is een webshop waar klanten met vertrouwen hun bril op sterkte samenstellen, alsof ze bij de opticien zitten, maar dan vanuit hun eigen woonkamer.
Klaar om dit ook voor jouw webshop te realiseren?
Werk samen met onze Magento specialisten en ontdek wat er mogelijk is.
Magento en Hyvä specialisten met focus op performance en groei. Van development en support tot implementatie, wij kennen het Magento platform door en door en weten wat nodig is om te schalen.
Betrokken bij jouw webshop, van start tot doorontwikkeling. We werken nauw samen, denken proactief mee en blijven continu optimaliseren voor het beste resultaat.
Eén partner voor jouw complete e-commerce oplossing. Dankzij sterke samenwerkingen en brede expertise leveren we maatwerk oplossingen inclusief integraties, support en optimalisatie.
Webshops die meegroeiеn met jouw ambities. Wij bouwen schaalbare Magento en Hyvä oplossingen die klaar zijn voor groei, uitbreiding en doorontwikkeling.