JavaScript function to refresh cart drawer (Sense theme)

Technical Q&A
1

Hi everyone,

I need some help with my Shopify store (I’m using the Sense theme).

An app provider (Fast Bundle) asked me to create a global JavaScript function that can be called via window in the browser console. This function should update or refresh the content of the cart drawer — specifically, the native Shopify cart drawer that comes with the Sense theme.

I’m not quite sure how to do this. Has anyone done something similar or could help me write such a function?

Any help would be really appreciated!

https://kyotsu.ch
PW: kyotsu.ch

Best regards,
Tobias

2

@tobiaszellweger Try something like the following UNTESTED and not final code:

/* make sure this event happens after custom elements are defined */
document.addEventListener('DOMContentLoaded', refreshCart(ajaxCartJSONResponseObject)
}
function refreshCart(ajaxCartJSONResponseObject){
  let cart = document.getElementsByTagName('cart-drawer')[0];
  if(cart)
      cart.renderContents(ajaxCartJSONResponseObject);
}

If the app is changing the cart it should be able to call that function and pass in the cart object it got ajaxCartJSONResponseObject

Otherwise you need to also build the ajax/fetch logic to get the cart, this info is found in shopify theme docs or generally online.

Or you’d have to modify the theme to expose the behavior outside of anonymous functions and classes.

To either get the cart render behavior from the product form as a product is added in product-form.js.

Or from the cart-drawer-items custom element and it’s internal renderContents() function in cart-drawer.js

If you need this advanced customization built and tested then contact me by for services.

Contact info in forum signature.

or if you have access use a private message by clicking here (sloooower).
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @tobiaszellweger ,

I am from Mageplaza - Shopify solution expert.

Based on your requirements for the Sense theme, here’s a JavaScript function that should refresh the cart drawer by leveraging Shopify’s native functionality and common theme practices. This solution combines AJAX cart updates with DOM replacement:

window.refreshCartDrawer = function() {
  // Fetch updated cart JSON
  fetch('/cart.js', {
    method: 'GET',
    headers: { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  .then(response => response.json())
  .then(cart => {
    // Dispatch cart update event (handled by theme scripts)
    document.dispatchEvent(new CustomEvent('cart:updated', {
      bubbles: true,
      detail: { cart }
    }));

    // Fetch and replace cart drawer HTML
    fetch('/cart?section_id=cart-drawer')
      .then(response => response.text())
      .then(text => {
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(text, 'text/html');
        const newDrawer = htmlDoc.getElementById('CartDrawer');
        
        if (newDrawer) {
          const currentDrawer = document.getElementById('CartDrawer');
          if (currentDrawer) {
            // Replace drawer content
            currentDrawer.innerHTML = newDrawer.innerHTML;
            
            // Reinitialize theme components
            if (typeof theme !== 'undefined') {
              // Re-run drawer open/close handlers
              theme.cartDrawer.init();
              
              // Rebind events
              theme.cart.init();
            }
          }
        }
      });
  })
  .catch(error => {
    console.error('Cart refresh error:', error);
  });
};

Installation:

  1. Go to Online Store > Themes > Edit Code
  2. Open theme.liquid (in Layout folder)
  3. Add this before :

Usage:
Call this in browser console after making cart changes:

window.refreshCartDrawer();

Please let me know if it works as expected!

Best regards!