How to use Knockout JS on a Magento 2 Frontend Page

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.

 

Share

Comments (10)

  1. ErickWaila
    wh0cd1192216 [url=http://zoloft0.gdn/]zoloft[/url] [url=http://amoxicillin20.top/]where to buy amoxicillin[/url] [url=http://buytadalafil2014.top/]buy tadalafil[/url] [url=http://buylevitra-4.top/]levitra[/url]
  2. Alinarok
    Hello! Did you know that the size of the discount on purchases in Alliexpress can reach 70-90%? No? Then you can check for yourself:[url=http://got.by/e98qm] Click to view a quick tutorial[/url]
  3. SailipVaf
    http://undeclaiming.xyz norsk kasino http://undeclaiming.xyz - norsk kasino
  4. Magento 2 SEO module Free by Mageplaza
    Because many agencies providing their high quality services on rent. You can do so by ensuring that you do constant research to keep updated with the frequently used keywords by your target consumers. After all, wouldn't it be great if users could find your individual pages, not just your front page.
  5. derm exclusive vs meaningful beauty
    Helpfuⅼ іnfоrmation. Fortunate me I Ԁiscovered your wеbsite accidentaⅼly, and I'm surprised why this twist of fate didn't ϲame about in advance! I bookmarked it.
  6. DermExclusiveVSMeaningfulBeauty.Weebly.Com
    Everything is verү open with a very clear clarification of the challenges. It was truⅼy informative. Your website is very helpful. Many thanks for sharing!
  7. ZacTenoriob
    I see your page needs some unique & fresh articles. Writing manually is time consuming, but there is solution for this hard task. Just search for; Miftolo's tools rewriter
  8. Logan
    Nice, now i know how to convert my prolix js script. New way to make a better magento2 extensions. Thanks a lot.

Speak Your Mind

31 − 22 =