Update Cart Count from Custom Commerce Components

With the Spring ’21 release, customers can use a Lightning Message Service (LMS) channel to uniformly publish and subscribe to notifications about changes to the state of their Commerce cart. The LMS channel “lightning__commerce_cartChanged” lets customers notify every out-of-the-box Commerce component when the cart has been modified. This notification triggers all relevant components to refresh their data accordingly. The LMS channel is the preferred long-term solution for custom component integration with OOTB components.

Support for the “cartchanged” DOM event will be removed in a future release (Safe Harbor).

Refer to the Lightning Message Service documentation for more details and in-depth guidance.

 

Abbreviated example of using the LMS channel to notify other components when the state of the cart has changed:

import { LightningElement, wire } from "lwc";
import {
 publish,
 MessageContext
} from "lightning/messageService";

import cartChanged from "@salesforce/messageChannel/lightning__commerce_cartChanged";

export default class CartUpdatingComponent extends LightningElement {
 @wire(MessageContext)
 messageContext;


 /**
  * Handles a user button click to add a product to their cart.
  */
 addToCart(event) {
   addToCartAsync(...)
      .then(() => {
        publish(this.messageContext, cartChanged);
      });
 }
}

The previously provided interim workaround (below) used the "cartchanged" event to trigger a refresh. The LMS channel "lightning__commerce_cartChanged" solution (above) takes the place of using "cartchanged":

this.dispatchEvent(new CustomEvent("cartchanged", {
  bubbles: true,
  composed: true
}));

Support for triggering a refresh event on the cart badge Lightning Web Component (LWC) is already in place. So firing an event, which this snippet does, triggers the desired refresh.

In a store, you can run the code snippet right from the browser debugger console. You can tell that the snippet is working when the console shows a network call to get cart information.

In the future (safe harbor applies) we'll be working to include a supported way for customers to trigger these kinds of updates natively.

Code Example:

/**
* Handles a user button click to add a product to their cart.
*/
    addtoCart() {

        addToCartAsync(...)
            .then(result => {
                this.dispatchEvent(new CustomEvent("cartchanged", {
                    bubbles: true,
                    composed: true
                }));
            });
    }