Need help adding a dynamic total cart value in header

[vincedenis]

Hi all,

I'm trying to add the cart value on the header and did:
```

<p class="total-cost"> $ {{cart.total_price | money_without_currency }} </p>

```

in header.liquid page

However I noticed that when a customer add another item to their cart, this value is not updated unless they refresh their page/ navigate to another page.
Are there any way I could make this dynamic so that whenever a customer add another product to their cart, the total value is updated.

[enzoyuna2023]

Hi There, What theme are you use or do you have link of your store ? so I can solve you problem.

[vincedenis]

Hi Enzoyuna, we are using dawn theme

[enzoyuna2023 · Accepted solution]

Hi There are some steps and need make update on JS files in Dawn Theme.
1. create section file with name : cart-total.liquid

And make update on 3 JS files :
2. assets/cart.js  and add 

3. Update assets/cart-notification.js same way look for function "getSectionsToRender"

...and see if that way is help you.
btw you need change your element in header with :

<div id="cart-total">
$ {{cart.total_price | money_without_currency }}
</div>

the last is update assets/cart-drawer.js if you are using Drawer with same way like above.
There is another way using "MutationObserver" but try that above first.  🙂 

[PageFly-Oliver]

Hi @vincedenis ,

You need to add a code JS trigger to check the event added to the cart to update it. because the HTML can't auto-update when you click the button add to the cart

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly