HOW TO USE KNOCKOUT JS ON FRONTEND

Posted by Krishna Mohan

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
 */

MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::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="MagentoFrameworkViewElementTemplate" 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 🙂

author-thumb


Krishna Mohan
1 Badges

28 February 2023

Source link