Magento – How to extend sidebar.js to perform action on Qty change in Minicart Magento 2

knockoutjsmagento2mini-cartqty

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

module-checkout/view/frontend/web/template/minicart/item/default.html

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

module-checkout/view/frontend/web/js/sidebar.js

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) {
                console.log(this.options.item.qty);
                self._showItemButton($(event.target));
            };

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

Best Answer

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"
        type="number"
        size="4"
        class="item-qty cart-item-qtybox">
</div>

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

define([
    'jquery',    
    'uiComponent'
], function($, Component) {
    'use strict'; 
    return function(target) {
    return $.widget('mage.sidebar', $.mage.sidebar, {
        options: {
            isRecursive: true,
            item: {
                'qtybox':':input.cart-item-qtybox',
            }
        },       

        _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 ;
                $("#"+qtyBoxElemId).val(boxQty);

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

    });
  }
});

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

Related Topic