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

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

<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

1 Answer 1


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

XML checkout_cart_sidebar_item_renderers.xml

<referenceBlock name="minicart">
            <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>

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

],function(ko, $, Component){
    return Component.extend({
        qtyOptions: ko.observableArray([]),
        initialize: function(){
            for(var i =0; i<= 10; i++){
            return this;

The result


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

  • Updated answer. My code used for custom module.
    – HoangHieu
    Dec 27, 2017 at 10:02
  • It doesn't shows any dropdown values
    – Mahi M
    Dec 27, 2017 at 10:08
  • this line this.qtyOptions.push(i); add dropdown options
    – HoangHieu
    Dec 27, 2017 at 10:19
  • Yes .But it shows two dropdown for each product
    – Mahi M
    Dec 27, 2017 at 10:22
  • My code is sample you should replace my select to your product item render template default.html
    – HoangHieu
    Dec 27, 2017 at 10:24

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.