3 - Initialization

This page describes how to initialize the product configurator.

You will need to know how to set attributes or send events to the configurator 🔗

Mandatory data

Simple product load

The most common use case: you want to load a product. You only need to things:

Attribute name	Attribute value
data-distribution-id	The id of your application distribution.
data-product	The database id of the product you want to load.

Assembly load

You can load an already configured product as a string (an "Assembly")

The common use case is this one:

• You load a default product 🔗
• You retrieve the assembly 🔗, and save it for later use.
• Then you want to reload the saved product.

Since the assembly can be a little heavy, you will not send it as a DOM attribute.

First, set the required attributes so the configurator knows it has to wait for the assembly:

Attribute name	Attribute value
data-distribution-id	The id of your application distribution.
data-use-assembly	"true"

Then, when the page is loaded, you will need to send the assembly itself in an initialization event.

info

See the communication page to know how to send an event 🔗.

const dataToLoad = {
    appConfigData: {
        assembly: "[The assembly as a string]"
    },
}
configurator.dispatchEvent(new CustomEvent("configuratorInit", {detail: dataToLoad}));

Optional data

info

The best way to configure the optional attributes is to set their value in your application distribution, but you can also choose to configure it in the DOM.

The values you set in the DOM will override the eventual values from the Application Distribution.

See the Product Configurator integration dedicated page 🔗.

The Product Configurator also comes with an integrated documentation of available attributes. 🔗

You can use it to check the default value, type or name of all available attributes.