How to display dynamic cart total in Dawn's header?

Store Design
,
1

I want to run the live cart total in the header of Dawn, obviously the cart drawer is wired up dynamically so any changes are reflected instantly but using

{{ cart.total_price | money_with_currency }}

Requires a refresh to see current price after AJAX add to cart.

2

hello there!

You have expressed a desire to display the live cart total in the header of Dawn. However, you have noticed that using the code “{{ cart.total_price | money_with_currency }}” requires a refresh to see the current price after an AJAX add to cart.

This is because the code you have provided is rendered server-side, and therefore does not reflect changes made by AJAX requests. To display the live cart total without requiring a refresh, you will need to use JavaScript to update the total dynamically.

One approach is to use an event listener to detect changes to the cart, and then update the total accordingly. This can be achieved by selecting the relevant HTML element and updating its contents using JavaScript.


  {{ cart.total_price | money_with_currency }}
3

Thank you, I think this would work but how does the total in the dawn theme (cart-drawer.liquid) update dynamically without any obvious extra JS? Is this what dynamic sections like are meant to do?

4

also that event doesn’t appear to be firing, I’ve added an alert inside that eventlistener and it does not fire

5

Hello, I’m new to shopify and I am currently trying to figure out how to do exactly what is described in the question, but I am struggling to understand where should the code you provided go and how to use it in order to achieve desired result. Could sort out this few questions for me. Thank you.