Why isn't my cart quantity updating in real-time on the Dawn theme?

[Allmums]

I am facing this issue that when a customer adds a product to cart, the quantity number besides the cart icon does not change unless you refresh the page. Same thing when quanity is increased or decreased. 

Please note that i have installed a third party app called "sale max slide cart drawer". It basically allows me to display upsells in the cart. Can the store display realtime quantity in icon without having to uninstall this app.

I am using the dawn theme. My store url is www.allmums.pk

[snippetcommerce]

Step 1 Enable the Cart Drawer in the Dawn Theme Setting (Admin)

Step 2: Implementing Real-Time Cart Updates

Now that the Cart Drawer is enabled, the next step is to allow for real-time updates — this means that every time a customer adds or removes items from their cart, the cart contents update dynamically without needing a full page reload.

To achieve this, we’ll use JavaScript to interact with Shopify’s Sections API and make sure that the cart drawer updates instantly and reflects the latest cart items.

Here’s the JavaScript code that will handle these on-the-fly updates:

function refreshCartDrawer() {
// Check if cart-drawer-items exists
let cartDrawerItems = document.querySelector('cart-drawer-items');
// Find the cart-drawer element
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
// Remove the is-empty class from cart-drawer if it exists
if (cartDrawer.classList.contains('is-empty')) {
cartDrawer.classList.remove('is-empty');
}
// Remove the div with class 'drawer__inner-empty'
const emptyDrawerElement = cartDrawer.querySelector('.drawer__inner-empty');
if (emptyDrawerElement) {
emptyDrawerElement.remove();
}
// Make the form tag's class 'cart__contents' display as block
const cartContentsForm = document.querySelector('.cart__contents');
if (cartContentsForm) {
cartContentsForm.style.display = 'block';
}
}
// If cart-drawer-items doesn't exist, create it
if (!cartDrawerItems) {
cartDrawerItems = document.createElement('cart-drawer-items');
// Find the drawer__header element
const drawerHeader = document.querySelector('.drawer__header');
if (drawerHeader) {
// Insert the newly created cart-drawer-items after the drawer__header
drawerHeader.insertAdjacentElement('afterend', cartDrawerItems);
}
}
// Call the onCartUpdate method to refresh the cart drawer contents
document.querySelector('cart-drawer-items').onCartUpdate();
// Open the cart drawer and apply necessary classes for animation
if (cartDrawer) {
cartDrawer.open();
}
}