Configurators
The configurator takes a buyer through a product's choices — one of several as cards, a list, a drop-down or colour swatches, extras, yes or no, quantities and free text — and prices every change as it is made. Rules written in the library's spreadsheet formulas say what a choice requires, excludes or hides, and add price adjustments and bill-of-materials lines.
Every combination it offers can be built. Options other choices rule out are marked with the rule's own reason; choosing one shows exactly what else would change and makes the changes when asked. In seller mode it adds a discount held to its limit, approval above a threshold, and the bill of materials. The model and the selection are plain JSON, and the same engine checks and prices them again on your server.
An edge server, quoted by a seller
Three steps of hardware, finish and service. Pick the large inference card, then a 1U chassis, to see the rules at work: the card needs redundant power, which is set for you, and a 1U chassis has no room for it, so you are shown what changing would mean. Seller mode adds the discount, approval and the bill of materials; order five or more to reach a volume tier.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-configurator id="cf-server" mode="seller" submit-label="Add to quote" lang="en-GB" style="inline-size: 100%"></bmx-configurator>
A bicycle, as a buyer sees it
The same element on one page, as a shop would show it: frames as cards with pictures, colours as swatches, gears and wheels as lists. With auto-resolve on, a choice the other answers rule out is made at once and the changes it caused are announced, rather than asked about.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-configurator id="cf-bike" layout="single" auto-resolve submit-label="Add to basket" lang="en-GB" style="inline-size: 100%"></bmx-configurator>
Checked again on your server
A price sent from a page should never be trusted as it arrives. The page sends the selection; your server gives it and the same model to the configurator's engine, which works out again what is valid, what is missing, the price and the bill of materials. Below is what the bicycle above would send.
// Node 18 or later: the configurator's engine, from the Gold package.
import { readConfigModel, quoteConfiguration } from './dist/node/bmx-configurator.mjs';
const model = readConfigModel(await db.product('bicycle')); // the same JSON the page was given
const quote = quoteConfiguration(model, request.selection, { quantity: request.quantity });
if (!quote.complete) return reply(400, quote.missing.concat(quote.violations));
await orders.create({ lines: quote.lines, total: quote.total, bom: quote.bom });