Expose Nested Configurators through the API

Introduction

This tutorial describes how to use the Configurator API to retrieve and work with nested configurators in a custom UI. 

*Note that the api currently only supports one level of nested configurators

Prerequisites

• This article assumes you read and understood how to Embed the Threekit Player & Configurator into a webpage

Retrieving Nested Config

To retrieve the nested configurator details for a selected product,utilize the ‘getConfigurator()’ function from the Player API while passing in the name of the top level Attribute which contains the nested product. This function returns the configurator api for the currently selected product. In order to maintain the top level configurator API, it’s best to create a separate variable for the nested configuration.

Try this out yourself by selecting products in the embedded configurator below and pasting the following code into the console:

nestedConfigurator = await window.player.getConfigurator('Nested Configurator 1');

The ‘getDisplayAttributes()’ function may be used to retrieve all the attribute information which needed to create the form for the nested configurator.

Paste the following code snippet into the console and familiarize yourself with the object structure:

curDispAttributes = nestedConfigurator.getDisplayAttributes();

The setConfiguration() function is used to set the configurator when the user changes values on the form in the custom UI. 

Paste the following code into the console and note the color of the asset updates to Orange. Try setting other attributes.

nestedConfigurator.setConfiguration({'Select Color':'Orange'})

Updating Nested Configurator Form

It is important to reset the nestedConfigurator API whenever the product selection changes on the top level attribute, otherwise the API object retains a reference to the previously selected product which is no longer applicable. For instance, update the selected product for the attribute you’ve been using in the configurator below, and then try the getDisplayAttributes() function in the console. Notice all of the attributes still reference the previous product and the setConfiguration() function has no effect. Now, reset the nestedConfigurator variable using the getConfigurator() function from the player API. Notice the Configurator API is now referencing the current product.