Cart integration and favorites integration

Owned by Ekaterina Slesarchik
26-06-2023
13 min read

Please note that integrating the shopping cart will help you better understand the purpose of the visualizer and track user actions to assess the impact of the visualizer on conversion rates. You can view the technical implementation of the shopping cart on this page.

Shopping cart integration

Integrating a shopping cart into the Wizart Visualizer offers a convenient and efficient way to enhance your customers' experience and boost your conversion rate. With a shopping cart, customers can easily add, review, and modify items within the visualizer before making a purchase, providing a seamless and interactive shopping journey.

Whether you need a simple or advanced integration, there are multiple options available to cater to your specific needs and requirements. Let's explore the different shopping cart checkout and integration methods to optimize your visualizer for a successful shopping experience.

Depending on your specific needs, you can select multiple checkout methods to offer your customers a range of options to choose from. This ensures that each customer can select the most suitable checkout method for their individual preferences, resulting in a personalized and satisfactory shopping experience.

One-way shopping cart synchronization

  • Ease of integration:

  • Integration type: PIM account settings + lines of code in your website

  • Supported by plugins: None (Shopify is upcoming)

Sending shopping cart content by email

  • Ease of integration:

  • Integration type: PIM account settings

  • Supported by plugins: All

Two-way shopping cart synchronization

  • Ease of integration:

  • Integration type: PIM account settings + lines of code in your website

  • Supported by plugins: None

Sending shopping cart content via WhatsApp

  • Ease of integration:

  • Integration type: PIM account settings

  • Supported by plugins: All

One-way shopping cart synchronization

Ease of integration:

Integration type: PIM account settings + lines of code in your website

Supported by plugins: None (Shopify – coming soon)

 

The one-way shopping cart synchronization implies that products added to the shopping cart in the Visualizer will be synchronized with the shopping cart on the website when the “Proceed to checkout” button is clicked.

To enable the one-way shopping cart synchronization, please enable the shopping cart functionality in your PIM account settings and add a small piece of code to your website (unless you are using any Wizart plugins).

One-way shopping cart synchronisation is a simple way to keep in sync the contents of the shopping carts (between the one in the Visualizer and the one on your website). This kind of synchronization implies that the details will be processed on your side. Upon clicking on the 'Proceed to checkout' button, the Visualizer will send the order details (SKUs and quantity) which you will need to forward to the shopping cart on your website.

Steps to enable the one-way shopping cart sync

 

  1. Enable the shopping cart functionality in your PIM account (Configuration → Web)

  2. Put a link to the shopping cart from your website

 

 

Having completed the steps above, the ‘Proceed to checkout’ button must redirect a user to the following URL:

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

Example:

