Page Comparison

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
            token: 'YOUR_WEB_TOKEN',
            targetElement: document.getElementById('visualizer-container'),
        });
        
        visualizer.load().then(() => {
            visualizer.show();

            // Subscribe to "add to cart" events
            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    // Add item to your website cart
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
                visualizer
            );

            // Subscribe to "remove from cart" events
            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    // Remove item from your website cart
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
                visualizer
            );
        });
    });
</script>

<script>
    // Example initial website cart state
    const yourShoppingCartState = [
        { vendor_code: 'Wallpaper_01', quantity: 1 }
    ];

    document.addEventListener('DOMContentLoaded', () => {
        const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
            token: 'YOUR_WEB_TOKEN',
            targetElement: document.getElementById('visualizer-container'),
        });

        visualizer.load().then(() => {
            
            // Set initial cart state
            visualizer.setShoppingCartState(yourShoppingCartState);
            visualizer.show();

            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    /* Modify your cart state */
                    visualizer.setShoppingCartState(yourShoppingCartState);
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
                visualizer
            );

            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    /* Modify your cart state */
                    visualizer.setShoppingCartState(yourShoppingCartState);
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
                visualizer
            );
            
            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    /* Modify your cart state */
                    visualizer.setShoppingCartState(yourShoppingCartState);
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_COUNT_INCREASE,
                visualizer
            );

            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    /* Modify your cart state */
                    visualizer.setShoppingCartState(yourShoppingCartState);
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_CART_DECREASE,
                visualizer
            );
        });
    });
</script>