Solved

Need help adding a dynamic total cart value in header

vincedenis
Shopify Partner
6 0 0

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.

Accepted Solution (1)
enzoyuna2023
Shopify Partner
36 10 5

This is an 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

enzoyuna2023_0-1700713883530.png

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

enzoyuna2023_1-1700713984316.png

 

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

enzoyuna2023_2-1700714108326.png

...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.  🙂 



Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee

View solution in original post

Replies 4 (4)

enzoyuna2023
Shopify Partner
36 10 5

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

Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee
vincedenis
Shopify Partner
6 0 0

Hi Enzoyuna, we are using dawn theme

enzoyuna2023
Shopify Partner
36 10 5

This is an 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

enzoyuna2023_0-1700713883530.png

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

enzoyuna2023_1-1700713984316.png

 

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

enzoyuna2023_2-1700714108326.png

...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.  🙂 



Available for hire : novayadi85[at]gmail.com
Chat on WhatsApp
Buy me coffee

PageFly-Oliver
Globetrotter
721 145 136

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.