Advanced Integration

The configurator can be controlled programmatically by calling functions on the web component. You can use this API to for example to change configurations or to take a screenshot.

Basic Example

The following example loads a specific configurator by calling a function on the element instead of specifying the template uuid as html attribute:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link href="https://storage.googleapis.com/cm-platform-prod-static/fonts/fontawesome-pro-6.0.0-alpha3/css/all.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700" rel="stylesheet" />
        <script src="https://cwc.colormass.com/cm-configurator.js" type="module"></script>

        <script>
            customElements.whenDefined("cm-configurator-main").then(() => {
                //get the configurator element
                const cmConfigurator = document.querySelector("cm-configurator-main")
				
                //call a function on the object
                cmConfigurator.loadConfigurator("8ee95263-fd7c-40fc-b99f-08961594e14e")
            })
        </script>
    </head>
    <body style="width: 100%; height: 100%; margin: 0; font-family: Roboto">
        <cm-configurator-main></cm-configurator-main>
    </body>
</html>

We use the Custom Elements Api here (customElements.whenDefined) to make sure the functions are available.

There is a more elaborate example available in the sample repository. In the repository, there is also a cm-configurator.d.ts file, which lists all available functions.

A limitation of the web components currently is that they cannot immediately load a specific configuration. In case of the iframe configurator, this can be achieved with query parameters of the url. Should this feature be required, it can be added short-term.

Listening to Events

In order to get notified when something happens on the configurator, you can register different event listeners. The following code registers a callback that is invoked when the scene has finished loading:

<script>
	customElements.whenDefined("cm-configurator-main").then(() => {
		cmConfigurator = document.querySelector("cm-configurator-main")

		//Register an event listener and print the parameters available for the current configurator
		cmConfigurator.addEventListener("loadingCompleted", (event) => {
			console.log(cmConfigurator.getParameterList())
		})

		cmConfigurator.loadConfigurator("8ee95263-fd7c-40fc-b99f-08961594e14e")
	})
</script>

The full section of the previous example is contained for context. After the scene provided to loadConfigurator has finished loading, the configurator will print all available parameters on the console. You can use those parameters to change configurations programmatically.

Changing Configurations

With the API of the web component, it is possible to change configurations dynamically without clicking on an item in the menu. For this purpose, you can use the parameters returned by cmConfigurator.getParameterlist(). Here is the (shortened) list of the parameters that was printed by the previous example:

[
    {
        "id": "0fb20bb9-2284-4a8b-b6e0-db02ebc36742/ced9d80c-7103-43f2-a5ba-2d90e0c823b3",
        "type": "config",
        "name": "Seat",
        "values": [
            {
                "id": "3d7420d9-6117-428f-ba41-890ecd157f8e",
                "name": "Blazer Darthmouth"
            },
            {
                "id": "e6ddc079-8026-4e4f-95ca-6e2be019a0f6",
                "name": "Oceanic Atoll"
            },
            {
                "id": "18479bf9-e393-4da9-9fc9-dfb37077550b",
                "name": "Lucia Tenom"
            },
        ],
        "value": "087612ab-9a50-43e3-8626-b1c37322b499"
    },
    {
        "id": "0fb20bb9-2284-4a8b-b6e0-db02ebc36742/60a5a88a-7701-4c10-819e-deb5f87f15c4",
        "type": "config",
        "name": "Back",
        "values": [
            {
                "id": "c93e318c-88ee-4e8c-9b56-9c7075f53784",
                "name": "Main Line Flax Bayswater"
            },
            {
                "id": "4c190056-bc69-49f5-a081-c82a86658124",
                "name": "Synergy Quilt Chemistry"
            },
        ],
        "value": "42763086-b3e6-48cb-ac63-2172f2245bf9"
    }
]

The configurator of this example has two configuration groups: Back _and _seat. Each has multiple variants. This is reflected in the above json array. In order to set those groups programmatically, you can use the following code:

<script>
	customElements.whenDefined("cm-configurator-main").then(() => {
		cmConfigurator = document.querySelector("cm-configurator-main")

		cmConfigurator.addEventListener("loadingCompleted", (event) => {
			console.log(cmConfigurator.getParameterList())

			//Switch the seat upholstery to "Velocity Polar"
			cmConfigurator.setParameter(
				"0fb20bb9-2284-4a8b-b6e0-db02ebc36742/ced9d80c-7103-43f2-a5ba-2d90e0c823b3",
				"config",
				"1d9f7d3d-3823-4224-a3f7-62028295080f",
			)
		})
		cmConfigurator.loadConfigurator("8ee95263-fd7c-40fc-b99f-08961594e14e")
	})
</script>

The full api is illustrated in the samples repository

PreviousGetting Started NextStyling

Last updated 1 month ago