1

I want to override core js in custom module.

    define([
        'quickSearch',
        'jquery',
        'underscore',
        'mage/template',
        'mage/translate',
        'jquery/ui'
    ], function (quickSearch, $, _, mageTemplate, $translate) {
        'use strict';

        var autoComplete = {
            ajaxRequest: null,
            url: null,
            timer: null,
            delay: 500,
            currentUrlEncoded: null,
            minSizePopup: 700,
            siz

ePopupBreakpoint: 550,
        mobileView: 768,
        windowWidth: $(window).width(),
        proportionSide: 0.33,

        init: function (url, layout, currentUrlEncoded) {
            this.url = url;
            this.layout = layout;
            this.currentUrlEncoded = currentUrlEncoded;
            this.extend();
        },

        extend: function () {
            var _caller = this;
            var methods = {
                options: {                   
                    responseFieldElements: '.search-item',
                    minChars: this.layout.minChars
                },
                _onPropertyChange: function () {
                    if (_caller.timer != null) {
                        clearTimeout(_caller.timer);
                    }
                    _caller.timer = setTimeout(function () {
                        _caller._onPropertyChange.call(this);
                    }.bind(this), _caller.delay);
                },

                _create: this._create,               
                _searchDifineHideOrClear: this.difineHideOrClear,              
            };
            $.extend(true, quickSearch.prototype, methods);
        },

        _create: function () {           
            this._searchDifineHideOrClear();          
        },
        difineHideOrClear: function () { 
            var self = this;

            $('body').on('click', function (e) { 
                var target = $(e.target);

                if (target.hasClass('search-close')) { 
                    self._searchClearField();
                }

                if (!target.closest('.search-form-container').length) { 
                    self._searchHidePopup();
                }
            });
        },        

    };

    return autoComplete;
});

Mixin Js :-

config: {
        mixins: {
            'XXX_YYY/js/autocomplete': {
                'AAA_ZZZ/js/autocomplete': true
            }
        }
    }

Js file

define([
    'quickSearch',
    'jquery',
    'underscore',
    'mage/template',
    'mage/translate',
    'jquery/ui'
], function (quickSearch, $, _, mageTemplate, $translate) {
    'use strict';

    var mixin = {
        difineHideOrClear: function () { 
            var self = this;

            //clear field
            $('.search-close').on('click', function (e) { 
                self._searchClearField();
            });

            $('body').on('click', function (e) {
                var target = $(e.target);

                if (target.hasClass('search-close')) {
                    self._searchClearField();
                }

                if (!target.closest('.search-form-container').length) {
                    self._searchHidePopup();
                }
            });
        }
    };
    return function (target) {
        return target.extend(mixin);


      };
    });
  • I have tried to override using mixin ...but not working – Mano M Mar 26 at 10:01
  • 1
    Mixin is used to extend the functionality not for rewriting, in order to override you gotta use requirejs-config.js to map the core to your overridden path – Prathap Gunasekaran Mar 26 at 10:03
  • 3
    Possible duplicate of Extending / Overriding JS in Magento 2 – Prince Patel Mar 26 at 10:06
  • we use mixin only for widget type? – Mano M Mar 26 at 10:18
0

add this:

[Namespace]/[Module]/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            '[Namespace]_[Module]/js/js-file-name':  //Path Of Js Which You Override
            '[Namespace]_[Module]/js/js-file-name' //Your Js Path
        }
    }
};

And Create Js File In Location "[Namespace]_[Module]/js/js-file-name"

0

Create requirejs-config.js file as :

[Namespace]/[Module]/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'PathOfFileYouWantToOverride':[Namespace]_[Module]/js/nameofthefile'
        }
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.