How to add Cancel/Ok button within Minicart and remove popup
-
23-03-2021 - |
質問
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
解決
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>