This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

The Basic Concepts of Magento 2 Knockout JS

Updated on  18th June

7 Min Read
Reading Time: 7 minutes

Knockout is a Javascript library which helps in the frontend of Magento 2. It implements MVVM (Model-View-View-Model) design pattern. You can find Knockout JS in Magento 2 on almost every page, but mostly on the checkout page. The implementation of Magento 2 Knockout JS is a bit tricky.

Magento 2 Knockout JS

The goal of this post is to explain the basic concepts of Magento 2 Knockout JS which are valid to use in Magento 2 and we will implement very simple logic as well. If you are not familiar with Knockout Javascript library, I would like you to read the documentation of Knockout JS.

Magento 2 is using a text field to handle quantity on the product page. But if you want quantity increment buttons, you can easily add this kind of behavior by using Knockout JS in Magento 2.

First of all, create a Magento 2 module. In our example, all files will be located in Cloudways_Mymodule module. Location of our module is MAGENTO2_ROOT > app > code > Cloudways > Mymodule. Now, create a registration.php in app > code > Cloudways > Mymodule

and module.xml in app > code > Cloudways > Mymodule > etc

so Magento 2 can see our module. As you know, we are going to make changes in the behavior of quantity, so we have to find the place from where Magento 2 is rendering the default quantity field on the product page. After some findings, we have got the following template which can help us.

Magento > Catalog > view > frontend > templates > catalog > product > view > addtocart.phtml

Copy the addtocart.phtml file to your own module:

app > code > Cloudways > Mymodule > view > frontend > template > catalog > product > view > addtocart.phtml

Magento 2 Knockout JS has a dependency of UI Component which further inherits classes and methods from UI Element. In our addtocart.phtml, we will be creating a UI component and initialize it. We will be telling Magento 2 to create a component that will be located in:

app > code > Cloudways > Mymodule > view > frontend > web > js > view > product > view > qty_change.js

Add the below script somewhere above the input field of quantity:

Since we have created our component named as qty_change, we need to connect/bind it with the front end HTML, like this:

In the above code, we have a data-bind attribute to the div, as well as in the input field. The data-bind attribute is used as a medium to connect HTML with a Javascript function of our component qty_change. It means according to the Knockout way; every function call invoked there will be searched in our qty_change component.

This leads you to the understanding that the value of the input field is linked to a result of invoking qty() function located in the component. Also, there are two buttons as well, connected to the component via Javascript click event. They will help us decrease/increase in quantity value. So, the final view of our addtocart.phtml will be:

Now, let’s talk about the last stage: qty_change component.

Create a new file qty_change.js in app > code > Cloudways > Mymodule > view > frontend > web > js > view > product > view and add the following content in it.

In the above code, everything is clear enough now. Look at the initialize: function (). We have initialized a qty observable, a Magento 2 Knockout JS thing, that returns its value when invoked by data-bind attribute from HTML. There are also two more functions decreaseQty and increaseQty. They help to modify the value when the button from HTML is clicked.

And that’s all. Now, the last thing is to change the default addtocart.phtml template. Magento 2 doesn’t know that we want to use our addtocart.phtml file, so we have to modify the template path using the layout. Let’s do it now. Create a new file catalog_product_view.xml in app > code > Cloudways > Mymodule > view > frontend > layout and add the following code:

Finally, we had prepared our module using Knockout JS in Magento 2. Please enable and activate your module using below Magento 2 CLI commands:

Conclusion

Our module is ready to go, and we can also use it on a regular basis. Magento 2 Knockout JS helps to build some parts of Magento 2 frontend dynamically. I hope you have understood this simple example of Magento 2 Knockout JS, and it will be helpful in your Magento 2 development. If you have anything to discuss related to it, feel free to share your thoughts in the comments section.

Share your opinion in the comment section. COMMENT NOW

Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Convert visitors into buyers on your 100% faster Magento store.

Deploy your Magento stores on optimized Magento hosting servers.

 

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.