Magento – Change minicart Qty to Dropdown in magento2

knockoutjsmagento2.2php-7

I want change qty text box into dropdown in minicart place

view/frontend/web/template/minicart/item/default.html file.

<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>

I'm getting dropdown for qty.But i want to this in below format

for(i=0;i<=4;i++)
{
<option >i</option>}

How to do this.If anyone knows please explain me.

I also refer this link …
http://knockoutjs.com/documentation/options-binding.html
i don't know which file is suitable for adding script file

Best Answer

using KnockoutJS to bind array for select element

HTML Namespace_Module/view/frontend/web/template/minicart/item/default.html

<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,
       options: $parent.qtyOptions"
       class="item-qty cart-item-qty">
</select>

XML checkout_cart_sidebar_item_renderers.xml

<referenceBlock name="minicart">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="minicart_content" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="item.renderer" xsi:type="array">
                                <item name="component" xsi:type="string">Namespace_Module/js/custom-qty</item>
                                <item name="config" xsi:type="array">
                                    <item name="displayArea" xsi:type="string">defaultRenderer</item>
                                    <item name="template" xsi:type="string">Namespace_Module/minicart/item/default</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>

JS FILE: Namespace_Module/view/frontend/web/js/custom-qty.js

define([
    'ko',
    'jquery',
    'uiComponent'
],function(ko, $, Component){
    return Component.extend({
        qtyOptions: ko.observableArray([]),
        initialize: function(){
            this._super();
            for(var i =0; i<= 10; i++){
                this.qtyOptions.push(i);
            }
            return this;
        }
    });
});

The result

Result

More info about bind options to select using KnockoutJS >> KnockoutJS Document

Related Topic