Studio

Cylindo Studios are a great way to showcase your products in a 3D environment.

Result

Loading...

Live Editor

<cylindo-viewer customer-id="5098" code="SECTIONAL PDP">
  <cylindo-studio code="ALMSTAR STUDIO A" customer-id="5098"></cylindo-studio>
  <cylindo-studio code="ALMSTAR STUDIO B" customer-id="5098"></cylindo-studio>
</cylindo-viewer>

Attributes

Name	Type	Default	Description
feature-code	string	null	The feature code of the material to show.
customer-id	string	null	The customer id of the material to show.
locked-features (optional)	string	undefined	The list of feature codes to lock, comma separated.
external (optional)	boolean	undefined	Pass true, if the studio's main product is different from the viewer's product.

Notes on locked-features

The locked-features attribute is an array of feature codes that will be locked in the studio. Some studios are not rendered in all possible configurations, so you can use this prop to lock the features that are not available. Otherwise, you may receive an error from the API.

This is automatically handled for you if you use the Cylindo Curator to set up your viewer.

External studio

The external attribute is intended for when the main product of the viewer (designated by the viewer's product code) is different from the product the studio is based on.

This attribute will strip the features passed to the viewer from the studio when they do not match. In case the features are not compatible it will result in a broken Image.

<cylindo-viewer customer-id="5098" code="SECTIONAL PDP">
  <!-- This is the SECTIONAL PDP's studio with features active -->
  <cylindo-studio code="ALMSTAR STUDIO A" customer-id="5098"></cylindo-studio>
  <!-- This is the SECTIONAL PDP's studio with features stripped, because we passed the external attribute -->
  <cylindo-studio
    code="ALMSTAR STUDIO B"
    customer-id="5098"
    external
  ></cylindo-studio>
  <!-- This is a studio based on a different product. We pass the external attribute and the features are stripped -->
  <cylindo-studio code="CLOSE-UP" customer-id="5098" external></cylindo-studio>
  <!-- This is a studio based on a different product. We do not pass the external attribute and the features are not stripped. This results in an error, as the features passed to the viewer are not compatible. -->
  <cylindo-studio
    code="ARMCHAIR - READING CORNER 1"
    customer-id="4508"
  ></cylindo-studio>
  <cylindo-thumbnail-bar> </cylindo-thumbnail-bar>
</cylindo-viewer>

Matching features

In case the external studio's features and the viewer's product features match, you should still pass the external attribute.
The viewer will render the studio's main product with the requested features.