1

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

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

code\NAMESPACE\MYMODULE\view\frontend\web\js\gallery_brand_logo.js

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
            if(config.brandlog){            
                $('.fotorama__nav-wrap').css('display', 'block');               
                $('.fotorama__nav-wrap').addClass('fotorama__nav-wrap--vertical');

                $('.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 '16 at 8:49
  • Have you resolved the No template was found by selector: null issue ? – Sree Oct 11 '18 at 7:23
  • Have you an idea about how to override _calcProductPrice function in custom scripts.js file (using mixins)? – Dhaduk Mitesh Nov 1 '18 at 7:20
1

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 pradeep.kumarrcs67@gmal.com
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'Magento_Checkout/js/model/quote'
], function ($,quote) {
    'use strict';
console.log("Called this Hook.");

     return function(targetModule){
        //if targetModule is a uiClass based object
        return targetModule.extend({
            validateShippingInformation:function()
            {
                console.log("validateShippingInformation.");
                 this.errorValidationMessage('Pradeep.');
                 //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, privacy policy and cookie policy

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