When i click on the 'action showcart' of the minicart it is displayed in a 'dropdownDialog' just above. This is normal operation

Now I want to display the whole minicart in a modal which is displayed from the right like here ( this is the demo of quick cart of mageplaza)

enter image description here

Should I create a module that overloads the template of the minicart and change the call to it? how can i do that?

<div data-block="minicart" class="minicart-wrapper">

<a class="action showcart" data-trigger="quickcart"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?= /* @escapeNotVerified */ __('My Cart') ?></span>
    <span class="counter qty empty"
          data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
        <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
        <span class="counter-label">
        <!-- ko if: getCartParam('summary_count') -->
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart"
                data-bind="mageInit: {
                'type': 'custom',
                'modalClass': 'quickcart-dropdown',
                'trigger': '[data-trigger=quickcart]',
                'wrapperClass': 'quickcart-wrapper',
                'parentModalClass': 'minicart',
                'responsive': true,
                'responsiveClass': 'custom-slide',
                'overlayClass': 'dropdown-overlay modal-custom-overlay',
                'buttons': []
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        <?= $block->getChildHtml('minicart.addons') ?>
<?php else: ?>

I don't know how to do this, can you help me in the process


  • It's so easy. In Magento_Checkout, override minicart.phtml and content.html and default.html . You create a new js file with Modal function and in minicart.phtml you can call this function with > "afterRender: ModalFuction" in block-minicart and add you'r js file into head. Look this link for use AfterBinding mage2.pro/t/topic/1936
    – devmagento
    Jan 6, 2020 at 16:02


Your Answer

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

Browse other questions tagged or ask your own question.