Show empty price-label (£0.00) in minicart when empty

Question

I want to show the price next to the minicart icon even if it is zero/empty. I have added this code to Magento_Checkout/templates/cart/minicart.phtml

<span class="price-label" data-bind="html: getCartParam('subtotal')"></span>

but that only shows the price when an item is added to the cart and will show £0.00 when the item is removed. How do I get it to show zero without having to add to and remove an item?

Answer 1

Here I will walk you through how that getCartParam function work

1. We know it is defined in Magento_Checkout/js/view/minicart.js file
2. And the function is simply return this.cart['cart_param_name'], in this case, cart_param_name = subtotal
3. So we know we have to put the data into this.cart. This this.cart is just a simple javascript object, it is defined in the beginning of this minicart.js file
4. Searching this.cart in this whole file, we know it is updated via the "update" function, and update function is called from initialize function
5. The code is as follow

var self = this,
    cartData = customerData.get('cart');

this.update(cartData());

So we need to update the cartData variable

6. customerData is populated via section, which I recommend you read this answer here. Briefly, whenever you make a non-get request, the correspond section will get update

From this point, we know why you never see it updated, because when the page load, no request been made, or more precisely, no requests that match the cart section has been made

Here I gave you 4 options to resolve your problem:

• Change the html directly so that when getCartParam['subtotal'] is undefined, print out 0 (knockout binding can do this)
• Same as above, but you modify the return value of getCartParam function
• Always trigger a request to cart section when the page first load so that it will reload the cart for you
• From the link above, we know Magento's customerData also read data from localstorage. So you can add a script so that it will modify the localstorage to your desired state

Hope that helps you.