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.

Is your Magento slow?

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

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.