Change product

A viewer can be used to display multiple products. This can be done by changing the code property on the viewer. See the example code below.

This is useful when you want to use the viewer in a single-page application or in special cases where a product may logically be split into multiple products for the purpose of configuration.

Notice how the viewer keeps state about the selected features even when the product is changed. In this example, the Uphostry and Storage are features while the Product is the code.

Example

Product

Upholstery

<select name="code">
  <option value="WHISTLER SOFA BED">Variation A</option>
  <option value="MINERAL SOFA BED">Variation B</option>
</select>
<select name="upholstery">
  <option value="ATENEA CARMIN">Atena Carmin</option>
  <option value="ATENEA NAVY">Atena Navy</option>
  <option value="VICTORY TEAL">Victory Teal</option>
</select>
<cylindo-viewer id="change-product" customer-id="5098" code="MINERAL SOFA BED">
  <cylindo-360></cylindo-360>
  <cylindo-360-frame frame="8"></cylindo-360-frame>
  <cylindo-model></cylindo-model>
</cylindo-viewer>

const viewer = document.querySelector("cylindo-viewer#change-product");
const selectors = document.querySelectorAll("select");
selectors.forEach(select => {
  select.addEventListener("change", event => {
    if (event.target.name === "code") {
      viewer.code = event.target.value;
      return;
    }

    viewer.features = {
      ...viewer.features,
      [select.name]: event.target.value,
    };
  });
});

Example​

Example