Why won't my div element update after adding products to Shopify cart via Ajax?

Other Questions Shopify
1

I’m working on implementing Ajax functionality for my Shopify store’s shopping cart. The add to cart feature is working fine, but I’m having trouble updating a specific div element after a product gets added to the cart.

Here’s what I’m trying to do:

Shopify.onProductAdded = function(cart_item) {
  $('#shopping-cart').html('Successfully added ' + cart_item.title + ' to cart!');
  Shopify.refreshCart();
}

The div doesn’t change at all when this code runs. However, this simple test works perfectly:

Shopify.onProductAdded = function(cart_item) {
  alert('Product added successfully!');
};

The alert shows up every time, so I know the callback function is being triggered. What could be preventing the div from updating when items are added to the shopping cart?

2

Check if your CSS is hiding the div or making it invisible. I’ve seen this where the callback works fine but styles override the content. Try adding a short delay like setTimeout(() => { $('#shopping-cart').html('Successfully added...'); }, 100); in case some theme JS is resetting the div right after your update.

3

This is probably a timing issue with jQuery loading or DOM conflicts. I had the same problem a few months ago - Shopify’s Ajax cart callbacks sometimes fire before jQuery’s fully loaded, even when you think it’s ready. Try vanilla JavaScript instead: document.getElementById('shopping-cart').innerHTML = 'Successfully added ' + cart_item.title + ' to cart!'; This cuts out jQuery dependency problems completely. Also check if other scripts are messing with the same div - some Shopify themes have conflicting JavaScript that overwrites your DOM changes right after they happen.

4

I encountered a similar issue when working on custom cart functionality. It’s possible that the div with the id ‘shopping-cart’ isn’t present when your callback is executed, or it may not be included in the current page context at all. Try adding a console.log($('#shopping-cart').length); inside the callback to see if jQuery is able to locate the element. If it returns 0, that indicates the element isn’t available in the DOM. Ensure that your JavaScript code runs after the document has fully loaded; wrapping it in a document ready function can help. Additionally, check for any JavaScript errors in the console that might be preventing the HTML update.

5

This sounds like Shopify’s cart refresh cycle messing with your div. When you call Shopify.refreshCart() right after updating the div, it refreshes all cart elements and overwrites your custom HTML. I hit this same issue last year building a cart notification system. Remove the Shopify.refreshCart() call from your callback, or add a delay if you need the cart data updated. I used setTimeout(() => { Shopify.refreshCart(); }, 2000); and it worked. Gives your div time to show before the refresh kills it. Also check if your theme has built-in cart notifications that might conflict with your custom div.