How To Add Quantity Increment And Decrement Button In Magento 2
The E-commerce store owners try to make the online shopping platform as convenient as possible to shop and make it preferable over brick and mortar stores. As a part of this aim, features like size charts, easy returns, quantity change buttons, WhatsApp sharing buttons, order tracking, and many more are implemented on the product page.
Today I am posting one such solution to add quantity increment and decrement button in Magento 2. It allows the customers to increase or decrease the quantity of products in the cart on the product page.
The default Magento 2 allows a simple text button to add the number of products to be purchased. However, the increment and decrement buttons on product page make it easier and quicker.
The below code is implemented with the Knockout JS as it is lightweight:
Method to add quantity increment and decrement button in Magento 2:
Create requirejs-config.js in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/
Add the below code:
|
1 2 3 4 5 6 7 |
var config = { map: { '*': { 'qty-counter': 'Magento_Catalog/js/qty-counter' } } }; |
Copy file from vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml
to current theme app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/templates/product/view/
Change code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div class="box-tocart"> <div class="fieldset"> <?php if ($block->shouldRenderQuantity()): ?> <div class="field qty"> <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Quantity:') ?></span></label> <div id="custom-qty" class="control" data-bind="scope: 'qty-counter'"> <!-- ko template: getTemplate() --><!-- /ko --> <script type="text/x-magento-init"> { "#custom-qty": { "Magento_Ui/js/core/app": { "components": { "qty-counter": { "component": "qty-counter", "config": { "qty": <?php echo $block->getProductDefaultQty() * 1 ?>, "dataValidate": <?php echo json_encode($block->getQuantityValidators()) ?> } } } } } } </script> </div> </div> <?php endif; ?> <div class="actions"> <button type="submit" title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>" class="action primary tocart" id="product-addtocart-button"> <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span> </button> <?php echo $block->getChildHtml('', true) ?> </div> </div> </div> |
Create qty-counter.js in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/web/js
Add the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
'use strict'; define([ 'ko', 'uiElement' ], function (ko, Element) { return Element.extend({ defaults: { template: 'Magento_Catalog/input-counter' }, initObservable: function () { this._super() .observe('qty'); return this; }, getDataValidator: function() { return JSON.stringify(this.dataValidate); }, decreaseQty: function() { var qty; if (this.qty() > 1) { qty = this.qty() - 1; } else { qty = 1; } this.qty(qty); }, increaseQty: function() { var qty = this.qty() + 1; this.qty(qty); } }); }); |
Create input-counter.html in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/web/template
Add the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="input-group"> <span class="input-group__addon"> <button click="decreaseQty" class="input-group__button input-group__button--decrease"> <span class="input-group__icon input-group__icon--decrease"></span> </button> </span> <input data-bind="value: qty(), attr: {'data-validate': getDataValidator(), 'title': $t('Qty')}" type="number" name="qty" id="qty" maxlength="12" class="input-group__input" /> <span class="input-group__addon"> <button click="increaseQty" class="input-group__button input-group__button--increase"> <span class="input-group__icon input-group__icon--increase"></span> </button> </span> </div> |
That’s it to add the increment and decrement button on the product page in Magento 2.
Any doubts about the implementation? Feel free to mention them in the Comments section below. I’ll help you out.
Please share the solution with fellow developers via social media.
Thank you.
12 Comments
I am getting
Failed to load the “qty-counter” component.
Hey Neekee Singh,
The issue may be due to qty-counter js mapping not being correct,
please check that js mapping is correct in required js config.
What if the amount is decimal?
Hello Marcelo,
It will work same with decimal as well same like qty*price
Thank You
want to apply that for each option in bundle product , any help ?
Hello Abdelrahman,
You need to apply custom code and put in extra efforts to fulfill the mentioned requirement.
Thank You
Hi, how to perform the same functionality in product listing page, when followed the same code – clicking on + is incrementing all the items in the page . Could you please help me in that
Hello Ashok,
The above code is for mini cart. So, you don’t need the above code for your mentioned requirement.
Regarding your query, you need to add quantity increment decrement (+ -) button in the phtml file of category page.
After that, you need to set logic for increment decrement using jQuery.
Thank You
Hi there, How can I use this widget into Bundle Products Options? Like in Select Bundle Options??
Is that possible? Could you guide trought this?
Hi,
The above solution is only for mini cart.
Thanks
Would this almost be just as easy to apply to the mini-cart?
Hello,
If there are multiple items, you’ll have to handle it accordingly.