Knockout js is javascript library. Magento use knockout js most of pages. Magento 2.x checkout all section developed using knockout js.
Today we create a simple knockout js module in Magento 2. We display a simple message using the custom knockout js component.
Let’s start by creating a simple knockout module.
Step1. Create module directory
Go to Magento app/code directory and create a directory with your vendor name. My vendor name is “CoolCodders”.
After creating the vendor directory, need to create a directory for the module. My module name is “Knockout”.
My custom module directory path is like “MAGENTO_ROOT/app/code/CoolCodders/Knockout”
Step2. Create module registration file
<?php
//file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'CoolCodders_Knockout',
__DIR__
);Step3. Create module config file
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/etx/module.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="CoolCodders_Knockout" setup_version="1.0.0" />
</config>Step4. Create layout file for render our custom section
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/view/frontend/layout/default.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="knockoutex" template="CoolCodders_Knockout::hello.phtml" after="-" />
</referenceContainer>
</body>
</page>Step5. Create template file
<?php
//file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/view/frontend/templates/hello.phtml
?>
<h2><?= __("Knockout Section"); ?></h2>
<div class="knockout-section" data-bind="scope: 'cool_koex'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"cool_koex": {
"component": "CoolCodders_Knockout/js/hello"
}
}
}
}
}
</script>Step6. Create knockout component file
//file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/view/frontend/web/js/hello.js
define(['uiComponent'], function(Component) {
return Component.extend({
defaults: {
template: 'CoolCodders_Knockout/hello',
},
initialize: function () {
this._super();
this.message = "This message comming from knockout js component";
}
});
});Step7. Create knockout template file
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/Knockout/view/frontend/web/template/hello.html -->
<p class="message" data-bind="text: message"></p>Step8. Install your module to magento
php bin/magento module:enable CoolCodders_Knockout
php bin/magento setup:di:compile
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployOur knockout message is display all magento pages.