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.

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.

Related Posts

Console Commands in Magento 2

21 May 2019

|

Paul Mestereaga

In this tutorial I will give an overview of the console commands in Magento 2 and we will learn how to build a custom console command in Magento 2

View Layer in Magento 2

7 Jun 2018

|

Paul Mestereaga

In this tutorial I will give an overview of the Magento 2 View Layer. We will learn how to build Blocks, Templates and Layouts.

Optimize Magento 2

Free guide to help you optimise your Magento 2 installation and improve your website speed

Get your free optimisation guide.

Enter your name and email to join my mailing list in exchange for the free download. You can opt out any time.


Can I email you?

I will use the information you provide on this form to stay in touch, send you updates, and send marketing emails about our products and services. You can unsubscribe at any time through a link in the footer of an email from me. For more information, please read the Privacy Policy.