Create a Magento UI Component to instantiate a Knockout.js view model

We will now create a custom UI Component in Magento and instantiate it on the frontend.

Adding the UI Component in the Layout XML

First, open the <block> tag in the Layout XML file. Inside the <block> tag, create an <arguments> node. The first argument will be named jsLayout with a capital L, and it will have the “xsi:type” of “array”.

Inside the <arguments> node, create an <item> node with the name “components” and “xsi:type” of “array”. Nest two more <item> nodes within the “components” node.

The first <item> node will have the name of our UI Component, which we’ll call skuLookup. This will also have the “xsi:type” of “array”. In this node, pass another <item> node with the name “component” and the “xsi:type” of “string”.

Finally, set the value for this item component equal to a special string syntax of the location of our UI Component class. This will be Macademy_InventoryFulfillment/js/sku-lookup.

Creating the UI Component JavaScript File

Now, let’s create the UI Component JavaScript file. Go to your module, view/frontend, and create a new directory named “web”. The location of the UI Component will be js/sku-lookup.js.

In the sku-lookup.js file, return an instance of the “uiComponent” class using the “define” function. Pass the “uiComponent” dependency and create a function callback with the first parameter being “Component”. Inside the function callback, simply return “Component”.

Remember to define strict mode using “use strict” since it is a common convention in Magento JavaScript.

Binding the UI Component to the Template

Open up the .phtml template file. We need a way to instantiate the UI Component and bind it to the div element. Create a new <script> tag with the “type” attribute set to “text/x-magento-init”. This custom tag is used for initializing JavaScript files in Magento.

Inside the <script> tag, create an empty JavaScript object with a property that is a query selector for the DOM element to link to the UI Component. In this example, the DOM element will be the shipping-plan element, which can be referenced with a pound sign (#) and the element’s name.

Assign an object to this property with the UI Component initialized using the Magento_UI module and js/core/app. Assign the value of jsLayout from the block using $block->getJsLayout.

To bind the scope of the UI Component to the DOM element, use the “data-bind” attribute with the custom data binding scope. The value passed to the scope will be equal to the name of the UI Component, in this case, skuLookup.

Testing the UI Component on the Frontend

Refresh the frontend of the site. If no errors appear, it confirms that the UI Component is set up correctly.

Understanding the UI Component Instantiation Process

The x-magento-init script tag kicks off custom JavaScript and makes it available to the shipping-plan DOM element. It passes the data from jsLayout to the Magento UI module, which is an array of components. Each component file is linked to the UI Component.

Magento’s custom “scope” data binding links the skuLookup UI Component to Knockout using “data-bind”. The contents of the <script> tag do not have anything to do with Knockout. Instead, it sets up the UI Component, adds it to the uiRegistry, and instantiates the related Knockout.js view model.

To further understand the custom “scope” data binding, you can explore the Magento UI module at view/base/web/js/lib/knockout/bindings/scope.js. This file shows how Magento creates the scope binding and registers it with Knockout.