Interaction

This page will explain how to interact with the storage configurator once it's loaded on a web page.

Note: Before starting, you need to know how to set attributes or send events to the configurator 🔗

Dedicated pages

Some of the interactions have dedicated documentation pages:

Tokens

The Tokens related events are described in a specific page. 🔗

Validation and Errors

The Validation and Errors related events are described in a specific page. 🔗

BOM

The BOM related events are described in a specific page. 🔗

Project Info

The project info related events are described in a specific page. 🔗

Commands

Some interactions are called "commands". When you use the provided UI, you can enable buttons for each command. If you do not use the provided UI, or if for any reason you want to create your own button for it, you can trigger the commands and for some of them listen to some state information.

Undo / Redo

You can undo and redo the actions of a user, and know if the undo or redo actions are available.

Event name	Input / Output	Payload	Reason
undoRedoStackChanged	Output event	See the payload description below.	Receive the current possibilities for "undo" and "redo".
requestUndo	Input event	None.	Trigger an "Undo".
requestRedo	Input event	None.	Trigger an "Redo".

Payload description

When you receive the payload of the undoRedoStackChanged event, it will contain the following attributes:

Attribute name	Type	Content
undoLength	integer	The number of possible "undo". 0 means you cannot "undo".
redoLength	integer	The number of possible "redo". 0 means you cannot "redo".

Example

// Receive the undo/redo possibilities
configurator.addEventListener("undoRedoStackChanged", (event) => {
    console.log(event.detail);
});

// Request an undo
configurator.dispatchEvent(new CustomEvent("requestUndo"));

// Request a redo
configurator.dispatchEvent(new CustomEvent("requestRedo"));

Zoom

You can zoom in and out using an button on your side.

Event name	Input / Output	Payload	Reason
requestZoomIn	Input event	None.	Zoom in.
requestZoomOut	Input event	None.	Zoom out.

Example

// Request a zoom in
configurator.dispatchEvent(new CustomEvent("requestZoomIn"));

// Request a zoom out
configurator.dispatchEvent(new CustomEvent("requestZoomOut"));

Other interactions

External pricing

Everytime the configurator computes the price of the current configuration, you can have the opportunity to compute the price on your side.

Note: This has to be enabled first in the Application Distribution. 🔗

Event name	Input / Output	Payload	Reason
externalPrice	Input event	See the description below.	You send the computed price to the configurator.
requestExternalPrice	Output event	See the description below.	You enabled external pricing, so the configurator asks for the price computation.

Payload description

externalPrice

When you send the computed price to the configurator, it must contain an object with the following attributes:

Attribute name	Type	Content
pricable	boolean	True if the current state can be priced, false if not.
totalPrice	object	The price information you computed. Details below.

The totalPrice object must match the content described here. 🔗

requestExternalPrice

When the configurator request an external price, the payload is an object with the following attributes:

Attribute name	Type	Content
bom	object	The content of this attribute is the full BOM object. 🔗

Example

// Receive a request for a price computation. 
configurator.addEventListener("requestExternalPrice", (event) => {
    console.log(event.detail.bom);
});

// Send the computed price
const priceData = {
    pricable: true,
    totalPrice: {
        currency: "EUR",
        regular: 159.99,
        current: 149.99,
        discountType: "reduced"
    }
}
configurator.dispatchEvent(new CustomEvent("externalPrice", {detail: priceData}));

Price updates

When a project is loaded in the configurator, it always has a price. You can retrieve this price using two different means:

• Send an event to request the price and receive it once.
• Listen to price change events without any "manual" request.

Event name	Input / Output	Payload	Reason
getPrice	Input event	None.	You want to get the current price.
price	Output event	See the description below.	Receive the price you manually requested.
priceChanged	Output event	See the description below.	Automatically receive the price when it changes.

Payload description

The price received in the event details is an object containing the following attributes:

Attribute name	Type	Content
priceType	string	The type of the "current" price: "regular", "reduced", "discounted" or "membership".
current	string	The current price, formatted as a string including the currency.
currentAsNumber	number	The current price as a number.
regular	string	The regular price, formatted as a string including the currency.
regularAsNumber	number	The regular price as a number.

Note: When not price is available, the data will contain "0" as prices.

Example

// Receive the requested price
configurator.addEventListener("price", (event) => {
    console.log(event.detail.current);
});

// Request the price
configurator.dispatchEvent(new CustomEvent("getPrice"));

// Received the price when it changes
configurator.addEventListener("priceChanged", (event) => {
    console.log(event.detail.current);
});

Email service

In Anonymous mode 🔗, you can allow users to receive their design code (project uuid) or collaboration link (project link url) by email though the email service 🔗 attribute.

When the user clicks the Send button after entering a valid email address, you will:

• Receive all the information required to send the email through the "emailInfo" event.
• Need to send a "emailSent" event to tell the UI that the email has been properly sent.

Event name	Input / Output	Payload	Reason
emailInfo	Input event	See the description below.	You want to get the email address and the project information to send to the user.
emailSent	Output event	None.	Update the UI accordingly once the email is sent.

Payload description

The information received in the event details is an object containing the following attributes:

Attribute name	Type	Content
emailAddress	string	The email address entered by the user.
projectCode	string	The project uuid or design code.
projectLink	string	The project link url or collaboration link.

Example

// Receive the requested price
configurator.addEventListener("emailInfo", (event) => {
    console.log(event.detail);

    // Here your code to send the email

    // Send the event to update the UI
    configurator.dispatchEvent(new CustomEvent("emailSent"));
});

Help button

When the help button is clicked in the toolbar, or command bar, a "requestHelp" event is sent. You can choose to implement your own help center by registering to this event.

Event name	Input / Output	Payload	Reason
requestHelp	Input event	None.	You want to open an help center.

Example

// Receive the requested price
configurator.addEventListener("requestHelp", (event) => {
    // Here your code to open the help center.
});