# Get Started

    <div
    	class="visualizer"
    	data-role="visualizer"
    	experienceId="<your experience id here>"
    	sceneId="<optional, will lunch a scene by scene id>"
    	defaultProduct="<optional, product sku, will display the product on all available supported application>"
    	defaultProducts="<optional, a stringified key vale pair, key: application, value: product sku, will present those as defaults >"
    	maxFaceSize="<optional, the maximum width image size to use, a number from 0 to 2048>"
    	></div>
    	const containerElement = document.querySelector('.visualizer');
    	containerElement.addEventListener('visualizerLoaded', (event)=>{
    		const visualizer = event.detail.visualizer;
    	});
    </div>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer@0.1.77/dist/index.js"></script>


# Plugins
## UI
see https://www.npmjs.com/package/@byondrnd/byondxr-web-visualizer-ui
# Functions

## initAndLoad();
####
start and load the visualizer app, will be triggered automatically on [data-role="visualizer"] elements
after complete will emit a "visualizerLoaded" event
     
## getSceneList(): Array\<IScene>;
####
will return the scene list available in this experience

## setScene(sceneId: string);
####
will set the current scene
after complete will emit a "sceneLoaded" event

## GetProductList(): Array\<IProduct>;
####
will return products list according to the current application and filters

## GetApplicationsList(): Array\<IApplication>;
####
will return applications available on this experience

## GetCurrentApplication(): IApplication;
####
will return the current applications

## SetCurrentApplication(application: IApplication): IApplication;
####
will set the current applications

## GetFilters(): Array\<IFilter>;
####
will return the available filters

## GetCurrentFilters(): Array\<IFilter>;
####
will return the current filters

## SetFilter(filters: Array\<IFilter>): Array\<IFilter>;
####
will set the current filters

## displayProduct(productSku: string, application: IApplication): Promise\<void>;
####
will set a product on a specific application
will emit a "productChanged" event after complete

## displayScene(sceneId: string): Promise<void>;
####
will display a saved scene
will emit a "sceneDisplayed" event after complete

## getDisplayedProduct(application: IApplication): IProduct;
####
will return the product displayed on an application in the current scene

## getDisplayedProducts(): Array<IProduct>;
####
will return all displayed products in the current scene

## addProductToFavorites(productSku: string, application: IApplication): IFavoriteProductList;
####
will add a product to favorites
will emit a "productAddedToFavorites" event

## removeProductFromFavorites(productSku: string, application: IApplication): IFavoriteProductList;
####
will remove a product from favorites
will emit a "productRemovedFromFavorites" event

## getFavoriteProducts(): IFavoriteProductList;
####
will return the favorite products

## addFavoriteScene(): Promise\<IFavoriteSceneList>;
####
will add a scene to favorites
will emit a "sceneAddedToFavorites" event

## removeFavoriteScene(setId: string): IFavoriteSceneList;
####
will remove a scene from favorites
will emit a "sceneRemovedFromFavorites" event

## getFavoriteScenes(): IFavoriteSceneList;
####
will return the favorite scenes

## addProductToCart(product: IProduct);
####
 will emit a "productAddedToCart" event

## orderSample(product: IProduct);
####
will emit a "orderSample" event

# Interfaces

    IScene = {
    	id: string;
    	index: string;
    	title: string;
    	image: string;
    };

###

    IFavorite = {
    	product: IProduct;
    };

###

    IFavoriteScene = {
    	id: string;
    	scene: IScene;
    	image: string;
    	favorites: Array<IFavorite>;
    };

###

    IFavoriteProductList = Array<IFavorite>;

###

    IFavoriteSceneList = Array<IFavoriteScene>;

###

    IFacet = {
    	name: string;
    	options: string[];
    };

###

    IFilter = IFacet;

###

    IApplication = { application: string; image?: string };

###

    IProduct = {
    	sku: string;
    	title: string;
    	description: string;
    	image: string;
    	application: string;
    	price: string;
    	facets: IFacet[];
    };

# Events

## usage

### with html element object

htmlElement.addEventListener('visualizerLoaded', (event)=>{

const visualizer = event.detail.visualizer;

});

### with visualizer object

visualizer.on('hotspotClicked', handleOnProductClicked);

| eventName                  	| callback values                                    	| description
| -------------------------- 	| -------------------------------------------------- 	| --------------------------------------------------
| sceneLoaded                	| visualizer: Visualizer                             	| once, after the visualizer is loaded
| visualizerLoaded           	| scene: IScene                                      	| every time a scene is loaded
| productChanged             	| product: ProductSchema.IProduct                    	| every time a product has be added to the scene and finished display
| sceneDisplayed         		| scene: IFavoriteScene				                  	| every time a set finished display
| hotspotClicked            	| application: IApplication                          	| every time an hotspot was clicked on the scene
| productAddedToFavorites     	| favorites: IFavoriteProductList; product: IProduct 	| every time a product was added to favorite
| sceneAddedToFavorites         | favoriteScenes: IFavoriteSceneList; scene: IFavoriteScene  	| every time a set was added to favorite
| productRemovedFromFavorites 	| favorites: IFavoriteProductList; product: IProduct 	| every time a product was removed from favorite
| sceneRemovedFromFavorites     | favoriteScenes: IFavoriteSceneList; scene: IFavoriteScene  	| every time a set was removed from favorite
| productAddedToCart         	| product: IProduct                                  	| every time a product was added to cart
| orderSample                	| product: IProduct                                  	| every time order sample was clicked on scene
