Constructor
new Visualizer(options)
- Description:
Creates a new Visualizer instance.
- Source:
Example
// Simple usage
const targetElementVisualizer = document.getElementById('visualizer');
const visualizer = new WizartDeploymentKit.Visualizer({ token: 'ANSUhEUgAA...', layoutSettings: { targetElement: targetElementVisualizer } });
await visualizer.load();
visualizer.show();
// Usage with custom product
const visualizer = new WizartDeploymentKit.Visualizer({
token: 'ANSUhEUgAA...', // Your access token
layoutSettings: {
targetElement: targetElementVisualizer // Parent element for Visualizer
}
sceneData: {
// set openInRoom if you want to open the transferred product in a specific room. Otherwise, it will start with the room selection.
openInRoom: "a3c6086f-4aaa-4...",
openWithCustomProduct: WizartDeploymentKit.Visualizer.CustomProduct(
WizartDeploymentKit.PRODUCT_TYPES.WALLPAPER,
'Your product name',
'Product vendor code',
'm',
'product width',
'product height',
// product texture url || base64 string
WizartDeploymentKit.formatBase64ImageSrc("iVBORw0KGgoAAAANSUhEUgAA...")
);
}
});
await visualizer.load();
visualizer.show();
// See more configuration options in the VisualizerOptions.Parameters:
| Name | Type | Description |
|---|---|---|
options |
VisualizerOptions | The options for the Visualizer instance. |
Members
filterProductDetailsProps
- Description:
Sets a callback function to filter product details properties.
- Source:
Sets a callback function to filter product details properties.
Example
visualizer.filterProductDetailsProps = (properties) => {
const propertiesToShow = {
width: (v) => `${v}m`,
height: (v) => `${v}m`,
price: (v) => `${v}$ for m2`
};
const filtered = properties.filter(prop => Object.keys(propertiesToShow).includes(Object.keys(prop)[0]));
return filtered
.map(prop => {
const [key, value] = Object.entries(prop)[0];
return { [key]: propertiesToShow[key](value) };
});
};iframe :HTMLIFrameElement
- Description:
The iframe element embedded in the document.
- Source:
The iframe element embedded in the document.
Type:
- HTMLIFrameElement
isLoaded :boolean
- Description:
Determine if iframe is loaded.
- Source:
Determine if iframe is loaded.
Type:
- boolean
isVisible :boolean
- Description:
Determine if Visualizer is visible.
- Source:
Determine if Visualizer is visible.
Type:
- boolean
Methods
block() → {void}
- Description:
Prevent user actions in visualizer.
- Source:
Returns:
- Type
- void
destroy()
- Description:
Destroys the Visualizer iframe instance, removing event subscriptions and clearing memory.
- Source:
getFavoritesState() → {Promise.<FavoritesState>}
- Description:
Retrieves the current favorites state.
- Source:
Returns:
A promise that resolves with the favorites state data.
- Type
- Promise.<FavoritesState>
getShoppingCartState() → {Promise.<ShoppingCartState>}
- Description:
Retrieves the current shopping cart state.
- Source:
Returns:
A promise that resolves with the shopping cart state data.
- Type
- Promise.<ShoppingCartState>
hide()
- Description:
Hides the Visualizer iframe.
- Source:
load() → {Promise.<Visualizer>}
- Description:
Loads the Visualizer iframe if not already loaded.
- Source:
Returns:
A promise that resolves when the iframe is loaded.
- Type
- Promise.<Visualizer>
setFavoritesState(state) → {Promise.<FavoritesState>}
- Description:
Sets new state for Visualizer favorites.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
state |
FavoritesState |
Returns:
- Type
- Promise.<FavoritesState>
setShoppingCartState(state) → {Promise.<ShoppingCartState>}
- Description:
Sets new state for Visualizer shopping cart.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
state |
ShoppingCartState |
Returns:
- Type
- Promise.<ShoppingCartState>
setSize(width, height)
- Description:
Sets custom dimensions for the Visualizer iframe in CUSTOM_SIZE layout.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number | The width of the iframe. |
height |
number | The height of the iframe. |
Throws:
-
Throws an error if layout is not CUSTOM_SIZE.
- Type
- Error
(async) show()
- Description:
Shows the Visualizer iframe.
- Source:
unblock() → {void}
- Description:
Allow user actions in Visualizer.
- Source:
Returns:
- Type
- void
updateSceneData(sceneData) → {Promise.<Visualizer>}
- Description:
Reloads the Visualiser iframe with new scene data.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
sceneData |
SceneData | The new initial data. |
Returns:
A promise that resolves when the iframe is loaded.
- Type
- Promise.<Visualizer>