0

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

4
  • You Can add this code in minicart.phtml echo $this->getLayout()->createBlock('Magento\Checkout\Block\Cart\Coupon')->setTemplate('Magento_Checkout::cart/coupon.phtml')->toHtml(); But this has to be outside minicart-content-wrapper "div" else there will be css conflicts and Apply coupon code option won't work.
    – devhs
    Mar 31, 2021 at 7:07
  • @devhs Thank you! but i want to add this section inside the minicart. Mar 31, 2021 at 7:10
  • You can add a simple text field & a button in mini cart first, then on click button you can call api (which can be custom or default) & process the data accordingly.
    – devhs
    Mar 31, 2021 at 7:13
  • @devhs can you please share the answer here in detail if you;ve used it before. Mar 31, 2021 at 7:21

1 Answer 1

2

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: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.