|
Handleiding
Modulaire
|
| Voor | Webshopbeheerders |
|---|---|
| Versie | 3.0 |
| Datum | 31 juli 2026 |
Met de modulaire configurator stellen klanten op je webshop een samengesteld product stap voor stap samen. Denk aan een boxspring: de klant kiest eerst de afmeting, dan het hoofdbord, het voetbord, de onderbak, het matras, enzovoort. Elke keuze leidt tot een specifiek onderdeelproduct met een eigen prijs; de totaalprijs is de som van alle gekozen onderdelen.
Deze handleiding beschrijft hoe je zo'n configurator inricht in het beheer: van de begrippen (slug en IMC), via de bouwstenen (staptypes, opties, zichtbaarheids- en validatieregels), tot het koppelen van het hoofdproduct en de alternatieve meerprijs-modus. De voorbeelden komen uit twee demo-inrichtingen: een boxspring-configurator (op componentproducten) en een tafelconfigurator (op basisprijs met toeslagen). Welke stappen, regels en grenzen jouw eigen configurator krijgt, bepaal je volledig zelf bij het inrichten.
Gebruik de modulaire configurator wanneer:
Wat je ermee kunt configureren:
Voordat je de configurator inricht, helpt het om te weten wat het eindresultaat is voor de bezoeker van je webshop.
Op de productpagina van een configureerbaar product staat een SAMENSTELLEN-knop in plaats van de gebruikelijke winkelwagenknop. Het product is dus niet direct te bestellen — de klant stelt het eerst samen. De webshop berekent automatisch een vanaf-prijs: de goedkoopst mogelijke samenstelling, inclusief en exclusief btw.
Na een klik op Samenstellen opent een wizard die de klant door de stappen leidt:
Vanuit het configuratie-overzicht voegt de klant de complete samenstelling in één keer toe aan de winkelwagen. Daarnaast zijn er drie extra acties:
In de winkelwagen staat de configuratie als één samengesteld artikel, met alle gekozen onderdelen als specificatie — inclusief eventueel ingevulde tekstvelden (zoals de afmeting van een plint-uitsparing). Bedenkt de klant zich, dan kan hij de configuratie vanuit de winkelwagen opnieuw bewerken: de wizard opent dan met alle eerdere keuzes al ingevuld, zodat alleen de gewenste stap aangepast hoeft te worden.
Twee begrippen komen in deze handleiding steeds terug: de slug (de unieke code van een stap) en de IMC (de code waarmee het systeem het juiste onderdeelproduct vindt). Wie deze twee begrijpt, begrijpt de hele configurator.
| Begrip | Betekenis | Voorbeeld |
|---|---|---|
| Configurator | Het geheel van stappen dat de klant doorloopt | Bedconfigurator |
| Stap | Eén keuze in de wizard | Matras |
| Slug | Unieke code van een stap, in hoofdletters | MATRAS |
| Optie | Eén keuzemogelijkheid binnen een stap, met een sleutel en een zichtbare naam | MEDIUM / "Medium" |
| IMC | Internal Matching Code — de unieke code van een product waarmee de configurator het opzoekt | MAT-MEDIUM-90x200 |
| IMC-template | Het patroon per stap waaruit de IMC wordt opgebouwd | MAT-{MATRAS}-{WIDTH}x{LENGTH} |
| Hoofdproduct | Het configureerbare product dat de klant in de shop ziet | Het bed dat de klant koopt |
| Componentproduct | Een los onderdeel met eigen IMC en prijs | Matras medium 90x200 |
Elke stap in de configurator heeft een slug: een korte, unieke code in hoofdletters. Bij het invoeren wordt de slug automatisch omgezet naar hoofdletters.
| Stap | Slug |
|---|---|
| Afmetingen | AFMETINGEN |
| Hoofdbord | HOOFDBORD |
| Onderbak | ONDERBAK |
| Onderbak links | ONDERBAK_LINKS |
| Groot Matras | GROOT_MATRAS |
| Matras | MATRAS |
| Stoffering | STOFFERING |
| Potenset | POTENSET |
De slug wordt op drie plekken gebruikt:
De Internal Matching Code (IMC) is het systeem waarmee de configurator weet welk concreet product bij een keuze hoort. Elk componentproduct heeft een unieke IMC-code. Wanneer de klant een keuze maakt, genereert de configurator een IMC-code en zoekt het product met precies die code op — inclusief de bijbehorende prijs.
Voorbeeld: kiest een klant een matras "Medium" (sleutel MEDIUM) bij een bed van 90x200 cm, dan genereert het systeem de code MAT-MEDIUM-90x200 en zoekt het het product met exact die IMC-code op.
Elke stap heeft een IMC-template: een patroon met placeholders tussen accolades { } dat wordt ingevuld op basis van de keuzes van de klant.
| Placeholder | Betekenis | Voorbeeld |
|---|---|---|
| {PARENT_PRODUCT} | De IMC van het hoofdproduct, zonder het voorvoegsel PARENT- | bed |
| {WIDTH} | Gekozen breedte in cm | 160 |
| {LENGTH} | Gekozen lengte in cm | 200 |
| {HALF_WIDTH} | De helft van de breedte | 80 |
| {HALF_LENGTH} | De helft van de lengte | 100 |
| {DIMENSIONS} | Breedte x lengte | 160x200 |
| {STAP_SLUG} | De geselecteerde waarde van een eerdere stap (vul de slug van die stap in) | Afhankelijk van de keuze |
Zo pakken templates en hun resultaat uit in de praktijk, in dit voorbeeld bij een bed van 160x200 cm:
| Stap | IMC-template | Klant kiest | Resultaat |
|---|---|---|---|
| Afmetingen | {PARENT_PRODUCT}-{WIDTH}x{LENGTH} | 160x200 | bed-160x200 |
| Voetbord | VB-{PARENT_PRODUCT}-0-{WIDTH} | Bijpassend | VB-bed-0-160 |
| Onderbak | OB-{ONDERBAK}-{WIDTH}x{LENGTH} | 23 cm | OB-23-160x200 |
| Onderbak links | OB-{ONDERBAK_LINKS}-{HALF_WIDTH}x{LENGTH} | 20 cm | OB-20-80x200 |
| Matras | MAT-{MATRAS}-{WIDTH}x{LENGTH} | Medium (MEDIUM) | MAT-MEDIUM-160x200 |
| Topper | TOP-{TOPPER}-{WIDTH}x{LENGTH} | Koudschuim (KOUDSCHUIM) | TOP-KOUDSCHUIM-160x200 |
| Potenset | POOT-{POTENSET}-zwart | 12 cm | POOT-12-zwart |
Let op: {ONDERBAK}, {MATRAS}, {TOPPER} en {POTENSET} verwijzen naar de slug van de betreffende stap. De waarde die wordt ingevuld is de sleutel van de gekozen optie (bijvoorbeeld 23, MEDIUM of 12 — zie paragraaf 4.2).
Bij bredere bedden worden bepaalde onderdelen gesplitst geleverd. De onderbak van een bed van 160 cm breed bestaat bijvoorbeeld uit twee delen van elk 80 cm. Daarvoor bestaat de placeholder {HALF_WIDTH}: die deelt de gekozen breedte automatisch door twee.
| Gekozen breedte | {WIDTH} | {HALF_WIDTH} |
|---|---|---|
| 140 cm | 140 | 70 |
| 160 cm | 160 | 80 |
| 180 cm | 180 | 90 |
| 200 cm | 200 | 100 |
Een configureerbaar product kent twee niveaus:
Het hoofdproduct heeft zelf ook een IMC-code, met het voorvoegsel PARENT-. Dat voorvoegsel wordt automatisch verwijderd en de rest vormt de waarde van de placeholder {PARENT_PRODUCT}:
Een configurator bestaat uit stappen; elke stap heeft een type, meestal een set opties, en optioneel zichtbaarheids- en validatieregels. In dit hoofdstuk leer je alle bouwstenen kennen; in hoofdstuk 5 zet je ze in de juiste volgorde in elkaar.
Het type van een stap bepaalt hoe de klant een keuze maakt:
| Type | Systeemnaam | Beschrijving |
|---|---|---|
| Afmeting Kiezer | size_picker | De klant kiest uit vooraf ingestelde afmetingen (bijvoorbeeld 90x200, 160x200). Elke maat heeft een breedte en lengte in centimeters. |
| Enkele Keuze | single_choice | De klant kiest één optie uit een lijst (bijvoorbeeld een vlak of uitstekend hoofdbord). |
| Ja/Nee | boolean | De klant maakt een ja/nee-keuze (bijvoorbeeld "Wil je één groot matras?" of "Gestoffeerde matras met anti-slip?"). |
| Meerkeuze | multi_select | De klant vinkt meerdere opties tegelijk aan, elk optioneel met een aantal (bijvoorbeeld accessoires: twee nachtkastjes en een bedlampje). |
| Aantal | quantity | De klant voert een getal in (bijvoorbeeld het aantal extra kussens). |
Bij de staptypes met een keuzelijst stel je opties in. Elke optie heeft:
Bij het type Afmeting Kiezer heeft elke optie daarnaast een breedte en lengte in centimeters — daaruit worden de placeholders {WIDTH}, {LENGTH}, {HALF_WIDTH} en {HALF_LENGTH} gevuld.
Per optie zijn er aanvullende instellingen voor situaties waarin de standaard IMC-matching niet volstaat:
| Instelling | Wat het doet | Voorbeeld |
|---|---|---|
| IMC Override | Overschrijft de IMC-template van de stap voor alleen deze optie | De luxe wielset in de stap Potenset matcht een WIEL-product in plaats van een POOT-product |
| SKU-koppeling | Koppelt de optie rechtstreeks aan één product op basis van SKU (vaste prijs, geen IMC nodig); heeft voorrang op IMC-matching | Een accessoire dat in elke maat hetzelfde is |
| Meerprijs | Een vast bedrag (excl. btw) voor deze optie, zonder productmatching | Hoofdbord-opties zoals "Plint uitsparing" + € 99 |
| Tekstveld vereisen | Toont een tekstveld wanneer de optie is gekozen; de ingevulde waarde reist mee naar samenvatting, winkelwagen en bestelling | "Afmeting uitsparing (cm)" bij de plint-uitsparing |
| Optie-afbeelding | Een afbeelding die bij de optie wordt getoond tijdens het kiezen | Foto van de onderbak van 10 cm |
Met zichtbaarheidsregels bepaal je wanneer een stap wordt getoond. Zo maak je de configurator dynamisch: stappen verschijnen of verdwijnen op basis van eerdere keuzes. Elke regel bestaat uit vier onderdelen:
| Onderdeel | Wat vul je in | Voorbeeld |
|---|---|---|
| Stap / dimensie | De stap of afmeting waarop je controleert | WIDTH of GROOT_MATRAS |
| Operator | De vergelijking | Gelijk aan, Groter dan, … |
| Waarde | De waarde waarmee vergeleken wordt | 180 of true |
| Actie | Wat er gebeurt als de regel klopt | Tonen of Verbergen |
| Operator | Betekenis |
|---|---|
| Gelijk aan | Waarde is exact gelijk |
| Niet gelijk aan | Waarde is niet gelijk |
| Groter dan | Waarde is groter (alleen voor getallen) |
| Groter dan of gelijk aan | Waarde is groter of gelijk (alleen voor getallen) |
| Kleiner dan | Waarde is kleiner (alleen voor getallen) |
| Kleiner dan of gelijk aan | Waarde is kleiner of gelijk (alleen voor getallen) |
| Een van | Waarde komt voor in een lijst |
| Niet een van | Waarde komt niet voor in een lijst |
| Bestaat | Er is een waarde ingevuld |
| Bestaat niet | Er is geen waarde ingevuld |
Je kunt meerdere regels combineren met twee modi:
Naast regels op stapniveau kun je ook per individuele optie bepalen wanneer die zichtbaar is. Zo toon je binnen dezelfde stap verschillende opties op basis van eerdere keuzes. Zo stem je twee samenhangende stappen op elkaar af: heeft de klant in de ene stap een hoogte of maat gekozen, dan toont de vervolgstap alleen nog opties die daarbij passen.
Met validatieregels stel je eisen aan de invoer van de klant:
| Regel | Betekenis |
|---|---|
| Verplicht | De klant moet altijd een keuze maken |
| Verplicht als | De klant moet een keuze maken als een bepaalde voorwaarde geldt |
| Verboden als | Bepaalde waarden zijn niet toegestaan als een voorwaarde geldt |
| Gelijk aan veld | De waarde moet gelijk zijn aan die van een ander veld (bijvoorbeeld: de hoogte links en rechts moeten overeenkomen) |
| Minimum waarde | Het ingevoerde getal moet minstens dit zijn |
| Maximum waarde | Het ingevoerde getal mag niet hoger zijn dan dit |
Elke stap heeft een volgordenummer dat bepaalt in welke volgorde de stappen aan de klant worden getoond: stap 1 verschijnt als eerste, stap 2 als tweede, enzovoort. Je past de volgorde aan door de nummers te wijzigen of door stappen te verslepen in het beheer.
Op de stap staat daarnaast het veld Vast aantal: het aantal stuks waarvoor deze stap altijd meetelt in de prijsberekening. Standaard staat dat op 1 — dat is het normale gedrag. Zet je het op 2, dan telt de prijs van het gekozen onderdeel twee keer mee. Dat gebruik je wanneer één keuze in de praktijk altijd meerdere stuks oplevert, bijvoorbeeld twee identieke bodems onder één bed, zonder dat je de klant twee keer dezelfde vraag wilt stellen.
De optielijst blijft daarbij de stukprijs tonen; het configuratie-overzicht en het totaal tonen het bedrag maal het aantal. Splits je een onderdeel al in twee aparte stappen (bijvoorbeeld links en rechts, elk met een eigen product), dan heb je dit veld niet nodig — die stappen worden immers los geprijsd.
Een complete configurator zet je in zeven stappen op. De eerste vijf richten de configurator zelf in; de laatste twee koppelen de producten eraan.
Ga naar E-commerce → Configurator Stappen en maak per onderdeel een stap aan. Voor elke stap vul je in:
Voor elke mogelijke combinatie van keuzes moet er een product bestaan met de juiste IMC-code. Dit is de belangrijkste stap:
Reken vooraf uit hoeveel producten je nodig hebt. Een template als MAT-{MATRAS}-{WIDTH}x{LENGTH} met 3 keuzes in 21 maten vergt 63 producten; voor onderdelen die gesplitst geleverd worden komen de halve maten daar nog bovenop.
Naast de IMC-prijsmodus uit de vorige hoofdstukken kent de configurator een tweede prijsmodus: Meerprijs (basisprijs + toeslagen). Deze modus is gemaakt voor maatwerkproducten die als één artikel worden gemaakt en geleverd — in de voorbeelden hieronder een maatwerktafel: de klant kiest een vorm, rand, kleur, onderstel en maat, ziet het gekozen blad en onderstel als afbeelding opbouwen, en de prijs groeit mee met elke keuze. Er worden géén losse componentproducten gematcht — je stelt één basisprijs in en per keuze een toeslag.
De totaalprijs van een samenstelling is altijd de som van drie onderdelen:
| Onderdeel | Waar stel je het in | Voorbeeld |
|---|---|---|
| Basisprijs | Op de configurator zelf (sectie Prijsinstellingen) | € 499,00 |
| Toeslag per gekozen optie | Per optie van elke keuzestap (veld Toeslag) | Ovaal blad + € 49,00 |
| Maattoeslag | In de maatmatrix (tabblad Maattoeslagen): één bedrag per combinatie van lengte en breedte | 240 × 110 cm + € 130,00 |
De laagste mogelijke combinatie bepaalt automatisch de "vanaf-prijs" die bezoekers bij het product zien. Ontbreekt de basisprijs, dan toont de webshop "Prijs niet beschikbaar" en kan de klant de samenstelling niet bestellen.
Een meerprijs-configurator gebruikt dezelfde stappen en stapkoppelingen als een IMC-configurator, met een aantal extra instellingen.
In de sectie Rol-stappen vertel je de configurator welke gekoppelde stap welke rol vervult. Deze vijf rollen sturen zowel de prijsberekening als de visuele opbouw aan:
| Rol | Staptype | Gebruikt voor |
|---|---|---|
| Vorm | Enkele keuze | Bladafbeelding en toeslag |
| Rand | Enkele keuze | Bladafbeelding en toeslag |
| Kleur | Enkele keuze | Bladafbeelding en toeslag |
| Onderstel | Enkele keuze | Overlay-afbeelding onder het blad en toeslag |
| Maat | Afmeting kiezer | Maattoeslag uit de matrix (alleen prijs, geen afbeelding) |
Bij de opties van de keuzestappen vul je per optie het veld Toeslag in en optioneel een optie-afbeelding. Bij de opties van de onderstel-stap stel je daarnaast de overlay-positie in (links, boven, breedte en hoogte in procenten, plus de laagvolgorde) zodat de foto van het onderstel op de juiste plek onder het tafelblad valt.
Op het tabblad Maattoeslagen maak je per combinatie van lengte en breedte één regel aan met de bijbehorende toeslag. De kleinste maat geef je toeslag € 0,00; grotere maten een oplopend bedrag. Elke combinatie kan maar één keer voorkomen.
Op het tabblad Bladafbeeldingen koppel je per combinatie van vorm, rand en kleur één foto van het tafelblad uit de mediabibliotheek. Het overzicht toont hoeveel van alle mogelijke combinaties al een afbeelding hebben en welke er nog missen, zodat je gericht kunt aanvullen. De maat heeft géén invloed op de afbeelding — alleen op de prijs.
Tijdens het samenstellen ziet de klant het product visueel opgebouwd worden uit twee lagen: de foto van het tafelblad (bepaald door de gekozen combinatie van vorm, rand en kleur) met daaronder de foto van het gekozen onderstel als overlay. Bij elke wijziging van een keuze ververst het beeld direct mee.
De opbouw begint al vóórdat de klant alles heeft gekozen: voor nog niet gemaakte keuzes toont de webshop tijdelijk de eerste optie van die stap. Pas wanneer vorm, rand én kleur definitief gekozen zijn en er voor die combinatie geen afbeelding bestaat, verschijnt een nette melding dat de afbeelding nog niet beschikbaar is. Met de eerder genoemde schakelaar bepaal je of bestellen in dat geval toch mogelijk is.
De maatkeuze wordt de klant aangeboden als twee losse keuzelijsten (lengte en breedte); zodra beide zijn gekozen rekent de webshop de bijbehorende maattoeslag mee. Het configuratie-overzicht toont de basisprijs, elke gekozen optie met zijn toeslag, de maattoeslag en het totaal — inclusief of exclusief btw, afhankelijk van de weergave.
Bij het toevoegen aan de winkelwagen wordt de samenstelling als één regel opgeslagen, met de complete keuze-samenvatting en een vastgelegde prijs. Wijzig je daarna als beheerder prijzen of toeslagen, dan heeft dat géén invloed op samenstellingen die al in een winkelwagen of bestelling staan — nieuwe samenstellingen rekenen uiteraard wél met de nieuwe bedragen. Prijswijzigingen in de maatmatrix zijn na opslaan direct actief voor nieuwe samenstellingen.
De totaalprijs van een configuratie is de som van de prijzen van alle geselecteerde componentproducten en vaste meerprijzen. Het systeem:
De klant ziet dit live in de wizard: elke keuze werkt de totaalprijs direct bij. Productprijzen voer je exclusief btw in; de webshop toont ze inclusief btw.
Kan de configurator bij een bepaalde combinatie geen product vinden, dan bestaat er geen product met de gegenereerde IMC-code. Controleer in deze volgorde:
Ja. Stappen zijn herbruikbaar: je maakt een stap één keer aan en neemt die op in meerdere configurators. De volgorde, het verplicht-zijn en de standaardwaarde stel je per configurator apart in.
Ja. Zet de schakelaar Actief uit bij de configurator. De configurator is dan niet meer beschikbaar op de webshop, maar alle instellingen blijven bewaard — je schakelt hem op elk moment weer in.
Ja. Elke stap heeft een eigen Actief-schakelaar. Schakel je een stap uit, dan wordt deze niet meer getoond in de configurators die de stap gebruiken — zonder dat je de stap hoeft te verwijderen. De inrichting (opties, regels, template) blijft bewaard.
De sleutel (key) is de interne waarde die in de IMC-template wordt gebruikt en letterlijk in de gegenereerde IMC-code verschijnt; houd deze kort en beschrijvend (VLAK, 23, MEDIUM). De zichtbare naam is wat de klant op de website ziet ("Vlak (zelfde breedte als bed)", "23 cm hoog (standaard)", "Medium") — dat mag langere, vriendelijke tekst zijn. Een zichtbare naam kun je altijd veilig aanpassen; een sleutel niet, want die zit verwerkt in de IMC-codes van je componentproducten.