How to create custom knockout js component in Magento 2

03 Jul, 2021

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 "RS".

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/RS/Knockout"

Step2. Create module registration file

    <?php
            //file path: MAGENTO_ROOT/app/code/RS/Knockout/registration.php

            \Magento\Framework\Component\ComponentRegistrar::register(
                \Magento\Framework\Component\ComponentRegistrar::MODULE,
                'RS_Knockout',
                __DIR__
            );
    

Step3. Create module config file

    
    <?xml version="1.0"?>
    <!-- file path: MAGENTO_ROOT/app/code/RS/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="RS_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/RS/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="RS_Knockout::hello.phtml" after="-" />
	        </referenceContainer>
	    </body>
	</page>
    

Step5. Create template file

    
    	<?php
        //file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/templates/hello.phtml
        ?>
        <h2><?= __("Knockout Section"); ?></h2>
		<div class="knockout-section" data-bind="scope: 'rs_koex'">
			<!-- ko template: getTemplate() --><!-- /ko -->
		</div>

		<script type="text/x-magento-init">
		        {
		            "*": {
		                "Magento_Ui/js/core/app": {
		                    "components": {
		                        "rs_koex": {
		                            "component": "RS_Knockout/js/hello"
		                        }
		                    }
		                }
		            }
		        }
		</script>
    

Step6. Create knockout component file

    
    //file path: MAGENTO_ROOT/app/code/RS/Knockout/view/frontend/web/js/hello.js

    define(['uiComponent'], function(Component) {

	    return Component.extend({
	        
	        defaults: {
	            template: 'RS_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/RS/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 RS_Knockout
        php bin/magento setup:di:compile
        php bin/magento setup:upgrade
        php bin/magento setup:static-content:deploy
    

Our knockout message is display all magento pages.

RAJU SADADIYA (MAGENTO DEVELOPER)