Bestrating.nl
Van Luma naar Hyvä: een complete relaunch met m²-calculator en transport op afstand
Sinds 2022 de vaste technische partner. In oktober 2026 live met een volledig nieuwe Hyvä-webshop op Magento 2.4.9: 30+ nieuwe modules, Hyvä Checkout en Core Web Vitals die op dag één groen zijn.
De uitdaging
Bestrating.nl uit Assen begon in 2000 als hobby van de gebroeders Meijeringh. Inmiddels is het een groot bedrijf met ruim 9.000 producten, een showtuin van 5.000 m², een eigen bezorgdienst en klanten door heel Nederland, van particulieren tot hoveniers en gemeenten. De Magento-webshop is in 2020 door een ander bureau op Luma gebouwd. Toen wij hem in 2022 overnamen, liep hij tegen de grenzen van die frontend aan. Bestrating verkopen is ook geen gewone e-commerce: je verkoopt per m² maar levert per pak, het transport hangt af van afstand en gewicht, en elke order moet foutloos in het ERP terechtkomen.
- Een gedateerde Luma-frontend: zware JavaScript en lastig uit te breiden
- Klanten denken in m², het magazijn levert per pak of pallet, met snijverlies en aangebroken pakken
- Transportkosten voor zware materialen hangen af van afstand en kraan, niet van één vast tarief
- De bestaande SmartStone-ERP-koppeling moest in de nieuwe shop gewoon blijven werken
- Marketing wil nieuwe landingspagina's kunnen bouwen zonder een developer in te schakelen
Onze oplossing
Na drie jaar doorontwikkeling op de bestaande shop hebben we de webshop opnieuw opgebouwd op Hyvä, met Hyvä Checkout en Magento 2.4.9, en alle businesslogica herzien. De relaunch ging begin oktober 2026 live na maanden van release- en feedbackrondes met het team van Bestrating. Het resultaat: een shop die op mobiel ruim binnen de Core Web Vitals blijft, en waarin rekenwerk, transport en het ERP gewoon kloppen.
- Nieuwe Hyvä-frontend (Tailwind + Alpine.js) met 127 eigen templates
- Hyvä Checkout met Postcode.nl-adrescheck, Mollie, in3, Klarna en de keuze voor een kooiaap
- Transportkosten berekend op afstand vanaf Assen, over ruim 4.700 postcodegebieden, zonder externe API
- m²-calculator met snijverlies, pakinhoud en een toeslag voor aangebroken pakken, gevuld vanuit het ERP
- De bestaande SmartStone-ERP-koppeling meegenomen en aangesloten op de nieuwe transport- en verpakkingslogica
- Een bibliotheek van ongeveer 40 eigen widgets waarmee het team zelf landingspagina's bouwt
De nieuwe homepage van Bestrating.nl op Hyvä, live sinds oktober 2026
Van Luma naar Hyvä
Links de oude Luma-shop, rechts de nieuwe Hyvä-shop. Het assortiment en de merkkleuren zijn hetzelfde gebleven, de rest is opnieuw gebouwd: navigatie, zoeken, productpagina, winkelwagen, checkout en alle contentpagina's.
Een rondleiding door de webshop
Alles hieronder is maatwerk dat we bovenop Magento en Hyvä hebben gebouwd of voor Hyvä opnieuw hebben opgebouwd. De screenshots zijn gemaakt op de live shop, een dag na de livegang.
Een megamenu voor 9.000+ producten
Bestrating.nl heeft veel categorieën en nog meer subcategorieën: tuintegels per formaat, per materiaal en per kleur, en daarnaast sierbestrating, grind, verlichting en buitenverblijven. Het megamenu toont dat in twee lagen. "Producten" opent het menu en is zelf geen link, zodat klanten niet per ongeluk op een overzichtspagina belanden. Op mobiel komt het menu pas in de DOM als je het opent, waardoor elke pagina kleinere HTML heeft.
- Twee lagen: hoofdcategorie links, subcategorieën en kleuren rechts
- Het mobiele menu wordt pas geladen bij openen
- Wordt beheerd vanuit de Magento-categoriestructuur
Filteren op meerdere waarden tegelijk, zonder crawl-chaos
Op de categoriepagina's, met tot 2.176 tuintegels per categorie, filter je op meerdere waarden tegelijk (multi-select). We hebben Aheadworks Layered Navigation daarvoor uitgebreid. Prijs sorteren is gesplitst in "laag-hoog" en "hoog-laag", en alle filterlinks staan op nofollow, zodat Google zijn crawlbudget niet verspilt aan duizenden filtercombinaties. De introtekst staat standaard ingeklapt: goed voor SEO en geen layout shift.
- Multi-select-filters op Aheadworks Layered Navigation
- Nofollow op filterlinks tegen index bloat
- Ingeklapte categorietekst: SEO-content zonder CLS
Kleurvarianten, levertijd en 72-uurslevering in één oogopslag
Een tegel bestaat vaak in 9 tot 12 kleuren, die in Magento losse producten zijn. Via de serie-koppeling uit het ERP tonen we alle kleuren als klikbare swatches, zonder dat het een configurable product hoeft te zijn. Daaronder staan de verwachte levertijd, een link naar de transportkosten voor jouw regio en de 72-uurslevering: een eigen verzendmethode voor producten die direct op voorraad liggen.
- Kleurvarianten via de serie-koppeling uit het ERP
- Eigen 72-uursleveringsmethode met een toeslag voor Zeeland
- Per categorie een knop onder de foto, bijvoorbeeld voor een lichtplan of keuzehulp
De m²-calculator: de klant denkt in vierkante meters, het magazijn in pakken
Een klant weet hoeveel m² terras hij wil leggen, niet hoeveel pakken of stuks daarbij horen. De calculator bestond al in de Luma-shop. Voor Hyvä hebben we hem opnieuw gebouwd in Alpine.js en uitgebreid. In de calculator vul je m² of stuks in en de ander rekent live mee. Met één vinkje tel je 5% snijverlies op, en onder "Verpakkingsinfo" zie je hoeveel pakken, lagen en stuks dat oplevert. Bestel je een aangebroken pak, dan rekent de PackageSurcharge-module automatisch een toeslag, die netjes in de offerte, factuur en creditnota terugkomt. Pakinhoud, minimale afname en toeslagartikelen komen rechtstreeks uit het ERP, dus niemand hoeft ze handmatig bij te houden.
- m² ↔ stuks live gekoppeld, met optioneel 5% snijverlies
- Pakken, lagen en stuks per bestelling inzichtelijk
- Toeslag voor een aangebroken pak, met eigen totalen tot in de creditnota
- Pakinhoud, minimale afname en statiegeld komen uit SmartStone
"Maak het compleet": een winkelwagenpopup met slimme upsells
Wie tegels in de winkelwagen legt, heeft bijna altijd ook opsluitbanden, straatzand en voegmiddel nodig. De AJAX-winkelwagenpopup toont na het toevoegen direct die aanvullende producten, per attributenset geconfigureerd, zodat je ze met één klik toevoegt. Dezelfde popup werkt ook voor de offerte, voor klanten die eerst een prijsopgave willen.
- Toevoegen aan winkelwagen of offerte zonder pagina-reload
- Upsells per attributenset (tegels → zand, banden, voegmiddel)
- Hogere orderwaarde zonder extra stap in de flow
Winkelwagen delen en een staffelkorting die live meerekent
In de winkelwagen pas je m² en stuks aan met dezelfde calculator als op de productpagina. Met "Winkelwagen delen" maak je een link waarmee iemand anders, zoals je partner, je hovenier of de klantenservice, precies dezelfde winkelwagen opent. Producten met een staffelprijs tonen een tabel met een "Kies 12 stuks"-knop, en het totaal rekent de korting direct mee. Verzendkosten staan op "Berekenen" totdat de postcode bekend is: geen verrassingen, maar ook geen nep-tarief.
- Winkelwagen delen via een tokenlink, met automatische opschoning per cron
- Staffelkorting (volume discount) live in het totaal
- Kortingscode en verzendkosten-check in de samenvatting
Afrekenen op één pagina, met transport op afstand en een kooiaap
De checkout draait op Hyvä Checkout: één pagina met contactgegevens, adres, verzendmethode en betaling naast elkaar. De straat en woonplaats worden automatisch ingevuld via Postcode.nl. De transportkosten voor "Groot transport" berekenen we op de afstand tussen de postcode van de klant en het magazijn in Assen. Daarvoor staan ruim 4.700 Nederlandse PC4-gebieden met coördinaten in de database, en een haversine-berekening bepaalt de zone, zonder één externe API-call. Zeeuws-Vlaanderen heeft een eigen tarief. Kies je voor een kooiaap (een meeneemheftruck die de pallets in je tuin zet), dan vervallen de transportkosten.
- Transportzones op hemelsbrede afstand vanaf Assen (tot 15 km, tot 35 km, verder)
- Gratis transport binnen zone 1 vanaf €1.250
- Kooiaap als extra optie: transport gaat naar €0
- Postcode.nl-autocomplete, Mollie, iDEAL in3, Klarna, Google Pay en afhalen in Assen
- Een strikte CSP met nonces, zonder dat marketing-scripts breken
Gebouwd voor de duim
Een groot deel van de bezoekers komt binnen op mobiel, vaak terwijl ze in de tuin staan. Daarom heeft de productpagina op mobiel een sticky balk met de prijs en de knop "Kies aantal m²", zitten de filters achter één knop onderin het scherm, en zijn de calculator en de winkelwagen-knop met één hand te bedienen.
Marketing bouwt zelf pagina's, zonder developer
We bouwden een bibliotheek van ongeveer 40 widgets: hero, kaarten, tegels, stappen, checklist, statistieken, FAQ met FAQPage-schema, reviews, team en formulieren. Daarmee stelt het team van Bestrating zelf landingspagina's samen in de Magento-admin. De showtuinpagina, de zakelijke pagina en de buitenverblijven-pagina zijn er allemaal mee gebouwd.
Showtuin
Tien widgets, van een hero met "Plan je bezoek" en een galerij tot de locatie, reviews en een CTA. De pagina wordt via een data patch aangemaakt, dus hij is reproduceerbaar op elke omgeving.
Zakelijk
Een B2B-landingspagina voor hoveniers, stratenmakers en aannemers, met een aanvraag voor een zakelijk account en een offerte-CTA.
Buitenverblijven
Een tussenpagina met een 3D-configurator van Trendhout, ingebed in de shop met een "terug naar de shop"-balk.
De SmartStone-koppeling: meegenomen, niet opnieuw uitgevonden
De koppeling met het SmartStone-ERP van Bestrating bestond al voordat wij het project overnamen, en ze werkt. Bij een relaunch ga je zoiets niet opnieuw bouwen. We hebben de koppeling met de nieuwe shop meegenomen en aangesloten waar de nieuwe functionaliteit dat nodig had. Zo komen de nieuwe transportzones en de kooiaap als artikelregels mee in de order, en voeden de pakinhoud, de minimale afname en de toeslagartikelen uit het ERP de m²-calculator. Zo lopen de gegevens:
Orders & betalingen
Orders en betalingen gaan via de Magento message queue naar het ERP. De nieuwe transportzones en de kooiaap gaan mee als ERP-artikelregels.
Klanten & adressen
Nieuwe klanten en adressen worden als relaties aangemaakt in SmartStone. Het relatienummer komt terug in Magento.
Artikelen & prijzen
De artikelimport maakt producten aan en werkt ze bij: prijs, pakinhoud, minimale afname, toeslag- en statiegeldartikelen en de serie. Die gegevens voeden de m²-calculator en de toeslag voor een aangebroken pak.
Zendingen
Zodra het ERP een order uitlevert, maakt Magento automatisch de zending aan.
Core Web Vitals op dag één na de livegang
Lighthouse-scores zeggen weinig. Wat telt is hoe snel de shop is voor echte bezoekers op hun eigen telefoon en verbinding. We meten dat met RUMvision (Real User Monitoring). De cijfers hieronder zijn van 8 oktober 2026, de eerste volle dag na de livegang, voor mobiele bezoekers op het 75e percentiel. Dat is dezelfde maatstaf die Google gebruikt.
Hoe we daar kwamen
WebP + srcset overal
Een eigen ImageOptimizer-module herschrijft alle lokale afbeeldingen in widgets, CMS-pagina's en banners naar WebP met srcset en sizes. Productfoto's worden ook als WebP geserveerd.
LCP-preload
De LCP-afbeelding wordt in de head gepreload, en hero-video's laden pas na de page load, met de poster als LCP-element.
HTML gehalveerd
Een HTML-minifier en het lui laden van het mobiele menu brachten de HTML van een categoriepagina van 1,27 MB naar 0,6 MB.
Third parties uitgesteld
Reloadify laadt pas bij de eerste interactie (het was synchroon en ~0,8 s), Trengo-chat (~380 KB) bij interactie of na 6 s, en GTM na de load.
Kiyoh lokaal
De Kiyoh-widget wordt per cron gespiegeld naar het eigen domein. Dat scheelt ~155 KB third-party CSS, fonts en JS en het flikkeren bij het inladen.
Nul layout shift
Vaste afmetingen voor het logo en de thumbnails, een ingeklapte categorie-intro en een woff2-font: CLS 0,000.
Van overname tot relaunch
- 2020
Start op Luma
Een ander bureau bouwt de eerste Magento 2-webshop op het Luma-thema.
- Mei 2022
Coding.nl neemt over
We zetten Bitbucket Pipelines en een deploy-pipeline naar Hypernode op en worden de vaste technische partner.
- 2022–2025
Doorontwikkeling
Leveranciersimports (Adezz, Trendhout), lazy loading, canonical-beheer, offertes, de 72-uurslevering, Mollie en Magento-upgrades.
- Dec 2025
Start Hyvä-traject
De branch feature/hyva: een nieuwe theme, opgebouwd op Hyvä Default met Tailwind en Alpine.js.
- Jun–sep 2026
Releases & feedback
Ruim 130 commits aan widgets, checkout, transport, ERP en snelheid, en de upgrade naar Magento 2.4.9.
- Okt 2026
Livegang
Contentmigratie, media-sync en livegang-patches. Dag 1: UX-score 98% op mobiel.
Technische highlights
Magento 2.4.9 + Hyvä
Hyvä Default-child-theme met 127 eigen templates, op PHP 8.3
Hyvä Checkout
Checkout op één pagina met Mollie, Postcode.nl en een strikte CSP
SmartStone-ERP
Bestaande koppeling meegenomen en aangesloten op de nieuwe logica
DistanceShipping
Transportzones op afstand, over ~4.700 PC4-coördinaten
PackageCalculator
m²-calculator opnieuw gebouwd in Alpine.js voor Hyvä
PackageSurcharge
Toeslag voor een aangebroken pak, met eigen totalen
Widget-bibliotheek
Ongeveer 40 widgets voor landingspagina's, met FAQ-schema
ImageOptimizer
WebP, srcset, LCP-preload, lazy video en HTML-minificatie
Offertemodule
Amasty Request a Quote, uitgebreid: de offerte blijft geldig tot de betaling
Ga4Hyva
GA4-tracking 1:1 gelijk aan de oude Luma-site
StyleSmuggler-hardening
Beveiliging tegen een recente Magento-exploit-chain
Hypernode + CI/CD
Bitbucket Pipelines naar staging/productie, met 14 Puppeteer-testsuites
Volgende case
Certe Groep →Klaar voor jouw succesverhaal?
Laten we bespreken hoe we jouw project kunnen realiseren.
Start een gesprek