I need to extend core js in my module or theme in this case how to do it,

I can achieve it by keeping the complete file in my theme and do the changes, in this case, we will lose updates and if we update Magento then my website will break

How to do it?

2 Answers 2


We can extend the core js in below way

Create a requirejs-config.js in MYMODULE/view/frontend

var config = {
    config: {
        mixins: {
            'mage/gallery/gallery': {
                'NAMESPACE_MYMODULE/js/gallery_brand_logo': true

Then create gallery_brand_logo.js in


define(['jquery','mage/utils/wrapper'], function ($, wrapper) {
    'use strict';

    return function (initialize) {
        return wrapper.wrap(initialize, function (initialize, config, element) {
            // my code before

            initialize(config, element);    

            // my code after
            //brand log
                $('.fotorama__nav-wrap').css('display', 'block');               

                $('.fotorama__nav').before('<div style="border: 1px solid red;color: red;height: 70px;" class="brandlog"><img src="'+config.brandlog+'" /></div>');             
            //brand log end

Note :- In above I used custom option brandlog, pass this value in product/view/gallery.phtml so i extend product/view/gallery.phtml also and

<script type="text/x-magento-init">
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "brandlog": "<?php /* @escapeNotVerified */ echo $logopath; ?>",
  • do you get encounter with no template warning before? I mixins core Magento_Catalog/js/product-gallery widget for my custom js and everytime i call it. Firebug show warning No template was found by selector: null. Of course my script not running. I Already check entire template html
    – mrtuvn
    Mar 17, 2016 at 8:49
  • Have you resolved the No template was found by selector: null issue ? Oct 11, 2018 at 7:23
  • Have you an idea about how to override _calcProductPrice function in custom scripts.js file (using mixins)? Nov 1, 2018 at 7:20

in some case js class as more then one function at that time you can not follow below answer

if you want to extend the specific function follow below code

i just extend the shipping address validation at the time of checkout

 * @author [email protected]
/*jshint browser:true jquery:true*/
/*global alert*/
], function ($,quote) {
    'use strict';
console.log("Called this Hook.");

     return function(targetModule){
        //if targetModule is a uiClass based object
        return targetModule.extend({
                 //return false;

                 var result = this._super(); //call parent method
                    //do your new stuff
                return result;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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