How to add Cancel/Ok button within Minicart and remove popup

Question

I want to remove the delete button that is in below screenshot

And add to button Cancel/Ok within minicart, not in popup like magneto by default functionality. just want to add button on mincart not on popup, remove popup.

kindly help me out!

just one thing i want add a massage of Are you sure you want to Remove after clicking the

Remove item

button

Answer 1

First of all please override sidebar.js file in your custom theme.

So In theme, add a js file sidebar.js to app\design\frontend\[NAMESPACE]\[THEME]\Magento_Checkout\web\js\sidebar.js if not exist then copy form vendor\magento\module-checkout\view\frontend\web\js\sidebar.js

Now go to button.remove function in sidebar.js on line number 89 approx, and replace the whole function with the following code.

/**
 * @param {jQuery.Event} event
 */
events['click ' + this.options.button.remove] =  function (event) {
    event.stopPropagation();
    /* Start code ok/cancel code */
    var ok = document.createElement("button");
    ok.innerHTML = "ok";

    var confirmtext = document.createElement("div");
    confirmtext.innerHTML = $.mage.__('Are you sure you would like to remove this item from the shopping cart?')

    var cancel = document.createElement("button");
    cancel.innerHTML = "cancel";

    confirmtext.classList.add("rmprod");
    ok.classList.add("rmprod");
    cancel.classList.add("rmprod");

    var prnt = $(event.target).parents('.product-item-details');

    if(!prnt.has('.rmprod').length){
        prnt.append(confirmtext);
        prnt.append(ok);
        prnt.append(cancel);
    }

    ok.addEventListener ("click", function() {
      self._removeItem($(event.currentTarget));
    });

    cancel.addEventListener ("click", function() {
      $(self.options.targetElement).dropdownDialog('close');
      prnt.children('.rmprod').remove();
    });

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

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

You can manage remove button from following file in your custom theme.

/app/design/frontend/[NAMESPACE]/[THEME]/Magento_Checkout/web/template/minicart/item/default.html

find the following in your default.html file.
You can change the text following code and remove the button style using CSS.

<div class="secondary">
   <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}" class="action delete">
       <span data-bind="i18n: 'Remove Item'"></span>
   </a>
</div>