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 🙂

Categories: Uncategorized

Krishna Mohan 14-March-2023

View Comments Comment or Ask a Question

Quick Links