Ikodes Technology

extend jQuery widget in magento 2.x
Extend jQuery widget in magento 2: In this blog we will see how we can extend magento jQuery widget. We can extend jQuery widgets by using mixins.

In java script mixin is a class whose methods are added to, or mixed in, with another class.

In order to extend jQuery widget first we need to declare a mixin in requirejs-config.js file like below.
var config = {
config: {
mixins: {
'Vendor_ParentModule/js/super': {
'Vendor_ChildModule/js/child': true
}
}
}
};



Now for example parent widget(Vendor_ParentModule/js/super) is like below

define([
"jquery",
], function ($) {
"use strict";
$.widget("mage.customWidget", {
_create: function() {
this.foo();
},
foo: function() {
console.log("ikodes class");
}
});
return $.mage.customWidget;
});

Then in child widget(Vendor_ChildModule/js/child) we can override it’s method like below

define([
'jquery'
], function ($) {
'use strict';
var widgetMixin = {
foo: function() {
console.log("do your stuff...");

return this._super(); // parent method will be called by _super()
}
};
return function (parentWidget) {
$.widget('mage.customWidget', parentWidget, widgetMixin);
return $.mage.customWidget;
};
});

 



Author Bio

ikodes Technology

Manager of Marketing for Red Stag Fulfillment, an ecommerce fulfillment warehouse that was born out of ecommerce. He has years of experience in ecommerce and business development. In his free time, Jake enjoys reading about business and sharing his own experience with others.

Go Back

Expand Your Digital Horizons With Us

Start a new project or take an existing one to the next level. Get in touch to start
small, scale-up, and go Agile.

    Math Captcha 4 + 2 =