In Magento2 mainly we have seen on checkout page all Js components loads using xml, these components are defined in checkout_index_index.xml<\/strong> file.<\/p>\n\n\n\n We can also define our custom Js Components using our xml Layout File.<\/p>\n\n\n\n 1. Let’s create our required xml file: Webkul\/CustomJs\/view\/frontend\/layout\/customjs_index_index.xml<\/strong><\/p>\n\n\n\n 2. Let’s create our required Controller file: Webkul\/CustomJs\/Controller\/Index\/Index.php<\/strong><\/p>\n\n\n\n 3. Create Block file Webkul\/CustomJs\/Block\/CustomJs.php<\/strong><\/p>\n\n\n\n 4. Now we need to create our phtml file Webkul\/CustomJs\/view\/frontend\/templates\/account\/customjs.phtml<\/strong><\/p>\n\n\n\n Ok, now takes a closer look on above code. You can see we have defined this Method in our Block File, which is providing Js layouts. Let’s open it again and update with this code.<\/p>\n\n\n\n Now what we really did here, You will see that all the components with its children nodes are assigned to “Magento_Ui\/js\/core\/app.js”<\/strong> component.<\/p>\n\n\n\n We have called a function getTemplate() in our phtml file <\/strong><\/p>\n\n\n\n When this method is called Magento checks for the template defined in custom-js-field<\/strong> scope which we have defined as attribute in our phtml file<\/p>\n\n\n\n We have also defined children<\/strong> components in our customjs_index_index.xml<\/strong> file, let learn how we can use them as well.<\/p>\n\n\n\n Let create Html template file Webkul\/CustomJs\/view\/frontend\/web\/template\/js-group.html<\/strong> which we have defined.<\/p>\n\n\n\n Open this file and update with this code.<\/p>\n\n\n\n When this template load it will look for the area with name my-child-js<\/strong> in customjs_index_index.xml<\/strong> file.<\/p>\n\n\n\n we already defined it in our xml file.<\/p>\n\n\n\n Children items can also contains define component, we can define nested children as many as we want.<\/p>\n\n\n\n Now, we need to create Webkul\/CustomJs\/view\/frontend\/web\/js\/view\/my-child-js.js<\/strong> file<\/p>\n\n\n\n In this case, we call html template from our js component by passing template key with value on defaults object. Now, we need to create html template Webkul\/CustomJs\/view\/frontend\/web\/template\/view\/my-child-js.html<\/strong> file<\/p>\n\n\n\n That’s It!<\/p>\n\n\n\n If you require technical support, feel free to email us at support@webkul.com<\/a>.<\/p>\n\n\n\n Additionally, explore a wide array of solutions to boost your store\u2019s capabilities by visiting the Adobe Commerce modules <\/a>section.<\/p>\n\n\n\n For expert advice or to create tailored features, hire Adobe Commerce Developers<\/a> for your project.<\/p>\n","protected":false},"excerpt":{"rendered":"<?xml version="1.0"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_CustomJs\n * @author Webkul\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <update handle="customer_account"\/>\n <body>\n <referenceContainer name="content">\n <block class="Webkul\\CustomJs\\Block\\CustomJs" name="customjs_test" template="Webkul_CustomJs::account\/customjs.phtml" cacheable="false">\n <\/block>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?php\nnamespace Webkul\\CustomJs\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\n\/**\n * Webkul Marketplace Landing page Index Controller.\n *\/\nclass Index extends Action\n{\n \/**\n * @var PageFactory\n *\/\n protected $resultPageFactory;\n\n \/**\n * Constructor\n *\n * @param Context $context\n * @param PageFactory $resultPageFactory\n *\/\n public function __construct(\n Context $context,\n PageFactory $resultPageFactory\n ) {\n $this->resultPageFactory = $resultPageFactory;\n parent::__construct($context);\n }\n\n \/**\n * Execute Action\n *\n * @return void\n *\/\n public function execute()\n {\n $resultPage = $this->resultPageFactory->create();\n $resultPage->getConfig()->getTitle()->set(__('Custom JS'));\n\n return $resultPage;\n }\n}<\/pre>\n\n\n\n<?php\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_CustomJs\n * @author Webkul\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\CustomJs\\Block;\n\nclass CustomJs extends \\Magento\\Framework\\View\\Element\\Template\n{\n \/**\n * @var array\n *\/\n protected $jsLayout;\n\n \/**\n * @param \\Magento\\Framework\\View\\Element\\Template\\Context $context\n * @param array $data\n *\/\n public function __construct(\n \\Magento\\Framework\\View\\Element\\Template\\Context $context,\n array $data = []\n ) {\n parent::__construct($context, $data);\n $this->jsLayout = isset($data['jsLayout']) && is_array($data['jsLayout']) ? $data['jsLayout'] : [];\n }\n\n \/**\n * @return string\n *\/\n public function getJsLayout()\n {\n return \\Zend_Json::encode($this->jsLayout);\n }\n}<\/pre>\n\n\n\n<div id="customjs-component" data-bind="scope:'custom-js-field'">\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <script type="text\/x-magento-init">\n {\n "#customjs-component": {\n "Magento_Ui\/js\/core\/app": <?php \/* @escapeNotVerified *\/ echo $block->getJsLayout();?>\n }\n }\n <\/script>\n<\/div><\/pre>\n\n\n\n
we have initialized our custom compenent and load the js components by getJsLayout() Method.<\/p>\n\n\n\n
But we haven’t defined jsLayout in our customjs_index_index.xml<\/strong> file yet.<\/p>\n\n\n\n<?xml version="1.0"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_CustomJs\n * @author Webkul\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <update handle="customer_account"\/>\n <body>\n <referenceContainer name="content">\n <block class="Webkul\\CustomJs\\Block\\CustomJs" name="customjs_test" template="Webkul_CustomJs::account\/customjs.phtml" cacheable="false">\n <arguments>\n <argument name="jsLayout" xsi:type="array">\n <item name="components" xsi:type="array">\n <item name="custom-js-field" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="config" xsi:type="array">\n <item name="template" xsi:type="string">Webkul_CustomJs\/js-group<\/item>\n <\/item>\n <item name="children" xsi:type="array">\n <item name="my-child-js" xsi:type="array">\n <item name="sortOrder" xsi:type="string">1<\/item>\n <item name="component" xsi:type="string">Webkul_CustomJs\/js\/view\/my-child-js<\/item>\n <item name="displayArea" xsi:type="string">my-child-js<\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/arguments>\n <\/block>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
We have defined the jsLayout as arguments, so we can get all these arguments in our Block File as<\/p>\n\n\n\n$this->jsLayout = isset($data['jsLayout']) && is_array($data['jsLayout']) ? $data['jsLayout'] : [];<\/pre>\n\n\n\n
<div id="customjs-component" data-bind="scope:'custom-js-field'"><\/pre>\n\n\n\n
<item name="components" xsi:type="array">\n <item name="custom-js-field" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="config" xsi:type="array">\n <item name="template" xsi:type="string">Webkul_CustomJs\/js-group<\/item>\n <\/item><\/pre>\n\n\n\n
<!-- \n \/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_CustomJs\n * @author Webkul\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n -->\n \n<!-- ko foreach: getRegion('my-child-js') -->\n<!-- ko template: getTemplate() --><!-- \/ko -->\n<!--\/ko--><\/pre>\n\n\n\n<item name="children" xsi:type="array">\n <item name="my-child-js" xsi:type="array">\n <item name="sortOrder" xsi:type="string">1<\/item>\n <item name="component" xsi:type="string">Webkul_CustomJs\/js\/view\/my-child-js<\/item>\n <item name="displayArea" xsi:type="string">my-child-js<\/item>\n <\/item>\n<\/item><\/pre>\n\n\n\n
\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_CustomJs\n * @author Webkul\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n\/*jshint browser:true jquery:true*\/\n\/*global alert*\/\n\ndefine(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {\n 'use strict';\n return Component.extend({\n defaults: {\n template: 'Webkul_CustomJs\/view\/my-child-js'\n },\n initialize: function () {\n this.customerName = ko.observableArray([]);\n this.customerData = ko.observable('');\n this._super();\n },\n\n addNewCustomer: function () {\n this.customerName.push({name:this.customerData()});\n this.customerData('');\n }\n });\n});<\/pre>\n\n\n\n
Also, we can call same html template file from xml for example:<\/p>\n\n\n\n<item name="config" xsi:type="array">\n <item name="template" xsi:type="string">Webkul_CustomJs\/js-group<\/item>\n <\/item><\/pre>\n\n\n\n
<div class="component-wrapper">\n <div class="field">\n <label class="label" for="email"><span data-bind="i18n: 'New Record'"><\/span><\/label>\n <div class="control">\n <input name="customername"\n id="customername"\n type="text"\n class="input-text"\n data-bind="value: customerData">\n <\/div>\n <\/div>\n <div class="primary">\n <button type="button" class="action action-login secondary" data-bind="click: addNewCustomer">\n <span data-bind="i18n: 'Save'"><\/span>\n <\/button>\n <\/div>\n\n <div class="customer-list" style="width: 20%;background: gray;margin-top: 10px;" data-bind="foreach: customerName">\n <li data-bind="text: name"><\/li>\n <\/div>\n<\/div><\/pre>\n\n\n\n