Shopify + CartJS updating total price with JS?

Question

I'm trying to update some data with AJAX on my Shopify theme, I'm also using the CartJS plugin. I have the counter working find but when I come to update the price it doesn't format correctly. It does add all the correct numbers but misses out any currency symbol or decimal point.

Here's the code snippet:

<div id="mini-cart">
    <h2>Basket Updated <span class="btn-close">x</span></h2>
    <p><strong class="item-count">{{ cart.item_count }}</strong> item(s). Costing <strong class="total-price">{{ cart.total_price | money }}</strong></p>
</div>

<script>
    $(document).on('cart.requestComplete', function(event, cart) {

        $('.item-count').html(cart.item_count);
        $('.total-price').html(cart.total_price);
    });
</script>

I think it has something to do with {{ cart.total_price | money }} {{ cart.total_price | money }} but whenever I add the | money | money bit into the JS the whole thing breaks. Is there a way to format that in the script?

Thanks!

Answer 1

You should be sure to load also the option_selection.js library in your theme.liquid here is the string to add:

{{ 'option_selection.js' | shopify_asset_url | script_tag }} 

Ref. https://cartjs.org/pages/guide#getting-started-setup

Answer 2

You need to add use data-cart-view to display values and products from your cart. Simply use:

<span data-cart-view>
Costing <strong class="total-price">{{ cart.total_price | money }}</strong>
</span>