Magento 2: How to Update Mini Cart?

Mini Cart displays a selection of the items added to the cart, as well as the subtotal and update and remove item options. Users can see these details without refreshing the page.

If we look into the module-checkout module in the vendor directory, we can see that sections.xml is implemented to render Mini Cart on a particular controller path. Magento uses sections.xml for private content caching.

To update such sections, we just need to invalidate them. In other words, we will invalidate the private content cache, so Magento will refresh it to validate the private content cache.

We will require to update the cart in the scenarios given below:

1. When we submit the form.
2. When we don’t submit form

How to Update the Cart When We Submit the form

It is pretty easy to update the mini cart when we submit the form. We require creating sections.xml inside the etc/frontend directory of our module.

We need to pair the action tag with the attribute name. The action tag attribute consists of the path of the action of our controller, with the front name defined in routes.xml.

The action tag consists of another sub-tag section. The section tag consists of an attribute name. We just need to pass the name of the section, which we will invalidate upon submitting the form. In this case, the cart must be passed as an argument to the name attribute. 

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="route/controler/action">
        <section name="cart"/>
    </action>
</config>

How to Update the Cart When We don’t Submit the form

In some scenarios, we don’t submit the form but must update the mini-cart. For example, we use an event listener or the API required to update the mini-cart to update the quote.

In such cases, we need to update the mini cart using JS. We will invalidate the section using JS. Magento 2 uses customer-data.js for private content caching. We can invalidate sections using customer-data.js in order to update the sections without affecting other parts of the page. It will allow us to refresh the section without reloading the page.

Let’s take an example from the template file. How can we remove the mini-cart from the PHTML file?

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

So simple, although I have put the code directly in the function of the require JS, however, make sure you use the below code in certain events only. Otherwise, it will keep refreshing the mini-cart.

var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);

That’s it. We will see the private content caching in detail in a future blog. Stay tuned and keep subscribing to the SB Dev Blog.

Check out My Git Repo.

Note: Please verify the code of this blog and the relevant git repository before using it in production.

🙂 HAPPY CODING 🙂