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)

Put a link to the shopping cart from your website

Add integration code

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

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.

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

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

        visualizer.load().then(() => {

            // Synchronize cart changes
            const updateCartState = () => {
                WizartDeploymentKit.EventBus.pushEvent(
                    visualizer,
                    new WizartDeploymentKit.WizartEvent(
                        WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
                        yourShoppingCartState
                    )
                );
            };
            
            // Set initial cart state
            updateCartState();
            visualizer.show();

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

            WizartDeploymentKit.EventBus.subscribe(
                (event) => { 
                    /* Modify your cart state */
                    updateCartState(); 
                },
                WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
                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.