How to write a page using knockout JS in Magento 2?

In this blog, I will show you how to write a page using knockout JS in Magento 2.

Now I will create a module Webnexs_Webpos and the page will have the URL {domain/Webpos}. Here are the following steps to help you to do it by yourself:

  1. File Layout
  2. File block
  3. File template of block
  4. Write an outlook model knockout JS in Magento
  5. Content of the page in the template of knockout
Get build your Magento eCommerce store with 300+ stunning features today, click here!!!

How to write a page using knockout JS in Magento 2?

File Layout

webpos_index_index.xml:

<?xml version="1.0"?>

<page layout='1column' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" >

 <body>

 <referenceContainer name="content">

<block class="Webnexs\Webpos\Block\Customer\Lists" before="-" cacheable="false" template="customer/list.phtml">

 <arguments>

 <argument name="jsLayout" xsi:type="array">

<item name="components" xsi:type="array">

  <item name="customer-list" xsi:type="array">



                 <item name="component" xsi:type="string">Webnexs_Webpos/js/view/customer/list</item>



     <item name="config" xsi:type="array">



                                  <item name="template" xsi:type="string">Webnexs_Webpos/customer/list</item>



                              </item>



                          </item>



                      </item>



                  </argument>



              </arguments>



          </block>



      </referenceContainer>



  </body>



</page>

Note: From the following file, you can observe

  • The file block1:Webnexs\Webpos\Block\Customer\Lists
  • The file template: customer/list.phtml
  • The outlook model of knockout Js  Webnexs_Webpos/js/view/customer/list
  • The file template of knockout js:Webnexs_Webpos/customer/list

File Block

Webnexs\Webpos\Block\Customer\Lists:

<?php

namespace Webnexs\Webpos\Block\Customer;

/**

* Class Lists

* @package Webnexs\Webpos\Block\Customer

*/

class Lists extends \Magento\Framework\View\Element\Template

{

 /**

  * Lists constructor.

 * @param \Magento\Framework\View\Element\Template\Context $context

* @param array $layoutProcessors

* @param array $data

*/

 public function __construct(

 \Magento\Framework\View\Element\Template\Context $context,

 array $layoutProcessors = [],

array $data = []

  ) { parent::__construct($context, $data);

 $this->layoutProcessors = $layoutProcessors;

}

/**

* @return string

  */

public function getJsLayout()

 {

 foreach ($this->layoutProcessors as $processor) {

 $this->jsLayout = $processor->process($this->jsLayout);

 }

 return parent::getJsLayout();

 }

}

Note: It needs function getJsLayout. We call it in the template file.

File Template of block

<div id="customer-page">

 

  <div id="block-customer-list" data-bind="scope:'customer-list'" class="block">

 

      <!-- ko template: getTemplate() --><!-- /ko -->

 

      <script type="text/x-magento-init">

 

          {

 

              "#block-customer-list": {

 

                  "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

 

              }

 

          }

 

      </script>

 

  </div>

 

</div>

Note:

A“Customer list” is in the file layout webpos_index_index.xml

Write an outlook model knockout JS in the Magento

define(

  [

  'jquery',

 'ko',

 'uiComponent'

  ],

 function ($,ko, Component) {

 "use strict";

var listCustomers = ko.observableArray([]);

 return Component.extend({

 getListCustomers : function(){

 if(!listCustomers().length) {

 jQuery.ajax({



       url: 'http://louis.com/public_html/magento2/index.php/webpos/index/customerList',

  type: 'POST',

 complete: function (data) {

listCustomers(JSON.parse(data.responseText));

 },

});

}

  return listCustomers;

}

});

 }

);

Content of the page in the template 

<table>

<thead>

<tr>

 <th>ID</th>

<th>Email</th>

<th>Name</th>

<th>Created At</th>

 </tr>

</thead>

<tbody data-bind="foreach: getListCustomers()">

 <tr>

 <td data-bind="text: entity_id"></td>

 <td data-bind="text: email"></td>

 <td data-bind="text: firstname  + ' ' + lastname"></td>

<td data-bind="text: created_at"></td>

</tr>

</tbody>

</table>

<thead>

 <tr>

<th>ID</th>

<th>Email</th>

 <th>Name</th>

<th>Created At</th>

</tr>

  </thead>

 <tbody data-bind="foreach: getListCustomers()">

 <tr>

 <td data-bind="text: entity_id"></td>

 <td data-bind="text: email"></td>

 <td data-bind="text: firstname  + ' ' + lastname"></td>

 <td data-bind="text: created_at"></td>

</tr>

</tbody>

</table>


The above steps will help you to write a page using knockout JS in Magento 2.

How to write a page using knockout JS in Magento 2

Last Update: February 22, 2021  

February 22, 2018   1983   Nandini Ramachandran    Knockout Js, Magento2    
Total 3 Votes:
2

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

1 Comment

  • I liked this blog
    In general I haven’t found much good Magento2 documentation.
    webnexs has been a good help for me with my Magento2 studies.

Leave a Reply

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

Facebook
Twitter
INSTAGRAM
LinkedIn