Doorbouwen werd duurder dan opnieuw beginnen.

RoPa Workwear levert werkkleding aan bedrijven. Zeven eigen WooCommerce-plugins werden één B2B webshop, met het kledingbeheer per medewerker in de kern.

Bekijk de live webshopPlan een kennismaking
Klant
RoPa Workwear
Sector
Werkkleding voor bedrijven
Geleverd
B2B webshop, kledingbeheer en medewerkersportaal
Catalogus
Circa 4.400 producten uit een feed

Wat het opleverde

Een shop die rustig laadt en een assortiment dat zoekmachines en AI-assistenten eindelijk kunnen lezen. En een systeem dat niet aan ons vastzit.

  • Een pagina die niet meer wegspringt

    De eerste versie reserveerde geen ruimte voor de beelden, dus de pagina sprong tijdens het laden onder je vinger weg. Nu staat alles meteen op zijn plek en is de grootste afbeelding er in 2,5 seconden in plaats van 5,9.

    0

    layoutsprong (CLS) nu, in onze eerste versie was dat 0,88

  • Het assortiment is leesbaar

    Een zoekmachine of AI-assistent kan alleen aanraden wat hij kan lezen. Elke categoriepagina zet nu de eerste 24 producten als gewone link in de HTML, en een script slaat alarm als dat ooit terugvalt.

    24

    producten per lijstpagina direct in de HTML, waar het er eerst 0 waren

  • Niet vast aan één bureau

    Het architectuurdocument legt vast wat er is gebouwd, wat er is afgewezen en waarom. Iemand anders kan het systeem overnemen zonder dat wij ernaast hoeven te zitten.

    1.027

    regels architectuurdocument bij de oplevering

Lighthouse en Core Web Vitals mobiel op de nieuwe shop, 28 mei 2026, tijdens onze eigen performance-sprint. Van de oude WooCommerce-shop bestaat geen meting, dus we zetten er ook geen naast. De productlinks in de HTML staan live sinds 18 augustus 2026. Wat dat in Google oplevert, weten we pas als er genoeg maanden overheen zijn.

De vraag

Zeven plugins die elkaar in de weg zaten.

Wat RoPa nodig had, bestond niet kant en klaar. Dus was het er in de loop van de jaren omheen gebouwd, plugin voor plugin, tot er zeven waren.

Elke wijziging raakte er drie. De importer wist dingen die het portaal ook wist, de branding-plugin hing aan de filters en wie een categorie wilde aanpassen, moest op vier plekken kijken. Elk stuk was ooit gemaakt omdat er iets moest. Opgeteld werd doorbouwen duurder dan opnieuw beginnen.

Wat er niet kant en klaar was, is precies wat een zakelijke klant nodig heeft. Kledingbudget per medewerker, maten die vastliggen per persoon, een aanvraag die langs de manager gaat en een logo dat op de rug anders is dan op de borst. Dat zijn geen instellingen in een webshop. Dat is een systeem.

  • Was: Zeven eigen WooCommerce-plugins

    Eén systeem op Next.js en Supabase

  • Was: Vier plekken kijken bij elke wijziging

    Eén plek

  • Was: B2B eromheen gebouwd

    B2B in de kern

Productimport, filters, branding, klantportaal, totaalpakketten, chatbot en AI-content. Zeven stukken die elk hun werk deden, maar samen door niemand meer in één keer te overzien waren. Nu is het één shop, en een wijziging raakt alleen wat hij moet raken.

De aanpak

Opnieuw gebouwd, en eerlijk nagemeten.

Alles opnieuw op Next.js en Supabase, met de zakelijke klant als uitgangspunt. Twee van de drie stappen hieronder gaan over fouten in ons eigen werk. Die laten we zien, met de meting erbij.

01 De catalogus

4.400 producten die kloppen

De catalogus komt uit de leveranciersfeed en wordt elke nacht bijgewerkt. Maar een feed levert data, geen winkel. Er zaten 138 capuchontruien bij de sweaters terwijl de hoodie-categorie op 26 bleef steken, en de restbak accessoires telde 644 producten. Dat los je niet op met een filter. Dat is indelen.

  • Eigen indeling bovenop de feedSignalisatiekleding van 0 naar 364 producten, ondergoed van 0 naar 103
  • 444 producten hernoemdZe heetten allemaal “Jobman Jobman - 9291 Belt”, omdat de feed de merknaam dubbel plakte
  • 15.989 afbeeldingenOmgezet naar WebP en op eigen opslag gezet

