I added a text field Box in minicart that need to perform some calculation on keyup to update Qty.

I Added box field by modifying


Now I want to extend sidebar.js, To perform action on Knockout.js so that I update the Qty on keyup


I am not sure how to do this.

I created a module and extended the sidebar.js in requirejs-config.js, its not working.

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/sidebar': 'new_ConfigProductDynamicName/js/sidebar',

I can see keyup of Qty to display update button in sidebar.js, I am not sure what will come at this.options.item.qty I am trying to do console.

 events['keyup ' + this.options.item.qty] = function (event) {

How can I create a keyup function for the text field Box I created and perform action to update the Qty of that particular product in Mincart

enter image description here

1 Answer 1


you can follow below steps to solve the issue you have.

step 1: update Box input html in the file checkout/view/frontend/web/template/minicart/item/default.html as below.

<div class="details-qty box">
    <label class="label" data-bind="i18n: 'Box', attr: {
                    for: 'cart-item-'+item_id+'-qtybox'}"></label>
    <input data-bind="attr: {
        id: 'cart-item-'+item_id+'-qtybox',
        'data-cart-item': item_id,
        'data-item-boxqty': qty,
        'data-cart-item-id': product_sku
        }, value: qty"
        class="item-qty cart-item-qtybox">

step 2:
update your modules requirejs-config.js for mixins.

File : requirejs-config.js

var config = {
    config: {    
        mixins: {
            'Magento_Checkout/js/sidebar': 'new_ConfigProductDynamicName/js/sidebar',: true},


step 3:
Please update the JS file for the js component 'new_ConfigProductDynamicName/js/sidebar'

File : sidebar.js

], function($, Component) {
    'use strict'; 
    return function(target) {
    return $.widget('mage.sidebar', $.mage.sidebar, {
        options: {
            isRecursive: true,
            item: {

        _showItemButton: function (elem) {
            var itemId = elem.data('cart-item'),
                itemQty = elem.data('item-qty');
            var qtyBoxElemId =  'cart-item-'+itemId+'-qtybox';
            if (this._isValidQty(itemQty, elem.val())) {
                $('#update-cart-item-' + itemId).show('fade', 300);
                var boxQty = elem.val() / 5 ;

            } else if (elem.val() == 0) { //eslint-disable-line eqeqeq
            } else {


step 4: Now run below CLI command from your Magento root to clean static content and cache refresh

sudo rm -rf pub/static/frontend/*
sudo php bin/magento cache:flush

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.