Gepubliceerd door NVH IT | Webdevelopment | WordPress | AI-ondersteunde ontwikkeling
Craze Coffee maakt specialty koffie die je niet zomaar overal vindt. Dat is precies het punt. Hun bonen liggen bij geselecteerde Delhaize- en Carrefour-filialen, bij lokale handelaars en uiteraard in hun eigen branderij in Kessel-Lo. Maar hoe weet een klant waar hij of zij die koffie in de buurt kan kopen?
Op de website stond geen antwoord op die vraag. Geen kaart, geen lijst, niets. Klanten die niet wisten dat ze bij Delhaize Heverlee of de Proxy in Waarschoot terecht konden, haakten gewoon af. Omzet die door de mazen van het net glipte.
Dit is de concrete situatie waar veel groeiende Belgische bedrijven mee te maken hebben: je distributienetwerk groeit, maar je website groeit niet mee. Een traditioneel webbureau zou voor zo’n maatwerk snel aankomen met een offerte van duizenden euro en een doorlooptijd van weken. Wij bouwden de volledige oplossing in een fractie van die tijd, zonder concessies op kwaliteit of security.
Het probleem: klanten kunnen je product niet vinden
Stel je voor: iemand ontdekt Craze Coffee via een vriend, zoekt de website op, en wil weten of er een verkooppunt in de buurt is. Die informatie is nergens te vinden. De kans dat die persoon terugkomt? Klein.
Het probleem zit op drie niveaus:
Extern: Er is geen manier om verkooppunten te tonen op de website. De informatie bestaat wel, maar is niet ontsloten voor bezoekers.
Intern: Voor een kleine koffiebranderij voelt het bouwen van een interactieve kaart als iets voor bedrijven met een groot IT-budget. Het lijkt buiten bereik.
Filosofisch: Klanten verdienen het om goede producten gemakkelijk te kunnen vinden. Een merk dat dat niet faciliteert, laat zijn klanten in de kou staan.
De oplossing was geen dure kant-en-klare plugin met abonnementskosten, overbodige features en een lelijk design dat niet past bij de huisstijl. De oplossing was een plugin die exact doet wat nodig is, gebouwd op maat, en volledig geïntegreerd in de bestaande WordPress-omgeving.
Wat we gebouwd hebben
De store locator in actie: een interactieve kaart met zoekfunctie, geolocatie en een scrollbare lijst
De Craze Store Locator is een custom WordPress-plugin met de volgende functionaliteiten:
Interactieve kaart
Bezoekers zien direct een overzichtskaart van heel België met alle verkooppunten als markers. De kaart is gebouwd met Leaflet.js en gebruikt CartoDB Positron als kaartlaag. Die keuze is bewust: schone, lichte kaartafbeeldingen die passen bij een premium merk. Geen lelijke standaard Google Maps look.
De markers zijn custom SVG-iconen in de huiskleuren van Craze Coffee. Wanneer je op een verkooppunt klikt, verschijnt er een popup met het adres en een directe link naar Google Maps voor routebeschrijving.
Zoeken op locatie
Bezoekers kunnen een stad of adres intypen. De plugin zoekt dat adres op via OpenStreetMap Nominatim (gratis, geen API-sleutel nodig) en centreert de kaart op het resultaat. De lijst met verkooppunten wordt automatisch gesorteerd op afstand, met een afstandsbadge per verkooppunt.
Wie op “Gebruik mijn locatie” klikt, geeft de browser toestemming om de GPS-positie door te sturen. De kaart past zich meteen aan en toont de drie dichtstbijzijnde winkels bovenaan.
Kaart en lijst in sync
Links de kaart, rechts een scrollbare lijst. Klik je op een kaartmarker, dan scrollt de lijst naar dat verkooppunt. Klik je op een kaart in de lijst, dan zoomt de kaart in op die locatie. Twee-richtings-synchronisatie, volledig in vanilla JavaScript, zonder extra afhankelijkheden.
Op mobiel vallen kaart en lijst onder elkaar. De UI past zich automatisch aan via CSS Grid.
Makkelijk beheer in WordPress
Het beheerpaneel: alle verkooppunten overzichtelijk in een Custom Post Type
De verkooppunten worden beheerd als een Custom Post Type in WordPress. De klant hoeft geen technische kennis te hebben. Een nieuw verkooppunt toevoegen werkt zo:
- Naam invullen
- Adres invullen (straat, postcode, stad, land)
- Op “Coördinaten automatisch opzoeken” klikken
Het bewerkingsscherm: adresgegevens invullen en met één klik de coördinaten automatisch laten opzoeken
De plugin zoekt dan zelf de GPS-coördinaten op via Nominatim. Geen manueel kopiëren uit Google Maps, geen technische kennis vereist. Als het adres bij het opslaan nog geen coördinaten heeft, doet de plugin het ook automatisch op de achtergrond.
Kwaliteit en security: de details die tellen
Een custom plugin bouwen is gemakkelijk. Een veilige, onderhoudbare plugin bouwen vraagt discipline. Dit zijn de concrete keuzes die we gemaakt hebben.
WordPress security standaarden
Elke formulieractie in het admin-paneel is beveiligd met een nonce (een eenmalig geldige token). Dat beschermt tegen CSRF-aanvallen waarbij een kwaadaardige website acties probeert uit te voeren namens een ingelogde beheerder.
Alle invoer van gebruikers passeert door sanitisatiefuncties (sanitize_text_field, wp_unslash). Alle uitvoer naar de browser passeert door escape-functies (esc_attr, esc_html). Dat sluit XSS-aanvallen uit.
Gevoelige admin-acties zijn achter een capability-check geplaatst (current_user_can('edit_posts')). Alleen gebruikers met de juiste rechten kunnen verkooppunten aanpassen.
GPS-coördinaten die via het formulier binnenkomen worden gevalideerd op bereik: breedtegraad moet tussen -90 en 90 liggen, lengtegraad tussen -180 en 180. Waarden buiten die grenzen worden op nul gezet. Zo kan niemand ongeldige data in de database stoppen.
Ook in de JavaScript-kant van de kaart worden locatienamen via een escHtml-functie gefilterd voor ze in popup-content terechtkomen.
Performantie en caching
Verkooppunten worden opgezocht uit de database en gecacht als WordPress transient gedurende één uur. Bij hoog bezoekersverkeer wordt de database niet bij elke paginabezoek opnieuw bevraagd. Wanneer een verkooppunt wordt opgeslagen of verwijderd, wordt de cache automatisch geleegd.
De kaartdata wordt als JSON-object meegegeven aan de pagina via wp_localize_script. Geen extra AJAX-verzoeken bij het laden van de kaart.
Geen onnodige afhankelijkheden
De plugin gebruikt geen betaalde kaartdiensten, geen Google Maps API (en de bijbehorende abonnementskosten), en geen externe kaartplugins. Leaflet.js is open source. OpenStreetMap Nominatim is gratis. De totale kost voor de klant: nul euro aan licenties of API-kosten.
Elementor-integratie
Omdat de website van Craze Coffee is gebouwd met Elementor, is de store locator ook beschikbaar als native Elementor-widget. De klant kan de kaart plaatsen via de vertrouwde drag-and-drop interface, zonder shortcodes te moeten kennen.
De rol van AI in het ontwikkelproces
Dit project is ontwikkeld met AI als actieve co-developer. Wat dat concreet betekent:
Snelheid zonder kwaliteitsverlies. Het eerste werkende prototype van de plugin stond in uren, niet in dagen. Dat wil niet zeggen dat we shortcutsen. Het betekent dat we sneller itereren. Een security-issue dat vroeger een code review van een collega vergde, wordt nu direct gedetecteerd en opgelost in hetzelfde gesprek.
Meer focus op het juiste probleem. In een traditioneel ontwikkeltraject gaat veel tijd naar het schrijven van boilerplate: standaard WordPress-structuren, registratie van post types, enqueueing van scripts. AI versnelt dat deel. De aandacht van de developer gaat naar de beslissingen die er echt toe doen: hoe werkt de UX, welke security-risico’s zijn er, hoe performt de oplossing bij schaal?
Goedkoper voor de klant. Een kleinere tijdsinvestering per project betekent lagere kosten. Wij kunnen daardoor maatwerk leveren tegen prijzen die vroeger alleen haalbaar waren voor standaardoplossingen.
Belangrijk om te zeggen: AI genereert geen blind code die we klakkeloos inzetten. Elke regel wordt beoordeeld. Elke security-keuze wordt bewust gemaakt. De verantwoordelijkheid voor kwaliteit ligt bij ons als developer, niet bij het AI-model.
Het resultaat voor Craze Coffee
De verkooppunten-pagina bestaat nu en werkt. Klanten die op zoek zijn naar Craze Coffee in hun buurt, vinden die informatie in seconden. Ze zien de dichtstbijzijnde winkel, klikken op de routeknop, en zijn op weg.
Voor Craze Coffee betekent dat:
- Minder vragen via e-mail of social media over “waar kan ik uw koffie kopen?”
- Een professionelere uitstraling die past bij de premium positionering van het merk
- Een beheertool die het team zelf kan gebruiken zonder technische hulp
Voor het distributienetwerk: elke nieuwe winkel die Craze Coffee opneemt in het assortiment, staat binnen een minuut op de kaart.
Heeft uw bedrijf ook nood aan een maatwerk oplossing?
Misschien herkent u de situatie van Craze Coffee. U heeft een groeiend netwerk van verkooppunten, dealers, servicepunten of showrooms, maar uw website helpt klanten niet om die te vinden. Of u heeft een ander specifiek probleem dat standaard plugins niet oplossen.
Bij NVH IT bouwen we op maat gemaakte WordPress-oplossingen die precies doen wat u nodig heeft. Niet meer, niet minder. Schoon, veilig en onderhoudbaar.
Wat u van ons mag verwachten:
- Duidelijke communicatie over wat we gaan bouwen en waarom
- Technische kwaliteit die past bij een professionele website
- Eerlijke prijzen door onze AI-versnelde werkwijze
- Geen lock-in in dure externe diensten of licenties
Klaar om te praten over uw project?
Neem contact op met NVH IT of stuur een e-mail naar hallo@nvh-it.be. We plannen graag een vrijblijvend gesprek in.
Over NVH IT
NVH IT is een Belgisch bedrijf gespecialiseerd in webdesign, WordPress-development en IT-consultancy. We werken voor kleine en middelgrote bedrijven die een professionele online aanwezigheid willen zonder het prijskaartje van een groot bureau.
De store locator die in dit artikel beschreven wordt, is een custom plugin ontwikkeld door NVH IT voor Craze Coffee. Alle screenshots zijn van de live website.
Tags: WordPress, Custom Plugin, Store Locator, Webdevelopment, AI, Maatwerk, WooCommerce, Leaflet.js, Beveiliging
Categorie: Cases | WordPress Development