02 Snelheid

Een nieuwe shop is nog geen snelle shop

De eerste versie laadde de lettertypes te zwaar, hield de chatwidget en de vergelijkbalk in de hoofdbundel en reserveerde geen ruimte voor de beelden. Dat laatste gaf een CLS van 0,878. Een dag meten en bijsturen loste dat op.

  • Widgets apart geladenChat en vergelijkbalk zitten niet meer in de hoofdbundel
  • Twee lettertypes eruitMinder te laden voordat je iets ziet
  • Beeldruimte vooraf vastgelegdCLS van 0,878 naar 0,000, LCP van 5,9 naar 2,5 seconden

Lighthouse mobiel, homepage, 28 mei 2026

  1. Voor de sprint53
  2. Na de sprint, koude cache78
  3. Na de sprint, warme cache98

De productpagina ging van 51 naar 74. Die moet meer doen dan de homepage, daar ligt nog werk.

03 Gevonden worden

De fout die we in ons eigen werk vonden

De productlijst zat achter een Suspense-grens met een lege fallback. De pagina stuurde 936 KB aan productdata mee, maar geen enkele link. Google kwam er uiteindelijk bij. De crawlers van ChatGPT, Claude en Perplexity lezen geen JavaScript en zagen het assortiment nooit. In Search Console stonden de merkpagina’s op een mediaan positie van 34,8, met 9.856 vertoningen en 0 klikken.

  • 24 producten serversideZichtbaar in de HTML, niet alleen in de data
  • Paginatie als gewone linkTe volgen door een crawler, ook zonder JavaScript
  • Een script dat alarm slaatZodra een lijstpagina onder de 20 productlinks zakt
Techniek
Next.js, React, TypeScript, Supabase, Mollie, Resend, OpenAI en Vercel
Geleverd
B2B webshop, kledingmanagementsysteem, medewerkersportaal, branding-configurator, leveranciersfeed, Google Shopping-feed, facturen met eigen nummerreeks, AI-chatbot en performance

Het hart: het kledingmanagementsysteem

Iedereen bestelt zelf. Binnen het eigen budget.

Bij een zakelijke klant bestelt niet één inkoper, maar iedereen. Elke medewerker krijgt een jaarbudget en een eigen omgeving. Wat binnen het budget past, bestelt hij zelf. Wat erbuiten valt, gaat als aanvraag naar de manager.

Het medewerkersportaal is een aparte omgeving. Een medewerker ziet zijn budget en bestelt, zonder bij de rest van het account te kunnen.

  • Stap 1

    Maten per medewerker

    Shirt, broek, schoen en jas liggen per persoon vast. De manager hoeft niet meer te onthouden wie welke maat heeft.

  • Stap 2

    Een budget per jaar

    Elke medewerker heeft een jaarbudget. De manager ziet wat er is toegekend, wat er is besteed en wat er nog over is.

  • Stap 3

    Goedkeuren of afwijzen

    Valt een bestelling buiten het budget, dan gaat hij als aanvraag naar de manager en niet naar de mail. Die keurt hem goed of af.

Bedrukken of borduren, per locatie
Een jas krijgt het grote logo op de rug en het kleine op de borst. De configurator laat je per locatie kiezen uit de logo’s die het bedrijf al aanleverde en rekent de prijs meteen mee, inclusief de eenmalige borduurkaart. Borduurwerk zie je eerst als digitaal voorbeeld.
Op de hoogte, ook als het weken duurt
Tussen betaald en onderweg zitten vaak weken inkoop en borduurwerk. In het beheer sturen acht knoppen precies de update die past, met de mail live naast het formulier.

De site zelf

Blader door de pagina’s.

Twee pagina's van de live shop, van boven tot onder. Tik op het scherm voor de hele pagina.

De volledige homepage

Werkkleding per categorie en per merk, met de zakelijke ingang meteen in beeld. Van hier klik je door naar circa 4.400 producten.

ropaworkwear.nl

Meer werk

Alle cases

Draait jouw shop ook op losse plugins?

Soms is opnieuw bouwen goedkoper dan nog een plugin erbij. We kijken eerst wat je hebt, en zeggen het ook als je beter kunt blijven waar je zit. Zo pakken we webshops laten maken aan, ook voor B2B.

Plan een kennismakingBekijk webshops laten maken

Direct iemand van het team
0318 240 419