Reading list Switch to dark mode

    How to use knockout js on frontend

    Updated 14 March 2023

    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>
    fronendpage

    Hope this will help you.

    Thanks 🙂

    Start your headless eCommerce
    now.
    Find out More
    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home