Chapters Close

Easiest way to load your custom JS Component in Magento 2

Jun 17th, 2019 6 min to read

In this post, I will be guiding you on creating a JavaScript Component and load it on any page you need.

Let’s do it

Understanding the JS Components in Magento 2

  1. KnockoutJS component – ‘ko’
    • Checkout page is full of knockout js bindings
  2. jQueryUI component – ‘jquery/ui’
    • Add to cart on the product page & product listing page

Note: You cannot mix both the components code within a single JS component.

Technologies usage

  1. RequireJs
    • It is used for dependency management for all the javascript files
  2. KnockoutJs
    • MVVM pattern using data-bind
  3. jQuery UI Widgets
    • Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.

First create a custom module

KnockoutJS component

In your module’s web directory, create a simple.js.
Like, app/code/Aureatelabs/JSComponent/view/frontend/web/js/simple.js

    function(ko, Component) {
        'use strict';
        return Component.extend({
            firstName: ko.observable(''),
            initialize: function() {

Create a simple.phtml file in the frontend or CMS block and add below content:

<div data-bind="scope: 'component-name'">First name:
<div><input type="text" data-bind="textInput: firstName" /></div>
<p>Notes: Magento_Ui/js/core/app - this js is responsible for binding Knockout JS components with the DOM elements then you can use ko methods. Scope attribute - it is used to chain the JS and the HTML DOM together using the knockoutjs. Component-name - Must be unique on the current page. It can be any meaningful word and could be js file name. Use same name used in the</p>


  1. You can make use of MVVM technique via data-bind & methods of knockoutjs
  2. Assign external HTML template after js component is loaded
  3. Less dependent on jQuery and use of data-bind any elements is recommended.
  4. Changing the HTML template without modifying .PHTML template file.
  5. i18n translation supported
  6. You can set the default options if not given from the frontend
  7. Reusable code
  8. It can contain a list of components in a group like on the checkout page


  1. Template is rendered after the JS is loaded in the browser and takes time to display.
  2. External html template is already loaded then the new version will be loaded from the browser cache.

jQuery UI component

This method is used to add events to the HTML element when the JS component is loaded. Here you don’t cannot use the scope binding. While your JS component will get the DOM element object to implement the logic on it.How to use
attribute is used to bind the HTML DOM with the JS component.

], function($) {
    'use strict';

    $.widget('mage.simple2', { // component name = simple2
        options: {
            text: null,
            displayEle: null
         * Bind handlers to events
        _create: function() {
  ; // print the options in console
            // Save options to the element for later
  'options', this.options);
            // Add event and method to the element
                'keyup': $.proxy(this._method, this.element)
        _method: function() {
            // fetch the element options
            var options ='options');

    return $.mage.simple2; // return simple2 component

Then in your HTML template file use like the below:

<h2>Simple2 demo</h2>
<label> Name: <input type="text" data-mage-init="{"Aureatelabs_Simple2/js/simple2": { "text": "to-send-in-the-js-file", "displayEle": "#text"} }" /> </label>
<h2>Your text here: <small></small></h2>
<p>Notes: You can use the alias from the requirejs-config(1) or use the full path of the js file(2): For example: 1. RequireJS alias: <input type="text" data-mage-init="{"simple2": { "text": "to-send-in-the-js-file", "displayEle": "#text"} }" /> 2. RequireJS full path: <input type="text" data-mage-init="{"Aureatelabs_Simple2/js/simple2": { "text": "to-send-in-the-js-file", "displayEle": "#text"} }" /> 3. The data json inside the simple2 object is optional so you can use the empty object like: {} I.e. { "text": "to-send-in-the-js-file", "displayEle": "#text"}</p>

You will see the jQueryUI component:


  1. You can use the jQuery UI Widget to create a component
  2. This component has a constructor function _create to initialize your logic
  3. You can set the default options if not given from the frontend
  4. You can trigger this component from the element itself so you don’t have to rely on the page load using data-mage-init.
  5. Reusable code


  1. You cannot use the knockout js methods and data-bind here.
  2. You cannot use it in the checkout layout customizations.


Which JavaScript component is used in magento 2?

The JavaScript component used in Magento 2 is a package of JavaScript libraries & frameworks to build a powerful and flexible front end. These are jQuery, Knockout.js, RequireJS, LESS (CSS preprocessor), UI Widgets, and reusable UI elements. Along with creating custom themes, modules, and features, they dramatically increase page speed and seamlessly handle JS dependency.

How do I merge CSS and js in Magento 2?

To merge CSS and JS in Magento 2, follow the below-mentioned steps –

For CSS:
1. Log in to your Admin Panel and go to Stores —> Settings —> Configuration.
2. Navigate the left panel and expand Developers.
3. Next, select CSS Settings and expand the options.
4. Further, go to Merge CSS Files and set Yes from the dropdown list.
5. Thereafter, click on Save Config

For JS:
1. Repeat the first two steps mentioned above.
2. Now, select JavaScript Settings and expand the options.
3. Next, go to Merge JavaScript Files and set Yes from the dropdown list.
4. Then, click on Save Config.

How to add custom js in checkout page magento 2?

To add custom JS to the checkout page in Magento 2, follow the below-mentioned steps –
1. Create a web directory in the root of your custom module, and inside it, create a js directory.
2. Now, place your custom JS file inside this js directory.
3. Next, create a requirejs-config.js file in the root of your custom module.
4. Inside the above file, define the path of your custom JS file
5. Further, create a layout XML file in your custom module as app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml.
6. Inside the above file, add the following code to include the custom JS file for the checkout page:
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<script src="Vendor_Module::js/checkout_custom.js"/>

7. Thereafter, run the command php bin/magento setup:static-content:deploy and clear the cache.

How do you add the JS and CSS files into a custom module in magento 2?

To add the JS and CSS into a custom module in Magento 2, follow the below-mentioned steps –
1. Create a web directory in the root of your custom module, and inside it, create two directories: js and css.
2. Place your JS and CSS files inside their respective directories.
3. Create a requirejs-config.js file in the root of your custom module.
4. Define the path of your JS and CSS files
5. Include the JS and CSS files in specific layout/page.
6. Run the command static-content:deploy to enable changes.

Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 4,738 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    Thank You!

    We are reviewing your submission, and will be in touch shortly.