1

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

enter image description here

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.

enter image description here

kindly help me out!

enter image description here

enter image description here

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

Remove item

button

| improve this question | | | | |
  • If you remove delete button then which action you want to trigger for Cancel and Ok button? – Dhaduk Mitesh Dec 16 '19 at 7:19
  • i just want to remove the popup, and add that action on the minicart, like we have a button on minicart name "Remove" on clicking the remove button it show two option for "cancel" and "Ok" within minicart not on popup, as simple as that, kindly help me out im very thankfull of you:) – Munesh Jalwani Dec 16 '19 at 7:23
  • dont remove action button just want to remove the popup and trigger the same remove action of cancel and ok within the mincart – Munesh Jalwani Dec 16 '19 at 7:25
  • Why do you need to add Cancel and OK button over there? you just need to bypass confirmation popup right? I think you don't need to put that buttons in minicart – Aasim Goriya Dec 16 '19 at 8:30
  • i just need to put on popup button in minicart not needed the popup, after click on the remove button on minicart, there appears two button of OK and Confirm on mincart for the action trigger for delete the product like as in json popup doing @AasimGoriya – Munesh Jalwani Dec 16 '19 at 8:35
7
+100

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>
| improve this answer | | | | |
  • 1
    Yes, I have tried it with my local code and its working fine, I have removed code from my end so I don't have a screenshot for now, but you can try this code and it will definitely work, please try first and then let me know if you have any issue. – Aasim Goriya Dec 16 '19 at 9:34
  • 1
    Yes, it works, checked – Padhiyar Gaurang Dec 16 '19 at 9:59
  • 1
    @MuneshJalwani you can just add a message before append ok button like this $(event.target).parents('.product-item-details').append('<label>are you sure you want to remove?</label>'); please see my updated ans for more information. – Aasim Goriya Dec 16 '19 at 10:11
  • 1
    I have added a label with translation. Hope you don't mind @AasimGoriya – Padhiyar Gaurang Dec 16 '19 at 10:14
  • 2
    @MuneshJalwani Issue resolved please try updated code now, and now all the things have been completed so please accept my answer and upvote it so it will help to others Thanks – Aasim Goriya Dec 16 '19 at 13:37

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.