Homepage Cases 123zakelijk – Van Luma naar Hyvä voor één front-end standaard
Persoon aan het printen

Kantoorbenodigdheden

Eén standaard voor meerdere webshops

Binnen 123inkt draaien meerdere webshops naast elkaar, elk met een eigen merk en doelgroep, maar met veel gedeelde functionaliteiten. Wij werken daarbij vanuit één uitgangspunt: een module of functie die we voor de ene webshop bouwen, moet zonder omwegen bruikbaar zijn op de andere. Dat scheelt ontwikkeltijd en houdt de platformen consistent.

123zakelijk was de enige webshop binnen de groep die niet op Hyvä draaide. Elke ontwikkeling die de front-end raakte, moest daardoor twee keer worden gebouwd: één keer voor Luma en één keer voor Hyvä. Dubbel bouwen betekent dubbel testen, dubbel onderhouden en twee keer zoveel kans op verschillen tussen de webshops. Het opnieuw opbouwen van de front-end op Hyvä haalt die tweedeling weg.

Van Luma naar Hyvä, inclusief checkout

De B2B front-end van 123zakelijk is opnieuw opgebouwd op basis van Hyvä, waarbij de bestaande B2B-logica in de basis van het platform intact bleef. Klantspecifieke prijzen, accountstructuren en bestelprocessen blijven werken zoals de klanten van 123zakelijk gewend zijn, maar dan op een lichtere en beter onderhoudbare front-end.

Ook de checkout is meegenomen in de overstap. Met Hyvä Checkout draait het meest kritieke deel van de webshop op dezelfde technische basis als de rest van de front-end, in plaats van op een losstaande Luma implementatie. Daarmee verviel het laatste onderdeel dat nog apart onderhouden moest worden.

Sneller doorontwikkelen, merkbaar voor de eindklant

Voor de organisatie betekent de overstap dat nieuwe functionaliteit nog maar één keer ontwikkeld hoeft te worden. Wat we bouwen voor de ene webshop binnen de groep, rollen we uit naar de andere. Dat verkort de doorlooptijd van nieuwe features en houdt de kosten van doorontwikkeling voorspelbaar naarmate het aantal webshops groeit.

Voor de zakelijke klanten van 123zakelijk zit de winst in de dagelijkse praktijk. Hyvä levert een aanzienlijk lichtere front-end op, wat zich vertaalt naar snellere laadtijden en een soepelere weg van zoekopdracht naar bestelling. Zeker bij herhaalaankopen en grotere orders telt elke seconde die uit het bestelproces verdwijnt.

Mock-up desktop
Mock-up laptop
Mock-up mobiel

Veelgestelde vragen over dit project

Dit deden we in vijf stappen. We brachten eerst in kaart welke extensies en welk maatwerk in de front-end zaten. Per extensie bepaalden we of er een Hyvä-versie beschikbaar was of dat we die moesten aanpassen. Daarna bouwden we de front-end opnieuw op in Hyvä, testten we alles op een staging omgeving en zetten we de nieuwe front-end live, inclusief de checkout.

Nee. Hyvä vervangt alleen de front-end, dus wat de klant ziet. De Magento back-end met producten, klanten, orders en koppelingen bleef staan. Bij 123zakelijk bleven de B2B-logica en de koppelingen volledig intact.

Extensies die iets in de front-end tonen, waren gebouwd voor Luma. Voor een deel bestond een Hyvä compatibele versie of een compatibiliteitsmodule, de rest hebben we aangepast of vervangen. Daarom begon het project met een inventarisatie van alle extensies in de webshop.

Dat is opnieuw gebouwd. Luma werkt met RequireJS en KnockoutJS, Hyvä met Alpine.js en Tailwind CSS, dus templates en JavaScript hebben we omgeschreven. Het maatwerk in de back-end, zoals de prijslogica en de koppelingen, bleef ongewijzigd draaien.

Een Luma-checkout naast een Hyvä front-end betekent dat je twee technieken onderhoudt, precies wat we met dit project wilden wegnemen. We hebben Hyvä Checkout daarom direct meegenomen en vooraf gecontroleerd of alle betaal- en verzendmethoden van 123zakelijk erdoor worden ondersteund.

Ja, de B2B-logica zit in de back-end en is niet aangeraakt. De front-end moest die logica wel goed tonen: klantspecifieke prijzen, accountstructuren, bestellijsten en goedkeuringsflows. Die hebben we per klanttype getest, zodat de bestelprocessen werken zoals de klanten van 123zakelijk gewend waren.

Omdat de back-end bleef staan, veranderden de URL’s niet en waren redirects niet nodig. Meta-informatie, gestructureerde data, koppenstructuur en interne links zijn meegenomen in de nieuwe templates. De lichtere front-end van Hyvä werkt bovendien door in de Core Web Vitals.

De datalayer voor Google Tag Manager en de e-commerce-events zoals add to cart en purchase hingen aan de Luma-front-end. Die hebben we opnieuw opgebouwd in Hyvä en voor livegang gecontroleerd, zodat er geen gaten vielen in de data in Google Analytics en de advertentieplatformen.

Op een staging omgeving, met een vaste testlijst: de checkout per betaal- en verzendmethode, de B2B-flows per klanttype, de koppelingen, tracking, zoeken en filteren, mobiel gebruik en alle content- en CMS-pagina’s.

Omdat Magento het thema per storeview instelt, konden we gecontroleerd live. Het Luma-thema bleef in die periode beschikbaar, waardoor terugschakelen mogelijk was als er iets mis zou gaan. Dat hield het risico van de livegang klein.