<script> window.addEventListener("load", function(event) { // get parameters from url const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); // get values from query-string const sku = urlParams.getAll('vendorCode[]'); const quantity = urlParams.getAll('quantity[]'); // print the result console.log(sku); // ['wallpaper_1', 'wallpaper_2']; console.log(quantity); // ['2', '1']; // Next you need to put the sku and quantity // into the shopping cart on your website. }); </script>

Two-way shopping cart synchronization

Ease of integration:

Integration type: PIM account settings + lines of code in your website

Supported by plugins: None

This is the most user-friendly way to integrate the shopping cart, but also the most complex one. The two-way shopping cart integration means that products added to the Visualizer shopping cart are automatically synchronized with the one on your website. For example, if a user changes the quantity of products or removes them from the Visualizer shopping cart, the changes will be replicated in the shopping cart on the website as well.

This kind of integration works in the opposite direction as well – items added to the shopping cart on the website will automatically show up in the Visualizer shopping cart.

To enable the two-way shopping cart synchronization, please enable the shopping cart functionality in your PIM account settings and add the synchronization code to your website.

You can activate the functionality via your PIM account from section called “Configuration“.

Shopping cart synchronization process works on the basis of method window.postMessage.

Web Visualizer calls method window.postMessage if any action is taken in or with regard to the shopping cart.

When the visualizer is open, methods are added to the window.wizartDK to synchronize the shopping cart.

wizart-fitting-room-object - is the iframe ID. You can see this ID here or in inspector.

Steps to integrate:

Identifying the list of products in the shopping cart

To identify the list of products in the shopping cart you need to call the method postMessage.

// first option const wizartFittingRoom = document.getElementById('wizart-fitting-room-object'); wizartFittingRoom.onload = (() => { wizartFittingRoom.postMessage({ eventName: 'setShoppingCartStore', payload: [ { vendor_code: 'vendor_code', // type string, quantity: 1, // type number, }, ], }, '*'); }); or // second option window.addEventListener('message', (event) => { if (event.data && event.data.eventName === 'iframeLoaded') { wizartFittingRoom.postMessage({ eventName: 'setShoppingCartStore', payload: [ { vendor_code: 'vendor_code', // type string, quantity: 1, // type number, }, ], }, '*'); } }, false);

Next code should be write where code of floating button or entry point button is located.

Setting the current state of items in the shopping cart – setShoppingCartStore. To transfer the current state of the shopping cart to the visualizer, call the method.

The method is available after opening the visualizer.

Obtain list of products from the shopping cart

To get the list of products from the shopping cart you need to call the method postMessage getShoppingCartStore. Web Visualizer will catch this request for getting the list of products from the shopping cart and trigger the event getShoppingCartStore on its side.
Example:

Next code should be write where code of floating button or entry point button is located.

Getting the current state of items in the shopping cart – getShoppingCartStore. To get the items in the shopping cart, call the getShoppingCartStore method with a callback function. The callback function will receive the items in the shopping cart. The method is available after opening the visualizer.

Changing the product quantity

When a product is added to the shopping cart or its quantity is changed, the event addShoppigCartItem will be called.

Next code should be write where code of floating button or entry point button is located.

Adding an item to the shopping cart – onAddShoppigCartItem. To add a product, you need to call the onAddShoppigCartItem function with a parameter { vendor_code: 'vendor_code' } . The method is available after opening the visualizer.

Removing a product from the shopping cart

When the product is removed from the shopping cart, event removeShoppigCartItem with parameters vendor_code and removeALL will called. removeAll - value “true” is used in the case when the product was totally removed from the shopping cart.

Next code should be write where code of floating button or entry point button is located.

Removing an items from the shopping cart – onRemoveShoppingCartItem. To get the goods when they are removed, you must call the onRemoveShoppingCartItem method with a callback function. The method is available after opening the visualizer.

To set the current state of the shopping cart, please use the following method: deployment kit.

Example of two-way shopping cart synchronization

Two-way Favorites synchronization

To activate two-way Favorites synchronization you need to set the parameter enable_two_way_favorites=1 in integration.

Favorites synchronization process works on the basis of method window.postMessage.

Web Visualizer calls method window.postMessage if any action is taken in or with regard to the favorites.

When the visualizer is open, methods are added to the window.wizartDK to synchronize the favorites.

Steps to integrate:

Identifying the list of products in the favorites.

To identify the list of products in the shopping cart you need to call the method postMessage.

Next code should be write where code of floating button or entry point button is located.

You should send list of vendor codes (or Unique SKU ID-es) within payload.

Obtain list of products from the favorites

If you need to synchronize all selected products from the Favorites in the current moment, you should call event window.postMessage with the name: getFavoritesStore.

Web-visualizer replies on the request getFavoritesStore by calling the event window.postMessage with the name: getFavorites.

Next code should be write where code of floating button or entry point button is located.

Add a product to the favorites

If any product is added to the Favorites, the web-visualizer calls event window.postMessage with the name: addFavorite.

Next code should be write where code of floating button or entry point button is located.

Once you have processed the event addFavorite on your side, you need to send the current status of Favorites to the web-visualizer by calling the event setFavoritesStore described above.

Removing a product from the favorites

If any product is removed from the Favorites, the web-visualizer calls event window.postMessage with the name: removeFavorite.

Next code should be write where code of floating button or entry point button is located.

Once you have processed the event removeFavorite on your side, you need to send the current status of Favorites to the web-visualizer by calling the event setFavoritesStore described above.

Example of two-way favorites synchronization

Simple example:

Sending shopping cart content by email

Ease of integration:

Integration type: PIM account settings

Supported by plugins: All

It’s a great way to capture new leads and get orders from your customers in case there are no e-com components on your website.

How it works? When a user clicks on the “Proceed to checkout” button, an email app opens a ready-to-be-sent email template with the order details. If necessary, in your PIM account, you can customize the following fields (to activate the functionality for your account, please contact support@wizart.ai):

  • the “Proceed to checkout” button name;

  • the ‘TO’ field by putting an email of another person responsible for handling the orders;

  • the subject line;

  • the introduction text.

The order details will be displayed in the following format: QUANTITY x PRODUCT NAME / SKU ID / BRAND NAME:

 

Sending shopping cart content via WhatsApp

Ease of integration:

Integration type: PIM account settings

Supported by plugins: All

It’s another good way to capture new leads and get orders in case there are no e-com components on your website.

How it works? A user clicks/taps on the “Proceed to checkout” button, and WhatsApp sends a message with the order details.

To activate WhatsApp checkout, simply navigate to your PIM account settings and follow the prompts to configure the feature:

  • the “Proceed to checkout” button name;

  • a phone number of a person responsible for handling the orders (please enter numbers only);

  • the introduction text of a message (it is recommended to keep the message neutral).

Once these settings are in place, customers will have the option to use WhatsApp to send their shopping cart items directly to your designated number, streamlining the checkout process and boosting your conversions.

The message will be displayed as follows:
Intro text
QUANTITY x PRODUCT NAME
SKU ID