Knockout JS (KO) is a Javascript library which is used on frontend in Magento 2. It implements Model-View-View Model (MVVM) design pattern. You can find Knockout JS Magento 2 on almost every page. Today we will create a simple Front-end page in Magento 2 using Knockout JS.

The main usage of Knockout JS is to help you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

After reading our post, you will have a frontend page using  Knockout JS Magento 2 that display a list of products.

First off, we will create a module: Magenest_KnockoutJs and its mandatory files (e.g: registration.php, module.xml, …). If you didn’t know how to create a module, you can checkout our topic about this.

Now, create file “routes.xml” in Magenest/KnockoutJs/etc/frontend/routes.xml

Our module will have a base url like this: <magento2_base_url>/knockout/ or in our case http://localhost/magento2.1/knockout

We want to create the page: http://localhost/magento2.1/knockout/test/index

To create a new page we need the consist of these files:

  • First, We have to create the layout file: Magenest/KnockoutJs/view/frontend/layout/knockout_test_index.xml

    • Magenest_KnockoutJs/js/view/test is where knockout js code is contained in.
    • The “test” in <item name=”displayArea”…> test</item> is gonna be used later.
  • Now it’s time for the block that we declare in our layout: Magenest/KnockoutJs/Block/Test.php

    • The Block file must have getJsLayout function like this.
  • Next is a simple controller to handle the rendering: Magenest/KnockoutJs/Controller/Test/Index.php

    • A simple controller to render the page, not too much to concern.
  • Remember the block file that we just created above? Let’s make a template for it: Magenest/KnockoutJs/view/frontend/templates/test.phtml

    • This is where the content of the page we want to create is contained.
    • It will look like this.

    • The “<!– ko template: getTemplate() –><!– /ko –>” is to call the knockout template that we will declare later.
    • The scope:’test’ was declared in our layout file earlier

<item name=”displayArea” xsi:type=”string”>test</item>

  • This is where the fun part happen: The knockout Js that we have been talking about will be defined here. It would look like this: Magenest/KnockoutJs/view/frontend/web/js/view/test.js

 

    •  The template that declared in this file is the one we’re gonna create right after this step
    • The productList is declared as a knockout Observable Array, this is where the products details are contained and used.
    • The getProduct function is a simple ajax request to a controller (we will create this in the last file). Basically this function will send a request to the controller to retrieve a product and add it to the productList variable.
  • We almost there! Below is a simple template file for the Knockout Js: Magenest/KnockoutJs/view/frontend/web/template/test.html

 

    • We will have a button “Get Next Product” to get a product’s details. Every time we click this button a new product is added to the table without reloading the page.
    • For the table body use data-bind to get data. The data keys (entity_id, name, price, …) are set in each productList object which is set in the ajax controller.
  • Finally, we need a Controller for upcoming ajax request: Magenest\KnockoutJs\Controller\Test\Product.php

 

  • Ok, that’s enough coding for today . Let’s go checkout our result. (Remember to flush the cache in Magento and Refresh the cache in your browser to secure our success)
  • Knockout JS page Magento 2 tutorial

    Our Knockout JS page in frontend

    Knockout JS custom page frontend Magento 2 tutorial

    Each product will appear after you click the button

    Using Knockout JS to create custom page Magento 2

    Pretty cool stuff right?

  • There you have it, a custom page using knockout js, pretty easy right? Hope this topic is helpful for you.