1

In default magento checkout page, mobile version, clicking the minicart icon opens a modal containing cart contents.

When checkout page is loaded for the first time, clicking that minicart icon gives javascript error:

Uncaught TypeError: No method named "openModal"
    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.o._jQueryInterface [as modal] (bootstrap.min.js:6)
    at Object.show (sidebar.js:24)
    at UiClass.showSidebar (estimation.js:44)
    at HTMLButtonElement.<anonymous> (knockout.js:4255)
    at HTMLButtonElement.dispatch (jquery.js:5226)
    at HTMLButtonElement.elemData.handle (jquery.js:4878)

After refreshing page, modal opens normally.

Modal is defined in file vendor/magento/module-checkout/view/frontend/web/template/sidebar.html:

<div id="opc-sidebar"
     data-bind="afterRender:setModalElement, mageInit: {
    'Magento_Ui/js/modal/modal':{
        'type': 'custom',
        'modalClass': 'opc-sidebar opc-summary-wrapper',
        'wrapperClass': 'checkout-container',
        'parentModalClass': '_has-modal-custom',
        'responsive': true,
        'responsiveClass': 'custom-slide',
        'overlayClass': 'modal-custom-overlay',
        'buttons': []
    }}">

    <!-- ko foreach: getRegion('summary') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="opc-block-shipping-information">
        <!-- ko foreach: getRegion('shipping-information') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
</div>

Is there any way to fix this and force Magento_Ui/js/modal/modal to load earlier in page? Any ideas?

  • I can see that this could be due to a custom module that overrides cart templates particularly the mini cart template – fmsthird May 6 '19 at 10:53
  • I'm using a custom theme but default magento checkout. Theme demo website works fine, so I guess that it's not responsible for the issue.The thing is that error occurs only the first time page is loaded and it's resolved after refreshing page. Do you have any ideas about that? – zekia May 7 '19 at 9:04
  • I think the mini cart template is being overridden somewhere else. You can try to disable any custom module and check if it will resolve the issue – fmsthird May 7 '19 at 9:11
0

I wasn't able to find the casue of this, so I fixed it by forcing modal to work using javascript:

require(['jquery', 'Magento_Ui/js/modal/modal'], function($){
    $(document).on('click', '#checkout_order_sum_mobile', function(e){
        $(".opc-sidebar.opc-summary-wrapper").toggleClass("_show");
    });
});
| improve this answer | |
  • In which file I am using this code to fix this issue? – Purushotam Sharma Apr 14 at 5:20
  • @PurushotamSharma : A bit late, but it would work in any .phtml file. If you do experience the same particular problem (only on the checkout part as OP), it would be better to include the snippet of code only into a related .phtml. It depends of your theme / configuration, but something like app/design/themeVendor/themeName/Magento_Checkout/templates/onepage.phtml should do the job. – rou6e Jul 1 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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