vendor\\magento\\module-checkout\\view\\frontend\\web\\template\\minicart\\item\\default.html<\/p>\n
Copy to default.html<\/p>\n
app\\design\\yourvendor\\yourtheme\\Magento_Checkout\\web\\template\\minicart\\item\\default.html<\/p>\n
add + and – button as span tag in line number 74 and 84.<\/p>\n
Or insert red line code
\n[code language=”html”]
\n<!–
\n\/**
\n * Copyright \u00a9 Magento, Inc. All rights reserved.
\n * See COPYING.txt for license details.
\n *\/
\n–>
\n<li class="item product product-item" data-role="product-item">
\n <div class="product">
\n <div class="product-item-photo">
\n <!– ko if: product_has_url –>
\n <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
\n <!– ko foreach: $parent.getRegion(‘itemImage’) –>
\n <!– ko template: {name: getTemplate(), data: item.product_image} –><!– \/ko –>
\n <!– \/ko –>
\n <\/a>
\n <!– \/ko –>
\n <!– ko ifnot: product_has_url –>
\n <span class="product-item-photo">
\n <!– ko foreach: $parent.getRegion(‘itemImage’) –>
\n <!– ko template: {name: getTemplate(), data: item.product_image} –><!– \/ko –>
\n <!– \/ko –>
\n <\/span>
\n <!– \/ko –>
\n <div class="product actions">
\n <!– ko if: is_visible_in_site_visibility –>
\n <div class="primary">
\n <a data-bind="attr: {href: configure_url, title: $t(‘Edit item’)}" class="action edit">
\n <span data-bind="i18n: ‘Edit’"><\/span>
\n <\/a>
\n <\/div>
\n <!– \/ko –>
\n <div class="secondary">
\n <a href="#" data-bind="attr: {‘data-cart-item’: item_id, title: $t(‘Remove item’)}"
\n class="action delete">
\n <span data-bind="i18n: ‘Remove’"><\/span>
\n <\/a>
\n <\/div>
\n <\/div>
\n <\/div>
\n <div class="product-item-details">
\n <strong class="product-item-name">
\n <!– ko if: product_has_url –>
\n <a data-bind="attr: {href: product_url}, html: product_name"><\/a>
\n <!– \/ko –>
\n <!– ko ifnot: product_has_url –>
\n <!– ko text: product_name –><!– \/ko –>
\n <!– \/ko –>
\n <\/strong><\/p>\n
<!– ko if: options.length –>
\n <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}’>
\n <span data-role="title" class="toggle"><!– ko i18n: ‘See Details’ –><!– \/ko –><\/span><\/p>\n
<div data-role="content" class="content">
\n <strong class="subtitle"><!– ko i18n: ‘Options Details’ –><!– \/ko –><\/strong>
\n <dl class="product options list">
\n <!– ko foreach: { data: options, as: ‘option’ } –>
\n <dt class="label"><!– ko text: option.label –><!– \/ko –><\/dt>
\n <dd class="values">
\n <!– ko if: Array.isArray(option.value) –>
\n <span data-bind="html: option.value.join(‘<br>’)"><\/span>
\n <!– \/ko –>
\n <!– ko if: (!Array.isArray(option.value) && [‘file’, ‘html’].includes(option.option_type)) –>
\n <span data-bind="html: option.value"><\/span>
\n <!– \/ko –>
\n <!– ko if: (!Array.isArray(option.value) && ![‘file’, ‘html’].includes(option.option_type)) –>
\n <span data-bind="text: option.value"><\/span>
\n <!– \/ko –>
\n <\/dd>
\n <!– \/ko –>
\n <\/dl>
\n <\/div>
\n <\/div>
\n <!– \/ko –><\/p>\n
<div class="product-item-pricing">
\n <!– ko if: canApplyMsrp –><\/p>\n
<div class="details-map">
\n <span class="label" data-bind="i18n: ‘Price’"><\/span>
\n <span class="value" data-bind="i18n: ‘See price before order confirmation.’"><\/span>
\n <\/div>
\n <!– \/ko –>
\n <!– ko ifnot: canApplyMsrp –>
\n <!– ko foreach: $parent.getRegion(‘priceSidebar’) –>
\n <!– ko template: {name: getTemplate(), data: item.product_price, as: ‘price’} –><!– \/ko –>
\n <!– \/ko –>
\n <!– \/ko –><\/p>\n
<div class="details-qty qty">
\n <label class="label" data-bind="i18n: ‘Qty’, attr: {
\n for: ‘cart-item-‘+item_id+’-qty’}"><\/label>
\n <span data-bind="attr: { id: item_id }" class="minus" >-<\/span>
\n <input data-bind="attr: {
\n id: ‘cart-item-‘+item_id+’-qty’,
\n ‘data-cart-item’: item_id,
\n ‘data-item-qty’: qty,
\n ‘data-cart-item-id’: product_sku
\n }, value: qty"
\n type="number"
\n size="4"
\n class="item-qty cart-item-qty">
\n <span data-bind="attr: { id: item_id }" class="plus" >+<\/span>
\n <button data-bind="attr: {
\n id: ‘update-cart-item-‘+item_id,
\n ‘data-cart-item’: item_id,
\n title: $t(‘Update’)
\n }"
\n class="update-cart-item"
\n style="display: none">
\n <span data-bind="i18n: ‘Update’"><\/span>
\n <\/button>
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div>
\n <div class="message notice" if="$data.message">
\n <div data-bind="text: $data.message"><\/div>
\n <\/div>
\n<\/li><\/p>\n
[\/code]<\/p>\n
override\u00a0 vendor\\magento\\module-checkout\\view\\frontend\\web\\js\\sidebar.js<\/p><\/blockquote>\n to<\/p>\n app\\design\\yourvendor\\yourtheme\\Magento_Checkout\\web\\js\\sidebar.js<\/p><\/blockquote>\n [code language=”javascript”]<\/p>\n \/** define([ ‘jquery’, ‘Magento_Customer\/js\/model\/authentication-popup’, ‘Magento_Customer\/js\/customer-data’, ‘Magento_Ui\/js\/modal\/alert’, ‘Magento_Ui\/js\/modal\/confirm’, ‘underscore’, ‘jquery\/ui’, ‘mage\/decorate’, ‘mage\/collapsible’, ‘mage\/cookies’ ], function ($, authenticationPopup, customerData, alert, confirm, _) { ‘use strict’;<\/p>\n $.widget(‘mage.sidebar’, { \/** \/** \/** this.element.decorate(‘list’, this.options.isRecursive);<\/p>\n \/** if (!customer().firstname && cart().isGuestCheckoutAllowed === false) { if (this.options.url.isRedirectRequired) { return false; \/** \/** @inheritdoc *\/ \/** \/** \/** \/** \/** \/** this._on(this.element, events); \/** if (this.scrollHeight > list.innerHeight()) { \/** if (this._isValidQty(itemQty, elem.val())) { \/** \/** if (!this._isValidQty(itemQty, elem.val())) { \/** $(‘#update-cart-item-‘ + itemId).hide(‘fade’, 300); \/** this._ajax(this.options.url.update, { \/** if (!_.isUndefined(productData)) { if (window.location.href === this.shoppingCartUrl) { \/** this._ajax(this.options.url.remove, { \/** if (!_.isUndefined(productData)) { \/** \/** $.ajax({ \/** @inheritdoc *\/ \/** @inheritdoc *\/ if (response.success) { if (msg) { \/** self.scrollHeight = 0; if ($(this).find(‘.options’).length > 0) { if (counter– > 0) { target.parent().height(height); return $.mage.sidebar; [\/code]<\/p>\n","protected":false},"excerpt":{"rendered":" vendor\\magento\\module-checkout\\view\\frontend\\web\\template\\minicart\\item\\default.html Copy to default.html app\\design\\yourvendor\\yourtheme\\Magento_Checkout\\web\\template\\minicart\\item\\default.html add + and – button as span tag in line number 74 and 84. Or…<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,1],"tags":[25,24,26],"class_list":["post-102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-php","tag-ajax","tag-magento2","tag-phtml"],"acf":[],"_links":{"self":[{"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atish.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=102"}],"version-history":[{"count":10,"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/posts\/102\/revisions\/472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/atish.co.in\/index.php?rest_route=\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/atish.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atish.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atish.co.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}sidebar.js<\/code>\u00a0from<\/p>\n
\n * Copyright \u00a9 Magento, Inc. All rights reserved.
\n * See COPYING.txt for license details.
\n *\/<\/p>\n
\n options: {
\n isRecursive: true,
\n minicart: {
\n maxItemsVisible: 3
\n }
\n },
\n scrollHeight: 0,
\n shoppingCartUrl: window.checkout.shoppingCartUrl,<\/p>\n
\n * Create sidebar.
\n * @private
\n *\/
\n _create: function () {
\n this._initContent();
\n },<\/p>\n
\n * Update sidebar block.
\n *\/
\n update: function () {
\n $(this.options.targetElement).trigger(‘contentUpdated’);
\n this._calcHeight();
\n this._isOverflowed();
\n },<\/p>\n
\n * @private
\n *\/
\n _initContent: function () {
\n var self = this,
\n events = {};<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘click ‘ + this.options.button.close] = function (event) {
\n event.stopPropagation();
\n $(self.options.targetElement).dropdownDialog(‘close’);
\n };
\n events[‘click ‘ + this.options.button.checkout] = $.proxy(function () {
\n var cart = customerData.get(‘cart’),
\n customer = customerData.get(‘customer’),
\n element = $(this.options.button.checkout);<\/p>\n
\n \/\/ set URL for redirect on successful login\/registration. It’s postprocessed on backend.
\n $.cookie(‘login_redirect’, this.options.url.checkout);<\/p>\n
\n element.prop(‘disabled’, true);
\n location.href = this.options.url.loginUrl;
\n } else {
\n authenticationPopup.showModal();
\n }<\/p>\n
\n }
\n element.prop(‘disabled’, true);
\n location.href = this.options.url.checkout;
\n }, this);<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘click ‘ + this.options.button.remove] = function (event) {
\n event.stopPropagation();
\n confirm({
\n content: self.options.confirmMessage,
\n actions: {
\n \/** @inheritdoc *\/
\n confirm: function () {
\n self._removeItem($(event.currentTarget));
\n },<\/p>\n
\n always: function (e) {
\n e.stopImmediatePropagation();
\n }
\n }
\n });
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘click ‘ + ‘.minicart-items-wrapper .plus’] = function (event) {\/\/Custom event
\n var plusId=event.target.id;
\n var qtyBoxId=’#cart-item-‘+plusId+’-qty’;
\n var qtyVal = parseInt($(event.target).parent().find(this.options.item.qty).val());
\n $(qtyBoxId).val(qtyVal + 1);
\n event.stopPropagation();
\n self._updateItemQty($(event.target).parent().find(this.options.item.button));
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘click ‘ + ‘.minicart-items-wrapper .minus’] = function (event) {\/\/Custom event
\n var minusId=event.target.id;
\n var qtyBoxId=’#cart-item-‘+minusId+’-qty’;
\n var qtyVal = parseInt($(event.target).parent().find(this.options.item.qty).val());
\n if(qtyVal > 1){
\n $(qtyBoxId).val(qtyVal – 1);
\n event.stopPropagation();
\n self._updateItemQty($(event.target).parent().find(this.options.item.button));
\n }
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘keyup ‘ + this.options.item.qty] = function (event) {\/\/Hide event for not displaying update button
\n \/\/self._showItemButton($(event.target));
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘change ‘ + this.options.item.qty] = function (event) {\/\/Hide event for not displaying update button
\n \/\/self._showItemButton($(event.target));
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘click ‘ + this.options.item.button] = function (event) {
\n event.stopPropagation();
\n self._updateItemQty($(event.currentTarget));
\n };<\/p>\n
\n * @param {jQuery.Event} event
\n *\/
\n events[‘focusout ‘ + this.options.item.qty] = function (event) {
\n self._validateQty($(event.currentTarget));
\n };<\/p>\n
\n this._calcHeight();
\n this._isOverflowed();
\n },<\/p>\n
\n * Add ‘overflowed’ class to minicart items wrapper element
\n *
\n * @private
\n *\/
\n _isOverflowed: function () {
\n var list = $(this.options.minicart.list),
\n cssOverflowClass = ‘overflowed’;<\/p>\n
\n list.parent().addClass(cssOverflowClass);
\n } else {
\n list.parent().removeClass(cssOverflowClass);
\n }
\n },<\/p>\n
\n * @param {HTMLElement} elem
\n * @private
\n *\/
\n _showItemButton: function (elem) {
\n var itemId = elem.data(‘cart-item’),
\n itemQty = elem.data(‘item-qty’);<\/p>\n
\n $(‘#update-cart-item-‘ + itemId).show(‘fade’, 300);
\n } else if (elem.val() == 0) { \/\/eslint-disable-line eqeqeq
\n this._hideItemButton(elem);
\n } else {
\n this._hideItemButton(elem);
\n }
\n },<\/p>\n
\n * @param {*} origin – origin qty. ‘data-item-qty’ attribute.
\n * @param {*} changed – new qty.
\n * @returns {Boolean}
\n * @private
\n *\/
\n _isValidQty: function (origin, changed) {
\n return origin != changed && \/\/eslint-disable-line eqeqeq
\n changed.length > 0 &&
\n changed – 0 == changed && \/\/eslint-disable-line eqeqeq
\n changed – 0 > 0;
\n },<\/p>\n
\n * @param {Object} elem
\n * @private
\n *\/
\n _validateQty: function (elem) {
\n var itemQty = elem.data(‘item-qty’);<\/p>\n
\n elem.val(itemQty);
\n }
\n },<\/p>\n
\n * @param {HTMLElement} elem
\n * @private
\n *\/
\n _hideItemButton: function (elem) {
\n var itemId = elem.data(‘cart-item’);<\/p>\n
\n },<\/p>\n
\n * @param {HTMLElement} elem
\n * @private
\n *\/
\n _updateItemQty: function (elem) {
\n var itemId = elem.data(‘cart-item’);<\/p>\n
\n ‘item_id’: itemId,
\n ‘item_qty’: $(‘#cart-item-‘ + itemId + ‘-qty’).val()
\n }, elem, this._updateItemQtyAfter);
\n },<\/p>\n
\n * Update content after update qty
\n *
\n * @param {HTMLElement} elem
\n *\/
\n _updateItemQtyAfter: function (elem) {
\n var productData = this._getProductById(Number(elem.data(‘cart-item’)));<\/p>\n
\n $(document).trigger(‘ajax:updateCartItemQty’);<\/p>\n
\n window.location.reload(false);
\n }
\n }
\n this._hideItemButton(elem);
\n },<\/p>\n
\n * @param {HTMLElement} elem
\n * @private
\n *\/
\n _removeItem: function (elem) {
\n var itemId = elem.data(‘cart-item’);<\/p>\n
\n ‘item_id’: itemId
\n }, elem, this._removeItemAfter);
\n },<\/p>\n
\n * Update content after item remove
\n *
\n * @param {Object} elem
\n * @private
\n *\/
\n _removeItemAfter: function (elem) {
\n var productData = this._getProductById(Number(elem.data(‘cart-item’)));<\/p>\n
\n $(document).trigger(‘ajax:removeFromCart’, {
\n productIds: [productData[‘product_id’]]
\n });
\n }
\n },<\/p>\n
\n * Retrieves product data by Id.
\n *
\n * @param {Number} productId – product Id
\n * @returns {Object|undefined}
\n * @private
\n *\/
\n _getProductById: function (productId) {
\n return _.find(customerData.get(‘cart’)().items, function (item) {
\n return productId === Number(item[‘item_id’]);
\n });
\n },<\/p>\n
\n * @param {String} url – ajax url
\n * @param {Object} data – post data for ajax call
\n * @param {Object} elem – element that initiated the event
\n * @param {Function} callback – callback method to execute after AJAX success
\n *\/
\n _ajax: function (url, data, elem, callback) {
\n $.extend(data, {
\n ‘form_key’: $.mage.cookies.get(‘form_key’)
\n });<\/p>\n
\n url: url,
\n data: data,
\n type: ‘post’,
\n dataType: ‘json’,
\n context: this,<\/p>\n
\n beforeSend: function () {
\n elem.attr(‘disabled’, ‘disabled’);
\n },<\/p>\n
\n complete: function () {
\n elem.attr(‘disabled’, null);
\n }
\n })
\n .done(function (response) {
\n var msg;<\/p>\n
\n callback.call(this, elem, response);
\n } else {
\n msg = response[‘error_message’];<\/p>\n
\n alert({
\n content: msg
\n });
\n }
\n }
\n })
\n .fail(function (error) {
\n console.log(JSON.stringify(error));
\n });
\n },<\/p>\n
\n * Calculate height of minicart list
\n *
\n * @private
\n *\/
\n _calcHeight: function () {
\n var self = this,
\n height = 0,
\n counter = this.options.minicart.maxItemsVisible,
\n target = $(this.options.minicart.list),
\n outerHeight;<\/p>\n
\n target.children().each(function () {<\/p>\n
\n $(this).collapsible();
\n }
\n outerHeight = $(this).outerHeight();<\/p>\n
\n height += outerHeight;
\n }
\n self.scrollHeight += outerHeight;
\n });<\/p>\n
\n }
\n});<\/p>\n
\n});<\/p>\n