useConfigurator()

Managing Configurations Dynamically with useConfigurator. Leverage the useConfigurator composable to dynamically manage 3d model configurations.

Usage

To integrate useConfigurator into your project, ensure that you've installed the necessary dependencies. Here’s how you can use useConfigurator to manage application configurations:

import config from './config.test.json';

const { configuration, state, price, updatePart } = useConfigurator(config);

watch(state, (newState) => {
  console.log('State changed:', newState);
}, { deep: true });

Options

configuration

The initial configuration object loaded from an external JSON file. This object sets the initial state and parameters for the configurator.

state

The current state of the configurator, tracking changes as users interact with the configuration options.

price

Tracks the total price based on the selected options within the configurator. This allows real-time price updates as users change their selections.

updatePart

Function to apply updates to specific parts of the configuration, enabling dynamic modifications based on user inputs or other programmatic conditions.

Example config

Here is a sample configuration object, detailing parts like color, size, and warranty options:

{
    "parts": {
        "color": {
            "field": "Select",
            "inputType": "select",
            "inputLabel": "Select your colour",
            "modelPartName": "crystal",
            "options": [
                {
                    "id": "black",
                    "name": "Black",
                    "description": "Black is the darkest color, the result of the absence or complete absorption of visible light.",
                    "price": 10,
                    "default": true
                },
                {
                    "id": "silver",
                    "name": "Silver",
                    "description": "Silver exhibits the highest electrical conductivity, thermal conductivity, and reflectivity of any metal.",
                    "price": 13,
                    "default": false
                },
                {
                    "id": "white",
                    "name": "White",
                    "description": "White is the color of fresh snow, chalk, and milk, and is the opposite of black.",
                    "price": 16,
                    "default": false
                }
            ]
        },
        "size": {
            "field": "Select",
            "inputType": "select",
            "inputLabel": "Select your size",
            "modelPartName": "crystal",
            "options": [
                {
                    "id": "small",
                    "name": "Small size",
                    "description": "Best for kids and small hands.",
                    "price": 10,
                    "default": true
                },
                {
                    "id": "medium",
                    "name": "Medium size",
                    "description": "Best for most people.",
                    "price": 20,
                    "default": false
                },
                {
                    "id": "big",
                    "name": "Big boy",
                    "description": "Best for big hands.",
                    "price": 30,
                    "default": false
                }
            ]
        },
        "warranty": {
            "field": "Checkbox",
            "inputType": "checkbox",
            "inputLabel": "Add extended warranty?",
            "options": [
                {
                    "id": "yes",
                    "name": "Extended warranty (2 years)",
                    "price": 10,
                    "default": false
                },
                {
                    "id": "no",
                    "name": "Standard warranty (1 year)",
                    "price": 0,
                    "default": true
                }
            ]
        }
    }
}

This JSON structure helps in setting up the configurator with predefined options that can be selected by users, allowing for flexible configuration setups tailored to various use cases.