When developing a custom solution, whether it is a theme or a module, developers need to implement logic that adds a new product or modifies the quantity of the product in the cart. It may seem a straightforward task, but developers often face an issue where changes in the mini cart aren’t reflected.
This article will explore the most frequent reason why the updated mini cart data may not be visible on the frontend and provide step-by-step instructions on how to reload Magento 2 Mini Cart programmatically.
Common Pitfalls in Setting Up Magento 2 Mini Cart Reload
The most frequent reason why developers may experience issues with programmatically reloading the Magento 2 mini cart usually lies within the Magento caching system, specifically in its private content rendering.
In Magento, private content refers to data that is specific to individual users. This includes things like the contents of the mini carts, wishlist items, account-specific notifications, etc.
The thing is that Magento caches information about the mini cart on the client side rather than in the full-page cache. So when the cart is updated from the backend, the frontend is not aware that the mini cart data has changed.
Generally, Magento 2 provides tools to invalidate private content – they inform the caching system that the private content data has been changed and needs to be refreshed or reloaded for the user session to reflect the latest updates.
Let’s explore in the next section how to update the Magento 2 mini cart programmatically, considering the private content rendering issue.
How to Update/Reload Mini Cart Programmatically
There are two ways to update the mini cart programmatically in Magento 2.
Method 1: Using sections.xml File
The Sections.xml file helps Magento identify actions that should trigger cache updates on the storefront side. The file must be located in the custom module within the etc/frontend folder and contain a structure similar to the following:
<?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="moduleFrontName/actionFolder/action">
<section name="cart"/>
</action>
</config>
In the action tag, replace the name attribute value with your module’s values.
Important Information:
This method works only for actions using the HTTP POST or PUT methods.
Method 2: Invalidate Cache With Custom JS
For this method, you need to add a new JavaScript file to the page via a custom module or theme. This will ensure that the mini cart updates when navigating to that page.
The content of the JavaScript file should have a structure similar to the following.
define(['Magento_Customer/js/customer-data'], function(customerData) {
let sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
})
This file starts the cache invalidation process for the mini cart, reloading the latest data from the backend.
Conclusion
The need for the mini cart update arises due to the Magento 2 caching system, which enhances site performance through client-side caching. To reload/update mini cart programmatically, Magento 2 provides two main tools: the sections.xml file and the custom js file that directly invalidates customerData and reflects changes on the frontend.
If you need any help implementing these methods, feel free to contact us.
