How to rewrite widget function with mixins Magento 2

In this post, we will understand how to use Mixins in Magento 2.

What is Mixin?

Mixins are a language concept that allows a programmer to inject some code into a class

A mixin is a class containing methods that can be used by other classes without a need to inherit from it.


If we want to perform an extra action or extend a Javascript functionality without completely overwriting it, in this case mixin comes in picture. Let’s start with an example

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Codedecorator_Learn/js/cd-catalog-add-to-cart-mixin': true

After creating above file, we need to create cd-catalog-add-to-cart-mixin.js file where we will extend the functionality of the submitForm function.

], function () {
    'use strict';
    return function (widget) {
        $.widget('mage.catalogAddToCart', widget, {
             * Handler for the form 'submit' event
             * @param {jQuery} form
            submitForm: function (form) {
                this.ajaxSubmit(form); // original code
                this.doSomethingAfterSubmit(); // add every thing you want
             * Do something
            doSomethingAfterSubmit: function () {
                // Do stuff
        return $.mage.catalogAddToCart;

Try to add product into cart and see your change is coming in or not. If not then try to flush cache or deploy the content.

Happy coding guys 😀

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Reply

Your email address will not be published. Required fields are marked *