Extend Magento 2 jQuery Widget - Paul Meștereagă
Magento 2

Extend Magento 2 jQuery Widget

In this short tutorial we will learn how to extend Magento 2 jQuery widget with our custom logic.

author

Paul Mestereaga

June 18, 2019

In this short tutorial we will learn how to extend Magento 2 jQuery widget with our custom logic.

To extend a default Magento jQuery widget, create <your_widget_name>.js with the following contents:

define([
  'jquery',
  'jquery/ui',
  'mage/<widget.name>' // usually widget can be found in /lib/web/mage dir
], function($){
 
  $.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, { ... });
 
  return $.<your_namespace>.<your_widget_name>;
});

Where the following notation is used:

  • <your_namespace>.<your_widget_name> the name of your custom widget. According to the jQuery widgets naming convention, must contain a namespace and name.

  • mage.<widget.name> the name of the Magento widget that you extend.

For information about how to initialize your custom widget in a .phtml template, see the JavaScript initialization topic.

Practical Example of extending Magento 2 jQuery Widget

Let’s see what we need to do to extend $.mage.configurable

First, we need to make our module has Magento_ConfigurableProduct defined as sequence in module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
        </sequence>
    </module>
</config>

Secondly add requirejs-config.js file in view/frontend directory with code:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_ModuleName/js/configurable'
        }
    }
};

Finally add configurable.js file in view/frontend/web/js directory with:

define([
    'jquery',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){
 
    $.widget('custom.configurable', $.mage.configurable, {
        // the code you want to override
    });
 
    return $.custom.configurable;
});

Make sure to regenerate the component list in config.php and this is how you extend Magento 2 jQuery Widget.

You can check my previous posts about Magento 2.

Magento 2 from Zero to Beginner Free Online Course

In 10 hours you will have all the basic knowledge so that you could develop your modules without wandering around how to implement stuff.

Related Posts

How to create a product attribute using Data Patches in Magento 2.3

How to create a product attribute using Data Patches in Magento 2.3

26 Mar 2020

|

Paul Mestereaga

This is a short tutorial in which we will learn to create a product attribute using Data Patches in Magento 2.3

Declarative schema in Magento 2.3+

Declarative schema in Magento 2.3+

16 Mar 2020

|

Paul Mestereaga

In this tutorial we will learn the how to configure a declarative schema in Magento 2.3, perform database operations using declarative schema, create a schema whitelist and create data and schema patches.

optimize-magento-preview

FREE!

Magento 2
Optimization guide

Wondered how you can make your Magento load faster? Wonder no more. Here is a step by step guide that helps you.