Skip to main content

Configuration

Cylindo renders a product in all its possible configurations. It is up to you to give the viewer information on which options to pick for each feature.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result
Loading...
Live Editor
function Example() {
  const viewer = useRef(null);
  useLayoutEffect(() => {
    viewer.current.features = {
      FABRIC: "IVORY", // Possible values: IVORY, SAND, VELVET BLUE
      PILLOWS: "OFF", // Possible values: OFF, CYLINDRICAL, RECTANGLE
      LEGS: "Dark Brown", // Possible values: Dark Brown, METAL LEG SILVER
    };
  }, []);

  return (
    <cylindo-viewer
      ref={viewer}
      customer-id="5098"
      code="CONFIGURABLE-SECTIONAL-PDP"
    />
  );
}

Try changing and combining the different feature in the example. Notice how the viewer updates.

Fallback​

If features are not valid, the viewer will show the default configuration. See our guide on error handling for how to debug and handle fallback yourself.

Configuring viewer items​

The <cylindo-viewer> shows a 360° viewer if nothing else is configured, but you can also show your products in a multitude of other view modes.

You can either declare these viewer items in HTML on your own end or use Cylindo Curator to configure the viewer items.

The viewer supports the following viewer items:

  • <cylindo-360 />

See the local config example using all of the above.