Product Configurator Development

Product Configurator Development

Configurator is interface where buyer assembles product: selects options, color, size, extras, and sees result real-time. Technically harder than regular product card: manage option dependencies, recalculate price, update visual, check stock availability — all synchronously.

Configurator Types

Before design, determine task class:

Variant Configurator — fixed set of combinations. Example: shirt (3 colors × 5 sizes = 15 SKU). Each combination — separate variant in DB. Simple implementation but doesn't scale with hundreds of attributes.

Parametric Configurator — user sets parameters, price and characteristics computed by formulas. Example: windows, custom furniture, metal structures. Millions possible combinations, storing all senseless.

CPQ-Configurator (Configure–Price–Quote) — B2B scenario: complex compatibility rules, individual prices, export to quote. Requires CRM and ERP integration.

Data Model

For parametric configurator:

configurator_options (id, product_id, name, type, required, sort_order)
-- type: select | radio | checkbox | range | text

option_values (id, option_id, label, value, price_delta, image_url, in_stock)

option_dependencies (id, if_option_id, if_value, then_option_id, action)
-- action: show | hide | require | disable | set_value

price_rules (id, product_id, conditions JSONB, price_formula)

Dependencies between options — key part. Example: select "Case Type = Aluminum" → "Color" shows only 4 of 12 colors, "Engraving" becomes required. This is condition tree computed on client per each change.

Client Logic

Configurator — essentially reactive state machine. On each option change:

1. Update selection state
2. Compute active dependencies (which options hide/show/block)
3. Recalculate price
4. Update visualization (if exists)
5. Check availability (API request or local cache)

React + Zustand implementation:

const useConfigurator = create((set, get) => ({
  selections: {},
  select: (optionId, value) => {
    const next = { ...get().selections, [optionId]: value };
    set({
      selections: next,
      visibleOptions: computeVisibility(next, rules),
      price: computePrice(next, basePrice, pricingRules),
    });
  },
}));

Dependency rules loaded once at mount and cached locally. Server requests only for actual availability on add-to-cart.

Visualization

Visualization levels by complexity:

Image Switching — simplest: each option combination has image set. On option select change src. Works for clothing, simple furniture.

Layered Composition — image built from layers (PNG transparency). Each option adds/removes layer. Canvas API or CSS overlay implementation. Example: bike configurator — frame, wheels, handlebar, color — each layer independent.

function renderConfiguration(canvas, layers) {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const layer of layers.filter(l => l.visible)) {
    const img = imageCache[layer.src];
    ctx.drawImage(img, 0, 0);
  }
}

3D Visualization — Three.js or Babylon.js with GLTF model. Materials change via MeshStandardMaterial. Resource-intensive for content (need 3D models, textures) but max effect. Detailed in 3D product view section.

Price Recalculation

Pricing can be simple (option delta sum) or complex (matrix, formulas, volume discounts). For formula approach use expression evaluator library safely evaluating string expressions:

base_price = 15000
formula = "base * (1 + material_coeff) * area + hardware_cost"

For B2B: price depends on volume, region, client group. Move logic to server — client gets final price via API, not computed self.

Add to Cart

Adding configured product saves not just product_id but full configuration snapshot:

{
  "product_id": 42,
  "configuration": {
    "material": "oak",
    "color": "natural",
    "width": 1200,
    "handles": "chrome"
  },
  "computed_price": 38500,
  "computed_sku": "DESK-OAK-NAT-1200-CH"
}

Important for production: order must contain all parameters, not reference "variant".

Save and Share Configuration

Users often want save configuration, return later or share colleague. Solution: serialize configuration to JSON, encode base64 or save DB with short code.

URL: /configurator?config=eyJtYXRlcmlhbCI6Im9hayJ9 — state deserialized on page load.

Permanent links: POST /api/configurator/save → {code: "DESK-ABC123"} → URL /configurator/DESK-ABC123. Store in Redis TTL 30 days or unlimited DB.

Timeline

• Variant Configurator (photo swap, basic price recalc): 2–3 weeks
• Parametric with dependencies and layered visualization: 4–7 weeks
• CPQ with CRM/ERP integration and formula pricing: 8–14 weeks

Main time spent not code but business rules: valid combinations, pricing, conflict display. Without detailed spec from client, impossible.