Magento 2 : How to add Coupon Code Section In mini cart like in the shopping cart

Question

I want to display coupon code section inside the minicart with same functionality as shopping cart page.

Answer 1

Please copy minicart.phtml from your vendor files:

vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml

And overwrite it in your custom theme:

app/design/VenderName/ThemeName/Magento_Checkout/templates/cart/minicart.phtml

After that, add the following line to include the coupon code HTML:

<?php echo $this->getLayout()->createBlock(\Magento\Checkout\Block\Cart\Coupon::class)->setTemplate("Magento_Checkout::cart/coupon.phtml")->toHtml();?>

Example File: minicart.phtml (Magento version 2.4.6)

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var $block \Magento\Checkout\Block\Cart\Sidebar */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>

<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?= $block->escapeUrl($block->getShoppingCartUrl()) ?>"
       data-bind="scope: 'minicart_content'">
        <span class="text"><?= $block->escapeHtml(__('My Cart')) ?></span>
        <span class="counter qty empty"
              data-bind="css: { empty: !!getCartParam('summary_count') == false && !isLoading() },
               blockLoader: isLoading">
            <span class="counter-number">
                <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count').toLocaleString(window.LOCALE) --><!-- /ko -->
                <!-- /ko -->
            </span>
            <span class="counter-label">
            <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count').toLocaleString(window.LOCALE) --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()):?>
        <div class="block block-minicart"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
            <?php // custom Coupon code ?>
            <?php echo $this->getLayout()->createBlock(\Magento\Checkout\Block\Cart\Coupon::class)->setTemplate("Magento_Checkout::cart/coupon.phtml")->toHtml();?>
        </div>
    <?php else: ?>
        <?php $scriptString = <<<script
            require(['jquery'], function ($) {
                $('a.action.showcart').on('click', function() {
                    $(document.body).trigger('processStart');
                });
            });
script;
        ?>
        <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
    <?php endif ?>
    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], 'window.checkout = ' .
     /* @noEscape */ $block->getSerializedConfig(), false); ?>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= $block->escapeJs(
                $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif'))
            ) ?>"
        }
    }
    </script>
</div>

OUTPUT: