Feature options

Features alter a product's appearance. For example, a sofa can have different upholstery materials or leg geometries.

The options for each feature can be initialized and updated in two ways.

We strongly recommend the use of the configuration attribute to initialize the viewer with the correct features. This is especially valuable, when the HTML is server side rendered, as it ensures the component loads with the correct initial state.

Alternatively, you can set the features directly on the element using the features property on the viewer. However, this can sometimes cause a visual flicker, as the component may initially render with default features before the new ones are applied.

configuration attribute (Recommended)

To set the initial features and options for a product, use the configuration attribute on the viewer element.

The values need to be passed as feature:option pairs, separated by a commas. The required format is feature:option,feature2:option2.

This specific format is parsed by the viewer to apply the corresponding features.

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" 
  configuration="upholstery:BOUCLE_NATURAL,legs:TAPERED_METAL_LEG_BLACK"
>
  <cylindo-360-frame frame="8"></cylindo-360-frame>
</cylindo-viewer>

features property

You can set a product's features through the viewer's JavaScript API.

The viewer has a property features that can receive an object. When initializing the viewer, all the features should be set at once:

viewer.features = {
  UPHOLSTERY: "BOUCLE_NATURAL",
  LEGS: "TAPERED_METAL_LEG_BRASS",
};

When updating a single feature, the previous features object reference should be spread, or all the features should be passed at the same time.

  viewer.features = {
    ...viewer.features,
    feature: option,
  };

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,
    };
  });
});