How to use knockout js on frontend
In this article, We will learn about how to use Knockout JS on a Magento 2 Frontend.
First off, we will create a module Webkul_Knockout
Step-1: Create registration.php at app/code/Vendor/Knockout
<?php
/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_Knockout
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Webkul_Knockout',
__DIR__
);
Step-2: Create module.xml at app/code/Vendor/Knockout/etc
<?xml version="1.0" ?> <!-- /** * Webkul Software. * * @category Webkul * @package Webkul_Knockout * @author Webkul * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Webkul_Knockout" /> </config>
Step-3: Create cms_index_index.xml at app/code/Vendor/Knockout/view/frontend/layout
<?xml version="1.0"?>
<!--
/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_Knockout
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template" name="index" template="Webkul_Knockout::index.phtml"/>
</referenceBlock>
</body>
</page>
Step-4: Create index.phtml at app/code/Vendor/Knockout/view/frontend/templates
<div id="webkul-knockout-index" data-bind="scope:'webkul_index'">
<!-- ko template: getTemplate() -->
<!-- /ko -->
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"webkul_index": {
"component": "Webkul_Knockout/js/index"
}
}
}
}
}
</script>
</div>
Step-5: Create index.js at app/code/Vendor/Knockout/view/frontend/web/js
/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_Knockout
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
define([
'jquery',
'uiComponent',
'ko'
], function ($, Component, ko) {
'use strict';
return Component.extend({
defaults: {
template: 'Webkul_Knockout/knockout_index'
},
initialize: function () {
this._super();
}
});
});
Step-6: Create knockout_index.html at app/code/Vendor/Knockout/view/frontend/web/template
<div class="webkul-component">
<div data-bind="text: 'Knockout JS on fronend example'"></div>
</div>
Hope this will help you.
Thanks 🙂
