0

In minicart of magento 2, when click on delete icon, confirm popup is open. after confirm, it take sometime time to delete. till the time we are able to click multiple time. and popup will come multiple time.

How to stop multiple time click on delete button?

 events['click ' + this.options.button.remove] =  function (event) {
             event.stopPropagation();
            confirm({

                content: self.options.confirmMessage,
                actions: {
                    /** @inheritdoc */
                    confirm: function () {
                        self._removeItem($(event.currentTarget));
                        location.reload();

                    },


                    /** @inheritdoc */
                    always: function (e) {
                        e.stopImmediatePropagation();
                    }
                }
            });

1 Answer 1

1

You can achieve this by extending magento sidebar widget using mixin.

For example you can create a custom module and following files.

view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/sidebar': {
                'Vendor_Module/js/sidebar-mixin': true
            }
        }
    }
};

view/frontend/web/js/sidebar-mixin.js

define(['jquery', 'mage/cookies'], function($) {
    return function(targetWidget) {
        $.widget('mage.sidebar', targetWidget, {
            _ajax: function (url, data, elem, callback) {
                $.extend(data, {
                    'form_key': $.mage.cookies.get('form_key')
                });

                $.ajax({
                    url: url,
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    context: this,
                    showLoader: true,

                    /** @inheritdoc */
                    beforeSend: function () {
                        elem.attr('disabled', 'disabled');
                    },

                    /** @inheritdoc */
                    complete: function () {
                        elem.attr('disabled', null);
                    }
                })
                    .done(function (response) {
                        var msg;

                        if (response.success) {
                            callback.call(this, elem, response);
                        } else {
                            msg = response['error_message'];

                            if (msg) {
                                alert({
                                    content: msg
                                });
                            }
                        }
                    })
                    .fail(function (error) {
                        console.log(JSON.stringify(error));
                    });
            }
        });

        return $.mage.sidebar;
    }
})

Here you can copy the entire _ajax function from original file "vendor/magento/module-checkout/view/frontend/web/js/sidebar.js" to above newly created file. What you can do is just add showLoader: true in ajax call so that user wont be able to click anywhere else during this ajax call completion.

Repalce Vendor and Module name with your newly created vendor/extension name.

Hope this helps.

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.