Back to Top

How to show additional data on Mini-cart in Magento 2

Updated 27 February 2024

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

Searching for an experienced
Magento 2 Company ?
Find out More
<?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.

cart image

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.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home