Magento 2.1 – Minicart Disable Quantity Box

magento-2.1mini-cart

How can we initially disable quantity box (read-only) of mini cart and enable it while clicking edit link for each separate product ?

enter image description here

Best Answer

As stated my Mahalakshmi the file of interest is 

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

Make a copy of this file into your custom theme so file is overridden e.g. 

app/design/frontend/Vendor/Theme/Magento_Checkout/web/template/minicart/item/default.html

You can then make some basic modifications to this file outlined below.

Disable the Quantity Box

Add disabled attribute to the input box like below: 

<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"
                       disabled
                       class="item-qty cart-item-qty">

This was around line 74 for me on version 2.2.1.

Add logic to enable quantity box

                <a data-bind="attr: {onclick: 'document.getElementById(\'cart-item-'+item_id+'-qty\').disabled = false;'}" class="action edit">
                    <span data-bind="i18n: 'Edit'"></span>
                </a>

I replaced the data-bind attribute with a new action here to enable the quantity box in relation to the quantity that needed to be edited. This was at about line 98 for me.

Related Topic