Question

How to change qty text box into dropdown in minicart place view/frontend/web/template/minicart/item/default.html file ?

Was it helpful?

Solution

Override default.html to your theme

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

TOapp/design/frontend/Vendor/theme/Magento_Checkout/web/template/minicart/item/default.html

Now change

<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">
<button data-bind="attr: {
       id: 'update-cart-item-'+item_id,
       'data-cart-item': item_id,
       title: $t('Update')
       }"
        class="update-cart-item"
        style="display: none">
    <span data-bind="i18n: 'Update'"></span>
</button>

To

<select 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"
       class="item-qty cart-item-qty">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<button data-bind="attr: {
       id: 'update-cart-item-'+item_id,
       'data-cart-item': item_id,
       title: $t('Update')
       }"
        class="update-cart-item">
    <span data-bind="i18n: 'Update'"></span>
</button>

Now flush cache and run static:content:deploy to see changes

OUTPUT:

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top