Versions Compared

Version Old Version 1 New Version 2
Changes made by

Andrei Dyakov

Andrei Dyakov

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Visualizer allow to use your products no loaded allows you to showcase custom products that are not uploaded to the Wizart PIM, providing flexibility in your product presentations.

Example: Integrating a Custom Product in Visualizer

Here’s how you can load and display a custom product using the DeploymentKit library:

Code Block
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Create a Visualizer instance
        const visualizer = WizartDeploymentKit.createVisualizer({
            token: 'YOUR_WEB_TOKEN', // Replace with your actual Web Token
            targetElement: document.getElementById('visualizer-container'),
            layoutSettings: {
                layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN,
            },
            sceneData: {
                openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
           
                         // seeDefine supportedcustom types in the library version refferenceproduct properties
                    type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL, // Product type
                    name="Custom product name", // Product name
                 vendor_code=   "P277-VD343534",       // Vendor code
                    unit="m",                   // Unit of measurement
                    width=3,                     height=2.5,
 // Width (in meters)
                    2.5,                   // productHeight texture(in urlmeters)
                    image_path="https://texture-url.jpg", // Product texture URL
                )
            },
        });

        // Load and display the Visualizer
        visualizer.load().then(() => {
            visualizer.show();
        }).catch(error => {
   ;
    });
</script>

Updating the Product in the Visualizer

You can change the displayed product dynamically by calling the updateSceneData method. Here’s an example:

Code Block
visualizer.updateSceneData({
    openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
        WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
        "Another product",         // New product name
        "P277-VD34354544",         // New vendor code
        "m",                       // Unit of measurement
        console.error('Failed to load the Visualizer:', error);
        });
    });
</script>

...

2.2,                       // New width (in meters)
        2.7,                       // New height (in meters)
        "https://another-texture-url.jpg" // New product texture URL
    )
});

Passing Product Texture as a Base64 String

If you prefer to use a base64-encoded string for the product texture instead of a URL, you can do so as follows:

Code Block
visualizer.updateSceneData({
    openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
        type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
        name="Another product"Product with Base64 Texture",
        vendor_code="P277-VD34354544",
        unit="m",
        width=2.2,
        height=2.7,
        image_path="https://another-texture-url.jpg" WizartDeploymentKit.formatBase64ImageSrc(imageBase64) // Pass base64 image
    )
});

You have two options how to pass product texture

the first one as on example above

the second passing image as base64 string

Code Block
image_path=WizartDeploymentKit.formatBase64ImageSrc(imageBase64)

...

Opening a Specific Room with a Custom Product

To open a specific room with your custom product instead of the default room gallery, include the openInRoom property when initializing the Visualizer or updating the scene data.

Code Block
visualizer.updateSceneData({
    openInRoom: 'a3c6086f-4aaa-45ca-b0f0-f681a65185df', // Room ID
    openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
        type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
        name="Another product",
        vendor_code="P277-VD34354544",
        unit="m",
        width=2.2,
        height=2.7,
        image_path="https://another-texture-url.jpg"
    )
});

For more details, refer to the DeploymentKit documentation.