How to show additional data on Mini-cart in Magento 2
In this blog we will learn how to show some additional information on Mini-cart. Lets suppose you want to show shipping charge, discount or tax information on mini cart then you can follow the steps mentioned in the blog. In this blog we will show 10% of the subtotal on the mini cart.
The data will get updated automatically every time when /customer/section/load?sections=cart is called which is while adding, removing or updating quantity of product.
Step 1. Create di.xml under Webkul/MiniCart/etc/frontend/ folder
<?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="extra_data" type="Webkul\MiniCart\Plugin\Checkout\CustomerData\Cart"/>
</type>
</config>
Step 2. Create Cart.php under Webkul/MiniCart/Plugin/Checkout/CustomerData/ folder
<?php
namespace Webkul\MiniCart\Plugin\Checkout\CustomerData;
class Cart {
public function afterGetSectionData(\Magento\Checkout\CustomerData\Cart $subject, array $result)
{
$result['extra_data'] = $result['subtotalAmount'] * 10 / 100;
return $result;
}
}
Step 3. Create checkout_cart_sidebar_total_renderers.xml under Webkul/MiniCart/view/frontend/layout/ folder
<?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">
<!--
here hook the template for extra data
-->
<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">Webkul_MiniCart/checkout/minicart/extra</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">Webkul_MiniCart/checkout/minicart/extra/data</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 4. Create extra.html under Webkul/MiniCart/view/frontend/web/template/checkout/minicart/ folder
<div class="extra">
<span class="label">
<!-- ko i18n: 'Your extra informations' --><!-- /ko -->
</span>
<!-- ko foreach: elems -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
Step 5. Create data.html under Webkul/MiniCart/view/frontend/web/template/checkout/minicart/extra/ folder
<div>
<span class="label">
<!-- ko i18n: '10% of subtotal is ' --><!-- /ko -->
</span>
<span class="price-wrapper" data-bind="html: cart().extra_data"></span>
</div>
That’s it, now when you add product to the cart you will see the extra informations.
If you want to update the mini cart after custom calculation or custom form submit then checkout our blog Update Mini Cart Magento2.
Happy coding 🙂 Feel free to comment if you have any issue.