Chapters Close

How to extend existing jquery widget in Magento 2?

Table of Contents

This article will help you to understand how to extend an existing jquery widget in Magento 2. Sometimes, there may arise situations where a project requires specific/custom approach, in that case, developers need to modify the default logic.

Let’s take an example where we will make certain changes to the main navigation javascript part.

The chief file responsible for the functioning of the navigation menu is menu.js located at [project_root]/lib/web/mage/ with other default js system components.

Now, if you want to extend or overwrite it, you’ll have to make sure that you follow the steps given below:

Step 1

To properly extend the parts of menu.js with our custom content, the first step is to map our js file so that the system loads it instead of the default file.

Magento uses equirejs-config.js files to successfully map js components on the system. The first thing that matters is to understand where to place requirejs-config.js. It can be placed at several levels.

We will create a file that will replace the menu.js file. Let’s call it menu-custom.js and place it under [our theme]/web/js/ directory.

Step 2

Next, we will have to create the requirejs-config.js file and place it under [our theme]/root directory. This will help us to map our file so as to replace the default one. 

var config = {
   "map": {
       "*": {
           "menu": "js/menu-custom"
       }
   }
};

Step 3

We will extend default functionality and for this, we will be using the jQuery widget factory. We will place the following code in our newly created menu-custom.js file.

define([
       'jquery',
       'jquery/ui',
       'mage/menu'],
   function($){
       $.widget('kiwicommerce.menu', $.mage.menu, {
           _init: function () {
               console.log("This message is from menu-custom.js");
           },
           toggle: function () {
               console.log("This message is from menu-custom.js");
           }
       });
       return $.kiwicommerce.menu;
   });

Our custom widget instance called kiwicommerce.menu is extending default $.mage.menu and in this example, we will be extending two methods, that are _init and toggle. Toggle method is in charge of toggle navigation on mobile phones while the _init method is in charge of the component initialization.

Here we can add our custom logic as needed. Currently, we have added a simple console message for testing.

Thank you for reading this article. Your feedback is welcome in the comments section, and we’re available to assist with anything related to Magento development.

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 3,098 subscribers

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

    Thank You!

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