How to change a qty text in Minicart?












3














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










share|improve this question





























    3














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










    share|improve this question



























      3












      3








      3







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










      share|improve this question















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







      magento2.2 php-7 knockout






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited yesterday









      Teja Bhagavan Kollepara

      2,93841847




      2,93841847










      asked Dec 25 '17 at 15:43









      Mahathi M

      386




      386






















          1 Answer
          1






          active

          oldest

          votes


















          2














          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






          share|improve this answer





















          • Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
            – Prince Patel
            Dec 26 '17 at 6:22












          • Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
            – Mano M
            Dec 26 '17 at 6:27










          • It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
            – Prince Patel
            Dec 26 '17 at 6:30










          • yes qty is showing...
            – Mano M
            Dec 26 '17 at 6:40










          • How to pass option value dynamically
            – Mahathi M
            Dec 26 '17 at 15:48











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "479"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f207074%2fhow-to-change-a-qty-text-in-minicart%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          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






          share|improve this answer





















          • Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
            – Prince Patel
            Dec 26 '17 at 6:22












          • Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
            – Mano M
            Dec 26 '17 at 6:27










          • It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
            – Prince Patel
            Dec 26 '17 at 6:30










          • yes qty is showing...
            – Mano M
            Dec 26 '17 at 6:40










          • How to pass option value dynamically
            – Mahathi M
            Dec 26 '17 at 15:48
















          2














          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






          share|improve this answer





















          • Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
            – Prince Patel
            Dec 26 '17 at 6:22












          • Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
            – Mano M
            Dec 26 '17 at 6:27










          • It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
            – Prince Patel
            Dec 26 '17 at 6:30










          • yes qty is showing...
            – Mano M
            Dec 26 '17 at 6:40










          • How to pass option value dynamically
            – Mahathi M
            Dec 26 '17 at 15:48














          2












          2








          2






          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






          share|improve this answer












          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 26 '17 at 5:58









          Prince Patel

          13.2k54674




          13.2k54674












          • Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
            – Prince Patel
            Dec 26 '17 at 6:22












          • Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
            – Mano M
            Dec 26 '17 at 6:27










          • It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
            – Prince Patel
            Dec 26 '17 at 6:30










          • yes qty is showing...
            – Mano M
            Dec 26 '17 at 6:40










          • How to pass option value dynamically
            – Mahathi M
            Dec 26 '17 at 15:48


















          • Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
            – Prince Patel
            Dec 26 '17 at 6:22












          • Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
            – Mano M
            Dec 26 '17 at 6:27










          • It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
            – Prince Patel
            Dec 26 '17 at 6:30










          • yes qty is showing...
            – Mano M
            Dec 26 '17 at 6:40










          • How to pass option value dynamically
            – Mahathi M
            Dec 26 '17 at 15:48
















          Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
          – Prince Patel
          Dec 26 '17 at 6:22






          Are you remove display:none from button? You should click on update button to update qty after changing qty from dropdown
          – Prince Patel
          Dec 26 '17 at 6:22














          Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
          – Mano M
          Dec 26 '17 at 6:27




          Yes.I have removed it.i can update qty.But the updated qty value (selected value) not displayed in qtybox.But that selected value can be updated
          – Mano M
          Dec 26 '17 at 6:27












          It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
          – Prince Patel
          Dec 26 '17 at 6:30




          It should be there because value: qty already passed in qtybox. Working good in my setup. Please check with private window.
          – Prince Patel
          Dec 26 '17 at 6:30












          yes qty is showing...
          – Mano M
          Dec 26 '17 at 6:40




          yes qty is showing...
          – Mano M
          Dec 26 '17 at 6:40












          How to pass option value dynamically
          – Mahathi M
          Dec 26 '17 at 15:48




          How to pass option value dynamically
          – Mahathi M
          Dec 26 '17 at 15:48


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Magento Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f207074%2fhow-to-change-a-qty-text-in-minicart%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          An IMO inspired problem

          Management

          Has there ever been an instance of an active nuclear power plant within or near a war zone?