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:
When you want to display the correct product title after converting the html equivalent to the characters but the actual result differs is where you need to have the solution to display product titles with special characters in Magento 2. 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.
Just like showing additional data in mini cart you can also restrict quantity update from minicart in Magento 2 this will be helpful when you have set condition of limiting the order quantity.
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.
Prev
Magento 2.4.4 Version Released! – Read What’s New Here
Solved: Category Image Deletes After Initial Save in Magento 2
Next