Reading list Switch to dark mode

    How to use knockout js on frontend

    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.
    Read More
    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published.

    Be the first to comment.

    Back to Top
    We endeavoured to re-platform our existing site and Webkul has been playing an integral part as far as transforming our basic Magneto instance into an online marketplace.
    Alex Maranduik
    Director, Marketing
    www.labx.com
    Talk to Sales

    Global

    Live Chat

    Message Sent!

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

    Back to Home