How to Show Additional Data in Magento 2 Mini Cart
The mini cart in Magento 2 store shows the gist of items in the cart. It is enabled by default and appears when you click the cart icon at the top of the page.
The default Magento 2 mini cart is something like this:
However, based on the modern business requirements, if you want to show additional data in Magento 2 mini cart, follow the solution given in this post.
You may add a button, or display VAT amount, coupon code, discount availed, etc. that is not included in the default mini cart.
Method to Show Additional Data in Magento 2 Mini Cart:
Create di.xml under Vendor\Module\etc\frontend
1 2 3 4 5 6 | <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Checkout\CustomerData\Cart"> <plugin name="minicart_content" type="Vendor\Module\Plugin\Checkout\CustomerData\Cart"/> </type> </config> |
Create cart.php under Vendor\Module\Plugin\Checkout\CustomerData
1 2 3 4 5 6 7 8 9 10 | <?php namespace Vendor\Module\Plugin\Checkout\CustomerData; class Cart { public function afterGetSectionData(\Magento\Checkout\CustomerData\Cart $subject, array $result) { $result['content'] = 'test'; // Add extra content here return $result; } } |
Create checkout_cart_sidebar_total_renderers.xml under Vendor\Module\view\frontend\layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="minicart"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="minicart_content" xsi:type="array"> <item name="children" xsi:type="array"> <item name="subtotal.container" xsi:type="array"> <item name="children" xsi:type="array"> <item name="extra" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Vendor_Module/checkout/minicart/content</item> </item> <item name="children" xsi:type="array"> <item name="subtotal.totals" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/checkout/minicart/subtotal/totals</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Vendor_Module/checkout/minicart/content/data</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page> |
Create content.html under Vendor\Module\view\frontend\web\template\checkout\minicart
1 2 3 4 5 6 7 8 | <div class="content"> <span class="label"> <!-- ko i18n: 'Extra Content' --><!-- /ko --> </span> <!-- ko foreach: elems --> <!-- ko template: getTemplate() --><!-- /ko --> <!-- /ko --> </div> |
Create data.html under Vendor/Module/view/frontend/web/template/checkout/minicart/content
1 2 3 4 5 6 | <div> <span class="label"> <!-- ko i18n: 'Extra content is ' --><!-- /ko --> </span> <span class="custom-wrapper" data-bind="html: cart().content_data"></span> </div> |
That’s it.
Feel free to mention any doubts in the solution using the Comments section below. I’d be glad to help you out.
Also, do share the post with the Magento Community via social media.
Thank you.
