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 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 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 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");
    });
});

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.