Shopping cart integration

When integrating the Visualizer in full-screen mode, especially on mobile devices, it’s essential to ensure end users can comfortably add products to their shopping cart. The Visualizer provides shopping cart functionality with two synchronization options:
1. One-Way Sync

In this setup:

End users interact with the Visualizer’s shopping cart directly.
You cannot pre-populate the Visualizer cart with products from your website.
Whenever users add or remove items from the Visualizer cart, events are triggered, allowing you to synchronize these changes with your website’s cart.

Steps to enable the one-way shopping cart sync

To enable the shopping cart functionality in your PIM account (Configuration → Web)
Turn on shopping cart and one-way sync.

Add integration code

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const visualizer = new WizartDeploymentKit.Visualizer({
            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>

Add shopping cart link.

When user clicks Proceed to checkout button in Visualizer it will redirect a user to your shopping cart URL.

https://example.com/cart?vendorCode[]=wallpaper_1&quantity[]=2&vendorCode[]=wallpaper_2&quantity[]=1

Note: The Visualizer saves the cart state between sessions, so the cart will retain its contents after a page reload.

2. Two-Way Sync

In this setup:

The Visualizer’s cart state is fully managed by your website.
You can pre-load the Visualizer cart with products already in your website cart.
Changes in either cart must be synchronized by pushing updates between your website and the Visualizer.

Turn on shopping cart and two-way sync

Add integration code.

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

    document.addEventListener('DOMContentLoaded', () => {
        const visualizer = new WizartDeploymentKit.Visualizer({
            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>

Key Notes

One-Way Sync: Easier to implement but less flexible (no pre-loading products).
Two-Way Sync: More control but requires active state management.
Always ensure event handling and synchronization logic are optimized for real-time updates.