Menu Close
    Hire us Request quote Reading list Switch to dark mode

    How to extend jQuery widget in magento 2

    How to 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("super 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;
        };
    });

    In this way we can override all the methods of jQuery widget in Magento 2. If you have any query then comment below.

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close