Add Quantity Increment and Decrement Button in Magento 2 with KnockoutJS

Knockout is a javascript library which follows MVVM (Model-View-View-Model) Pattern and used for creating front end. You can easily handle complex data-driven interfaces using Knockout JS, and since it is open source, it is free to use.

Knockout JS is lightweight and mostly used in checkout pages in Magento 2. However Knockout JS is slightly complex to implement in Magento 2, hence, this tutorial will teach you how to implement Knockout JS in Magento 2.

On the product page, Magento 2 has a simple input text filed on product page for quantity and to make it easier for customers, you can add increment and decrement button in Magento 2. I will implement it using custom module and if you are not familiar with its implementation and usage, you can check out this guide: Custom Module in Magento 2.

Let’s Start!

Create Directories

First, go to the root directory of your Magento 2 store and create directories as shown below:

knockout directories

Configure Module

Configure your module by creating a module.xml file in app/code/Magenticians/Mymodule/etc.Add the following code in it:

Registration of Module

Now register the module by creating registration.php in app/code/Magenticians/Mymodule, and add the following code in it:

Copy addtocart.phtml

Go to vendor/magento/module-catalog/view/frontend/templates/product/view from the root directory of your store and copy addtocart.phtml to your own module app/code /Magenticians/Mymodule/view/frontend/templates/catalog/product/view. The addtocart.phtml file will looks like this:

Edit addtocart.phtml

In addtocart.phtml, create a UI component and initialize it. To do that, first add the script below above the input field of quantity:

Now connect the component qty_change with the following frontend HTML:

Data-bind attribute: Connect HTML with a Javascript function of our component qty_change.

In the code above, there are two buttons which I have connected to the component by using Javascript click event which will be used to decrease/increase the quantity value. The final addtocart.phtml file will looks like this:

Create qty_change.js

Now create qty_change.js in app/code/Magenticians/Mymodule/view/frontend/web/js/view/product/view. Add the following code in it:

Create catalog_product_view.xml

Lastly, just create catalog_product_view.xml in app/code/Magenticians/Mymodule/view/frontend/layout. Add the following code in it:

The purpose of the code above is to change the default addtocart.phtml template.

Run the Commands

Go to the root directory of your store by using SSH terminal and run the following commands:

Now go to the product page and you will see the result:

output of knockout JS in Magento 2

Final Words

Always try to make it easier for customers to buy products on your store as it can result in boosted sales. After following this tutorial, you should be able to add quantity increment decrement button in Magento 2 with Knockout JS, and you also learned the implementation of Knockout JS in Magento 2.

About Author

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.