Blog

extend jQuery widget in magento 2.x

ikodes-technology-design

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;
    };
});

 

Related Posts


January 17, 2020

What are the Use of Directory Submission in SEO?

Blog indexes make your blog unmistakable past the domains of your own blogging circle. Here are a portion of the advantages of joining blog registries that influence the procedure to do lucrative. 1) Get quality and safe backlinks: Most blog registries are physically managed for any wrong entries. Subsequently, these destinations are sans spam and

January 16, 2020

Send To Friend Woo commerce plugin

Send to friend enables your clients to find the pleasant method to send for friends. Appropriate for all WooCommerce topics. Rather than an essential email which incorporates a connection, your visitors can send the item itself to anybody with this module. An email see window shows up when you tap the button. Here you see