Feature options

Features change the appearance of a product. For example, a sofa can have different upholstery materials or different geometry for the legs.

You can set the options for each feature by setting the features property on the viewer itself. See the example code below.

UpholsteryBoucle NaturalCord TurmericEasy Velvet BlackSoft Wool Burnt Orange

LegsTapered Metal Leg BlackTapered Metal Leg BrassTapered Metal Leg Silver

<select name="UPHOLSTERY">
  <option value="BOUCLE_NATURAL">Boucle Natural</option>
  <option value="CORD_TURMERIC">Cord Turmeric</option>
  <option value="EASY_VELVET_BLACK">Easy Velvet Black</option>
  <option value="SOFT_WOOL_BURNT_ORANGE">Soft Wool Burnt Orange</option>
</select>

<select name="LEGS">
  <option value="TAPERED_METAL_LEG_BLACK">Tapered Metal Leg Black</option>
  <option value="TAPERED_METAL_LEG_BRASS">Tapered Metal Leg Brass</option>
  <option value="TAPERED_METAL_LEG_SILVER">Tapered Metal Leg Silver</option>
</select>

<cylindo-viewer customer-id="5098" code="SECTIONAL PDP">
  <cylindo-360-frame frame="8"></cylindo-360-frame>
</cylindo-viewer>

const viewer = document.querySelector("cylindo-viewer[code='SECTIONAL PDP']");
viewer.features = {
  UPHOLSTERY: "BOUCLE_NATURAL",
  LEGS: "TAPERED_METAL_LEG_BRASS",
};

const selectors = document.querySelectorAll("select");
selectors.forEach(select => {
  select.addEventListener("change", event => {
    viewer.features = {
      ...viewer.features,
      [select.name]: event.target.value,
    };
  });
});