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

ProductVariation AVariation B

UpholsteryPigment Dyed FossilPigment Dyed NightfallAniline Dyed Leather Walnut

StorageClosedOpen

<select name="code">
  <option value="TATM.LEATHR.SECT.CHAISE.4SEAT.OPEN-A">Variation A</option>
  <option value="TATM.LEATHR.SECT.CHAISE.4SEAT.OPEN-B">Variation B</option>
</select>
<select name="color">
  <option value="LTHR-02">Pigment Dyed Fossil</option>
  <option value="LTHR-06">Pigment Dyed Nightfall</option>
  <option value="CB-0164">Aniline Dyed Leather Walnut</option>
</select>
<select name="storage">
  <option value="CLOSE">Closed</option>
  <option value="OPEN">Open</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,
    };
  });
});