18/03/2024, 02:27 How to Use Knockout JS in Magento 2?
Tutorial
OUR STORE / PA R T N E R P R O G R A M / C O N TA C T
Home » Guide » How to Use Knockout JS in Magento 2?
Subscribe to
our newsletter
How to Use Knockout JS in Enter your name
Magento 2? Enter your email
Magento 2, ever since (7 Votes, Average: 4.57 Out Of 5)
its inception, has under- Subscribe
gone lots of changes.
But, Knockout JS was one of the biggest changes that were
introduced to the Magento 2.
WHAT IS KNOCKOUT JS?
Knockout JS is basically a type of JavaScript Library that is
used for dynamically building certain parts of the Magento 2
frontend.
It uses MVVM (Model-View-View-Model) pattern, which is a
bit of a tricky structure to learn and implement in Magento
2. But, it helps to add a great deal of seamless functionality
on a Magento 2 based online store.
Privacy - Terms
[Link] 1/6
18/03/2024, 02:27 How to Use Knockout JS in Magento 2? Tutorial
Plus, Knockout JS also makes the Magento 2 development
process quite interesting and extremely powerful.
To put it simply, the data binding concept of Knockout JS
is vital and used in many crucial elements of Magento like
checkout and mini cart.
Now, at this point, many of you might be thinking…
Why Use Data Binding in the First Place?
“Can’t we use a simple library such as JQuery to perform the
DOM parsing manually?”
The answer is – You most certainly can!
In fact, you don’t even have to use JQuery for that. You can
easily perform all the DOM manipulations by using the core
JavaScript as well. However, Knockout JS can help to write
a more standardized, beautiful, and maintainable code in
Magento 2.
Plus, it also makes the Magento 2 fast and secure. So in this
post, we will explain exactly how to use Knockout JS in
Magento 2 and implement it in a custom module.
HOW TO USE KNOCKOUT JS IN MAGENTO 2?
In order to use Knockout JS in Magento 2, we need to create
a simple module to implement the Knockout JS in the cus-
tom module.
Let’s get started.
Step #1
Go to > MageRoot = /app/code/MD/KnockoutExe
Step #2
Now, add the below-mentioned code in {MageRoot} >
[Link]
<?php
[Link] 2/6
18/03/2024, 02:27 How to Use Knockout JS in Magento 2? Tutorial
\Magento\Framework\Component\ComponentRegistrar:
\Magento\Framework\Component\ComponentRegistrar
'MD_KnockoutExe',
__DIR__
);
Step #3
Next, we need to set up the module version.
To do that, we need to add the below-mentioned code in
the {MageRoot} > etc > [Link] file:
<?xml version="1.0"?>
<config xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="../../../../../li
<module name="MD_KnockoutExe" setup_version
</module>
</config>
Step #4
Now, we need to create a layout file {MageRoot] > view >
frontend > layout > cms_index_index.xml</em
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="urn:magento:frame
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Tem
template="MD_KnockoutExe::m_knockoutExe.phtml"/>
</referenceBlock>
</body>
</page>
Step #5
Next, we need to add a template file {MageRoot} > view >
frontend > templates > md_knockoutExe.phtml
<div id="md-knockout-example" data-
bind="scope:'md-ko-example'">
<!-- ko template: getTemplate() --><!-- /ko --
>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"md-ko-example": {
[Link] 3/6
18/03/2024, 02:27 How to Use Knockout JS in Magento 2? Tutorial
"component": "MD_KnockoutExe/js/mdkojs"
}
}
}
}
}
</script>
</div>
Step #6
Now, let’s look a little bit closer inside a code.
<script type="text/x-magento-init">
It’s basically a declarative notation that is parsed for extract-
ing component names. In addition, the configuration will
also be applied to that element.
At this point, it will initialize the md-ko-example component.
Step #7
The next step is to create a component js file {MageRoot} >
view > frontend > web > js > [Link]
define(['jquery', 'uiComponent', 'ko'], func-
tion ($, Component, ko) {
'use strict';
return [Link]({
defaults: {
template: 'MD_KnockoutExe/knockout-test-
example'
},
initialize: function () {
this._super();
}
});
}
);
Next, we need to create an actual template HTML file in or-
der to display the content of the component {MageRoot} >
view > frontend > web > template > knockout-test-
[Link]
<div class="component-class">
<div data-bind="text: 'Knockout Works
Successfully'"></div>
</div>
[Link] 4/6
18/03/2024, 02:27 How to Use Knockout JS in Magento 2? Tutorial
Step #8
The process is almost finished. The thing remains now is to
clear the cache and then run command to deploy and check
it at the front side.
php bin/magento s:s:d -f or php bin/magento
s:s:d
Conclusion
Knockout JS provides plenty of benefits when used in
Magento 2. It not only helps to create rich front-end compo-
nents, which ultimately enhances the user experience of an
online store, but it also makes your online store much faster
and secure.
If you have any queries or need our professional assistance
with your Magento development agency, feel free to reach
out to us anytime.
Tags
knockout js in magento 2 knockout js magento 2
knockout js magento 2 tutorial
magento 2 create knockout component magento 2 knockout
magento 2 knockout js magento 2 knockout js tutorial
magento knockout js
Enter your email id
Sign up for our
Newsletter Subscribe now
[Link] 5/6
18/03/2024, 02:27 How to Use Knockout JS in Magento 2? Tutorial
ABOUT US SUPPORT KNOWLEDGE PARTNERSHIP
BASE
Privacy Contact Us Partner
4.4 out of 5.0 for Policy Blog Program
Submit
MageDelight Solution Terms & Ticket Affiliate
Testimonials
by 51 clients reviews. Conditions Program
FAQs Resources
License
Agreement
Cookie Policy
About Us
© 2024 MageDelight. All Rights Reserved. MageDelight is
subsidiary of Krish TechnoLabs.
[Link] 6/6
