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:
- File Layout
- File block
- File template of block
- Write an outlook model knockout JS in Magento
- 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.
Last Update: February 22, 2021
February 22, 2018 1983 Nandini Ramachandran Knockout Js, Magento2
Total 3 Votes:
2
1
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.