I want to enable the user to increase/decrease the quantity inside the minicart on button click.
1. I added two new buttons to the Magento_Checkout/web/template/minicart/item/default.html
<button
class="decrease-qty"
data-bind="attr: {
title: $t('Decrease Quantity'),
'data-cart-item': item_id,
'data-item-qty': qty
}">-
</button>
<!-- default qty input field -->
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty">
<!-- ./qty input field -->
<button
class="increase-qty"
data-bind="attr: {
title: $t('Increase Quantity'),
'data-cart-item': item_id,
'data-item-qty': qty
}">+
</button>
2. I added two new bindings to the minicart.js inside the initSidebar()
Magento_Checkout/web/js/view/minicart.js
/**
* @return {Boolean}
*/
function initSidebar() {
if (miniCart.data('mageSidebar')) {
miniCart.sidebar('update');
}
if (!$('[data-role=product-item]').length) {
return false;
}
miniCart.trigger('contentUpdated');
if (sidebarInitialized) {
return false;
}
sidebarInitialized = true;
miniCart.sidebar({
'targetElement': 'div.block.block-minicart',
'url': {
'checkout': window.checkout.checkoutUrl,
'update': window.checkout.updateItemQtyUrl,
'remove': window.checkout.removeItemUrl,
'loginUrl': window.checkout.customerLoginUrl,
'isRedirectRequired': window.checkout.isRedirectRequired
},
'button': {
'checkout': '#top-cart-btn-checkout',
'remove': '#mini-cart a.action.delete',
'close': '#btn-minicart-close'
},
'showcart': {
'parent': 'span.counter',
'qty': 'span.counter-number',
'label': 'span.counter-label'
},
'minicart': {
'list': '#mini-cart',
'content': '#minicart-content-wrapper',
'qty': 'div.items-total',
'subtotal': 'div.subtotal span.price',
'maxItemsVisible': window.checkout.minicartMaxItemsVisible
},
'item': {
'qty': ':input.cart-item-qty',
'button': ':button.update-cart-item',
'qtyDecrease':'.decrease-qty', // new
'qtyIncrease':'.increase-qty' // new
},
'confirmMessage': $.mage.__('Are you sure you would like to remove this item from the shopping cart?')
});
}
3. Finally I created two new events inside the sidebar.js $.widget()
Magento_Checkout/web/js/sidebar.js
/**
* Decrease qty on decrease button click
* @param {jQuery.Event} event
*/
events['click ' + this.options.item.qtyDecrease] = function (event) {
event.stopPropagation();
let itemId = $(event.currentTarget).data('cart-item');
let qtyElement = $('#cart-item-'+itemId+'-qty');
let qtyValue = parseInt(qtyElement.val()) - 1;
if(qtyValue <= 0) qtyValue = 1;
qtyElement.val(qtyValue).trigger('keyup');
};
/**
* Increase qty on increase button click
* @param {jQuery.Event} event
*/
events['click ' + this.options.item.qtyIncrease] = function (event) {
event.stopPropagation();
let itemId = $(event.currentTarget).data('cart-item');
let qtyElement = $('#cart-item-'+itemId+'-qty');
let qtyValue = parseInt(qtyElement.val()) + 1;
qtyElement.val(qtyValue).trigger('keyup');
};
The only thing that happens is that the minicart cannot be loaded anymore. In the console I only get:
[2019-09-18 10:57:34] [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.
ConsoleOutputHandler.show @ console-output-handler.js:34
(anonymous) @ logger.js:197
Logger.processOutput_ @ logger.js:196
Logger.log_ @ logger.js:143
Logger.error @ logger.js:100
(anonymous) @ layout.js:122
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
(anonymous) @ require.js:749
(anonymous) @ require.js:132
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
(anonymous) @ require.js:749
(anonymous) @ require.js:132
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
(anonymous) @ require.js:531
each @ require.js:57
onError @ require.js:524
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
loadSource @ layout.js:116
(anonymous) @ jquery.js:3411
fire @ jquery.js:3232
add @ jquery.js:3291
(anonymous) @ jquery.js:3410
each @ jquery.js:370
(anonymous) @ jquery.js:3406
jQuery.Deferred @ jquery-migrate.js:744
then @ jquery.js:3405
initComponent @ layout.js:338
process @ layout.js:207
iterator @ layout.js:182
_.each._.forEach @ underscore.js:150
run @ layout.js:167
(anonymous) @ app.js:14
(anonymous) @ main.js:31
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
init @ main.js:24
(anonymous) @ main.js:96
_.each._.forEach @ underscore.js:150
(anonymous) @ main.js:79
apply @ main.js:76
fire @ jquery.js:3232
add @ jquery.js:3291
jQuery.fn.ready @ jquery.js:3542
jQuery.fn.init @ jquery.js:2967
jQuery.fn.init @ jquery-migrate.js:241
jQuery @ jquery.js:75
(anonymous) @ bootstrap.js:20
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1564
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
(anonymous) @ require.js:806
(anonymous) @ require.js:132
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
fetch @ require.js:805
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:133
(anonymous) @ requirejs-config.js:134
(anonymous) @ requirejs-config.js:1397
Show 148 more frames
and for some reason a 404 on /frontend/VENDOR/THEME_NAME/de_DE/jquery-ui-modules/widget.js
the ui-modules reside in magento2/lib/web/jquery/ui-modules/widget.js as I know so far, I don't have to copy it to my theme directory. Could it be, that I have to write a module for my task instead on extending the theme?
