Communication

This page describes the different ways to communicate with the Storage Configurator.

Attributes

For almost every use case, the only data you need to provide will be some attributes on the web component itself.

You can add an attribute like this:

<closet-configurator data-attribute-name="attribute value"></closet-configurator>

Or if you set it in javascript:

// Create the storage configurator component.
const storageConfigurator = document.createElement("closet-configurator");
// Set some attributes.
storageConfigurator.setAttribute("data-attribute-name", "attribute value");
// Add the configurator to the page.
document.body.append(storageConfigurator)

Events

After the initialization, you may need to communicate with the configurator by sending or receiving some data.

To be able to do this, you will need to:

• Write a script (javascript)
• Retrieve the storage configurator html element in the script

Assuming you used "storage-configurator" as an ID for the html element like this:

<closet-configurator id="storage-configurator" ...>
</closet-configurator>

You can then write a script like this one to retrieve the storage configurator html element:

// Wait for the page to load
window.addEventListener("load", () => {
    // Retrieve the storage configurator html element. This is assuming you put an id on it.
    const configurator = document.getElementById("storage-configurator");
    // Now you can listen to events or send events on the "configurator".
})

Note: Don't use closet-configurator as an id for your component, it is a reserved word and it will lead to an error.

Alternatively you can skip the id and retrieve your configurator component like so:

const configurator = document.querySelector("closet-configurator")

Listen to events

See the interaction documentation to find events to listen to 🔗

To listen to an event, you will need to know the name of the event. For this example, we use the "configuratorValidated" event.

Note: It is recommended to listen to events as soon as the page is loaded, to avoid loosing some events.

window.addEventListener("load", () => {
    const configurator = document.getElementById("storage-configurator");
    
    // Replace "configuratorValidated" by the name of the event you want to listen to.
    configurator.addEventListener("configuratorValidated", (event) => {
        // This example logs the event content.
        // This is where you would have some code to process the BOM and ProjectInfos after the user clicks the "Add to cart" button.
        console.log(event.detail);
    });
})

Send events

See the interaction documentation to find events to send 🔗

To send an event, you will need to know the name of the event. For this example, we use the "externalPriceResponse" events.

You would typically put the code inside a function, to call it when the user makes some action on your end.

function externalPriceResponse() {
    const configurator = document.getElementById("storage-configurator");
    
    // For events that need some data as an input, add it as the detail of the event.
    // The "externalPriceResponse" event takes a json BOM
    const externalPriceData = jsonBom;
    configurator.dispatchEvent(new CustomEvent("externalPriceResponse", {detail: externalPriceData}));
}