Sync your Shopping Cart

When you create a LiveShopping event, you can choose to enable the Cart Synchronization (see Event Creation). This feature allows users to add a product directly from the Aploze Interface, thanks to a button with a label "Add To Cart".

Intro

Before starting, you need to know 2 things:

1. The way that products are added to the cart in the front-end of your website. (JS methods?)

2. Which IDs are used in the front-end of your website when you add a product, sometimes this is an EAN code, sometimes a SKU, an internal one, a combination of ID and variants ?

Technically, there is no cart system in Aploze, we provide a way to retrieve products and let you add it to your own cart.

Usage

1. Listen the Aploze Cart JS event

There are many JS events listenable on Aploze, but the event that will interest us for synchronize your shopping cart is the one who returns a product when the user clicks on "Add to cart" Button.

This event is named APLOZE_PLAYER_PRODUCT_ADDED_TO_CART

Products can be only added to the cart during the live and the replay time. See the Aploze.openPlayer() method to simulate a fake status.

As described in our documentation, Aploze JS Events are attached to the document, so you need to use the native Web Event API to listen it:

document.addEventListener('APLOZE_PLAYER_PRODUCT_ADDED_TO_CART', function (event) {
    
    var product = event.detail.product;
    
    // product = {
    //    id: "DC5216-001", // The product ID
    //    price: 75
    // }
    
})

Now, you can access to product and you are ready to send it to your own cart.

Where does Aploze Product ID come from ? All your products need to be filled in the admin panel (see products catalog). You can specify your product ID and all variants combinations if needed...

2. Add the product to your cart

It's time to add the product to your cart, technically, on your website, and this part depends on your website technology.

It's time to code ! If you are not a developer, here the first question to ask to him/her:

Can we add product to the cart on the fly with javascript on our website ?

The answer is Yes 🤩

That means it will be very easy, you probably need to use an existing JS method.

The answer is No 🤔

No problem, your developer can do it in an other way, like Create an Ajax call in front-end that sends the product ID to an existing back-end endpoint.

3. Send a feedback to the user

Ok, the job is done ! Congratulation !

Now we need to send to the user a feedback by using this method:

Aploze.sendCartFeedback(success: boolean | object)

We need to cover 3 cases :

• The product was successfully added to the cart\

  Aploze.sendCartFeedback(true)

• This product is temporarily out of stock. \

  Aploze.sendCartFeedback({success: false, error: 'out-of-stock'})

• An error has occurred when you tried to add the product.\

  Aploze.sendCartFeedback(false)

Now users are ready to add a product to your cart from the Aploze Player.

Real Example

// Simulate my event in LIVE status

Aploze.openPlayer('MY_EVENT_ID', {status: 'live'})

// Listen the "add to cart" event

document.addEventListener('APLOZE_PLAYER_PRODUCT_ADDED_TO_CART', function (event) {
        
  var product = event.detail.product;

  // product = {
  //    id: "DC5216-001", // The product ID
  //    price: 75
  // }
        
  // Your custom method to add the product to your cart
        
   yourCustomAddToCartMethod(product.id)
    .then(() => {
        // The product was successfully added to the cart
        Aploze.sendCartFeedback(true)
    })
    .catch((error) => {
      if (error.type === "out-of-stock") {
        // This product is temporarily out of stock. 
        Aploze.sendCartFeedback({success: false, error: 'out-of-stock'})
      } else {
        // An error has occured when you tried to add the product
        Aploze.sendCartFeedback(false)
      }
    });

})