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.