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, privacy policy and cookie policy

Browse other questions tagged or ask your own question.