To add a new button, text in minicart. Add a node extra_info 

See how to add button text in minicart video

Get custom attribute in Magento 2 Minicart

https://www.magevision.com/blog/post/get-a-product-attribute-in-mini-cart-magento-2

https://shaneblandford.medium.com/magento-2-add-attributes-to-mini-cart-list-d583895a19db

 

Github module for Minicart

https://github.com/vijayrami/Magelearn_AdvanceCart

 

 

 

Magento 2's minicart can be customized to include several additional components or content items, each serving different purposes. Here are some commonly used components or areas you can add to the minicart:

  1. Mini Cart Summary:

    • Component: Magento_Checkout/js/view/minicart/subtotal/totals
    • Purpose: Displays the subtotal, total discounts, taxes, or shipping costs.
    • Example Template: Magento_Checkout/minicart/summary

  2. Custom Promotions Banner:

    • Component: Custom JavaScript component, e.g., Vendor_Module/js/view/promotions-banner
    • Purpose: Display promotional messages, discounts, or offers within the minicart.
    • Template: Vendor_Module/minicart/promotions-banner

  3. Cross-sell Products:

    • Component: Magento_Checkout/js/view/minicart/crosssell
    • Purpose: Recommends related or cross-sell products based on items in the cart.
    • Template: Magento_Checkout/minicart/crosssell

  4. Discount/Coupon Code Section:

    • Component: Custom component, e.g., Vendor_Module/js/view/discount-code
    • Purpose: Allows customers to enter a discount or promo code directly in the minicart.
    • Template: Vendor_Module/minicart/discount-code

  5. Loyalty Points Balance:

    • Component: Custom component, e.g., Vendor_Module/js/view/loyalty-points
    • Purpose: Shows the loyalty points balance and allows redemption in the minicart.
    • Template: Vendor_Module/minicart/loyalty-points

  6. Estimated Shipping Cost:

    • Component: Custom component, e.g., Vendor_Module/js/view/estimated-shipping
    • Purpose: Provides an estimate of shipping costs based on the items in the cart.
    • Template: Vendor_Module/minicart/estimated-shipping

  7. Gift Options:

    • Component: Magento_Checkout/js/view/gift-options
    • Purpose: Allows customers to add gift options, such as gift wrapping or messages, to the order.
    • Template: Magento_Checkout/minicart/gift-options

  8. Wishlist Add Button:

    • Component: Custom component, e.g., Vendor_Module/js/view/add-to-wishlist
    • Purpose: Adds an option to move products to the wishlist from the minicart.
    • Template: Vendor_Module/minicart/add-to-wishlist

  9. Reward Points Information:

    • Component: Magento_Reward/js/view/checkout/reward
    • Purpose: Displays reward points and lets customers apply them to the cart.
    • Template: Magento_Reward/checkout/reward

  10. Product Quantity Update Buttons:

    • Component: Magento_Checkout/js/view/minicart/quantity
    • Purpose: Allows customers to update the quantity of items directly in the minicart.
    • Template: Magento_Checkout/minicart/quantity

Each of these components can be added by defining a custom jsLayout structure in your XML files, allowing for easy customization of the minicart experience. The template files can further extend these functionalities as needed.

 

For example;

To add a promotion banner in the Magento 2 minicart, you can define a new component in your XML layout file (default.xml) under the minicart block. Here’s an example XML code to add a custom promotion banner component.

 

<?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>
        <!-- Reference the minicart block -->
        <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">
                                <!-- Add promotion banner inside minicart_content -->
                                <item name="promotion_banner" xsi:type="array">
                                    <item name="component" xsi:type="string">Vendor_Module/js/view/promotion-banner</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Vendor_Module/minicart/promotion-banner</item>
                                    </item>
                                    <item name="displayArea" xsi:type="string">promotionBanner</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Explanation

  1. Component: Vendor_Module/js/view/promotion-banner

    • This JavaScript component is responsible for managing the promotion banner logic.
    • Create a JavaScript file in your module at view/frontend/web/js/view/promotion-banner.js.

  2. Template: Vendor_Module/minicart/promotion-banner

    • This template file renders the HTML for the promotion banner.
    • Create a template file at view/frontend/web/template/minicart/promotion-banner.html.

  3. displayArea: promotionBanner

    • Defines where in the minicart layout the banner will appear.

 

JavaScript Component (promotion-banner.js)

Create the JavaScript file promotion-banner.js to define the banner’s behavior.

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/minicart/promotion-banner'
        },
        initialize: function () {
            this._super();
            // Custom initialization logic (e.g., fetch promotions)
        }
    });
});

 

Template File (promotion-banner.html)

Create the HTML template file promotion-banner.html with the content for the banner.

<div class="minicart-promotion-banner">
    <p>Get 20% off on orders above $50! Use code: SAVE20</p>
</div>

 

With this setup, the promotion banner will display in the minicart with the specified content

 

\vendor\magento\module-checkout\CustomerData\DefaultItem.php

 

vendor\magento\module-checkout\view\frontend\layout\checkout_cart_sidebar_item_renderers.xml