Magento 2 : Remove Confirmation Popup when deleting products from the mini cart

Question

I created mixin. When I comment out confirm({}) in core sidebar.js it works as expected, but my mixin doest work. It does't remove popup. requirejs-config.js:

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

Created js/sidebar-mixin.js

define([
    'jquery',
], function ($) {
    'use strict';

    return function (widget) {
        $.widget('mage.sidebar', widget, {
            _initContent: function () {
                this._super();
                var self = this,
                    events = {};

                this.element.decorate('list', this.options.isRecursive);

                /**
                 * @param {jQuery.Event} event
                 */
                events['click ' + this.options.button.close] = function (event) {
                    event.stopPropagation();
                    $(this.options.targetElement).dropdownDialog('close');
                };
                events['click ' + this.options.button.checkout] = $.proxy(function () {
                    var cart = customerData.get('cart'),
                        customer = customerData.get('customer'),
                        element = $(this.options.button.checkout);

                    if (!customer().firstname && cart().isGuestCheckoutAllowed === false) {
                        // set URL for redirect on successful login/registration. It's postprocessed on backend.
                        $.cookie('login_redirect', this.options.url.checkout);

                        if (this.options.url.isRedirectRequired) {
                            element.prop('disabled', true);
                            location.href = this.options.url.loginUrl;
                        } else {
                            authenticationPopup.showModal();
                        }

                        return false;
                    }
                    element.prop('disabled', true);
                    location.href = this.options.url.checkout;
                }, this);

                /**
                 * @param {jQuery.Event} event
                 */
                events['click ' + this.options.button.remove] =  function (event) {
                    event.stopPropagation();
                    this._removeItem($(event.currentTarget));
                    // confirm({
                    //     content: this.options.confirmMessage,
                    //     actions: {
                    //         /** @inheritdoc */
                    //         confirm: function () {
                    //             this._removeItem($(event.currentTarget));
                    //         },
                    //
                    //         /** @inheritdoc */
                    //         always: function (e) {
                    //             e.stopImmediatePropagation();
                    //         }
                    //     }
                    // });
                };

                /**
                 * @param {jQuery.Event} event
                 */
                events['keyup ' + this.options.item.qty] = function (event) {
                    this._showItemButton($(event.target));
                };

                /**
                 * @param {jQuery.Event} event
                 */
                events['change ' + this.options.item.qty] = function (event) {
                    this._showItemButton($(event.target));
                };

                /**
                 * @param {jQuery.Event} event
                 */
                events['click ' + this.options.item.button] = function (event) {
                    event.stopPropagation();
                    this._updateItemQty($(event.currentTarget));
                };

                /**
                 * @param {jQuery.Event} event
                 */
                events['focusout ' + this.options.item.qty] = function (event) {
                    this._validateQty($(event.currentTarget));
                };

                this._on(this.element, events);
                this._calcHeight();
            },

        });
        return $.mage.sidebar;
    }
});

Answer 1

copy your core file code here

app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Checkout/web/js/sidebar.js

And replace the following code:

From:

/**
 * @param {jQuery.Event} event
 */
events['click ' + this.options.button.remove] =  function (event) {
    event.stopPropagation();
    confirm({
        content: self.options.confirmMessage,
        actions: {
            /** @inheritdoc */
            confirm: function () {
                self._removeItem($(event.currentTarget));
            },

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

To:

/**
 * @param {jQuery.Event} event
 */
events['click ' + this.options.button.remove] =  function (event) {
    event.stopPropagation();
    self._removeItem($(event.currentTarget));
};

Answer 2

According to your requirejs-config.js file, your mixin resides into the Magento_Checkout module. If your mixin is in .../web/js/sidebar-mixin.js then your rewrite your requirejs-config.js with the following content:

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

And rewrite your mixin file like shown below:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'Magento_Customer/js/model/authentication-popup',
    'jquery-ui-modules/widget',
    'mage/decorate'
], function ($, authenticationPopup, customerData) {
    'use strict';

    var sidebarWidgetMixin = {
        /**
         * @private
         */
        _initContent: function () {
            var self = this,
                events = {};

            this.element.decorate('list', this.options.isRecursive);

            /**
             * @param {jQuery.Event} event
             */
            events['click ' + this.options.button.close] = function (event) {
                event.stopPropagation();
                $(self.options.targetElement).dropdownDialog('close');
            };
            events['click ' + this.options.button.checkout] = $.proxy(function () {
                var cart = customerData.get('cart'),
                    customer = customerData.get('customer'),
                    element = $(this.options.button.checkout);

                if (!customer().firstname && cart().isGuestCheckoutAllowed === false) {
                    // set URL for redirect on successful login/registration. It's postprocessed on backend.
                    $.cookie('login_redirect', this.options.url.checkout);

                    if (this.options.url.isRedirectRequired) {
                        element.prop('disabled', true);
                        location.href = this.options.url.loginUrl;
                    } else {
                        authenticationPopup.showModal();
                    }

                    return false;
                }
                element.prop('disabled', true);
                location.href = this.options.url.checkout;
            }, this);

            /**
             * @param {jQuery.Event} event
             */
            events['click ' + this.options.button.remove] =  function (event) {
                event.stopPropagation();
                self._removeItem($(event.currentTarget));
            };

            /**
             * @param {jQuery.Event} event
             */
            events['keyup ' + this.options.item.qty] = function (event) {
                self._showItemButton($(event.target));
            };

            /**
             * @param {jQuery.Event} event
             */
            events['change ' + this.options.item.qty] = function (event) {
                self._showItemButton($(event.target));
            };

            /**
             * @param {jQuery.Event} event
             */
            events['click ' + this.options.item.button] = function (event) {
                event.stopPropagation();
                self._updateItemQty($(event.currentTarget));
            };

            /**
             * @param {jQuery.Event} event
             */
            events['focusout ' + this.options.item.qty] = function (event) {
                self._validateQty($(event.currentTarget));
            };

            this._on(this.element, events);
            this._calcHeight();
        },
    };


    return function (targetWidget) {
        $.widget('mage.sidebar', targetWidget, sidebarWidgetMixin);

        return $.mage.sidebar;
    };
});

I did it and it worked like a charm.