Load different products into the configurator

Since the Roomle Configurator is a single-page-app it is very easy to load different products into the configurator. If you are unsure what a single-page-app (SPA) is then it makes sense to read through the various explanations on the internet for example like this discussion. If the concept of a SPA makes sense to you, let's have a look on the code:

<div class="product" data-roomle-id="__SOME_ROOMLE_ID_1__">
  <div>Product 1</div>
</div>
<div class="product" data-roomle-id="__SOME_ROOMLE_ID_2__">
  <div>Product 2</div>
</div>
<div class="product" data-roomle-id="__SOME_ROOMLE_ID_3__">
  <div>Product 3</div>
</div>

const buttons = document.querySelectorAll('.product');
[...buttons].forEach((button) => {
  button.addEventListener('click', (productDomNode) => {
    const target = productDomNode.target;
    let roomleId = target.getAttribute('data-roomle-id') || target.parentElement.getAttribute('data-roomle-id');
    if (!roomleId) {
      return;
    }
    configurator.ui.loadObject(roomleId);
  });
});

Full example can be found in this Code Sandbox.