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:

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

Error management

You can listen to an event that will let you know that an error occurred during the initialization of the Storage Configurator. For example if the requested project does not exist. With this, you can choose to display your custom error screen and hide the configurator.

Event name	Input / Output	Payload	Reason
configuratorError	Output event	Javascript "Error" object	An error occurred during the initialization.

Example

configurator.addEventListener("configuratorError", (event) => {
    console.log(event.detail.message);
});

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);
});