Extending javascript methods Magento way

Hello, in this article I am going to show you how to properly extend javascript files in Magento 1. We’ve already covered the topic of extending Magento 2 default JS components in this article, but it’s time to revise how it’s done in Magento 1. So, let’s get to it! 

For examples we are going to use prototype’s validation script located under js/prototype/validation.js and prototype javascript file located under js/prototype/prototype.js.

Extending javascript in Magento is resolved by loading the javascript files with rewritten classes and methods after the original ones. Common improper way of extending javascript is copying whole files that contain methods or classes we want to extend and making changes where we need them. This causes code pool to increase and it is completely unnecessary.

There are two ways we can extend Magento build in javascript, depending on whether the class we are extending is already extended in original files, and on what way.

Lets get it started!

If the class has not been extended using prototype’s Object.extend() method, we can use Class.create() method which allows us to call parent method when extending by using $super variable as an first and extra argument. For example we can use Ajax.Request class located in js/prototype/prototype.js.

First create a new file under js/inchoo/prototype.js in project root:

/*
 * INCHOO extend of prototype.js
 */
 
var InchooAjaxRequest = Class.create(Ajax.Request, {
    request: function($super, url){
        // your changes before
        $super(url); // call method from parent class
        // your changes after
    }
});
 
// replace parent class with extended class where needed and call the extended method
var ajaxBase = new InchooAjaxRequest();
ajaxBase.request('http://yourtesturl.com');

Next include it in your layout where it is needed, for example in local.xml. Also make sure it is included after the original (js/prototype/prototype.js in our case):

<default>
	<!-- rest of the layout -->
        <reference name="head">
            <action method="addJs"><script>inchoo/prototype.js</script></action>
	</reference>
        <!-- rest of the layout -->
</default>

 Second way is used if the class we are extending has already been extended using the prototype’s Object.extend() method, then we can extend it again using the same method.

First create a new file under js/inchoo/validation.js in project root:

/*
 * INCHOO extend of validation.js
 */
 
// check if Validation class exists and is property of current window object
// (we use this to double check we're not extending object that doesn't exist)
if('Validation' in window) {
    Object.extend(Validation, {
        test : function(name, elm, useTitle) {
            // your changes START
            Validation.whatDoesThisButtonDo();
            // your changes END
        },
        isVisible : function() {
            // you can extend multiple methods!
        },
        whatDoesThisButtonDo : function() {
            // or add new methods!
 
            // what does this button do?
            console.log('bam!');
        }
    });
}

Next, include it in your layout where it is needed, for example in local.xml. Also make sure it is included after the original (js/prototype/validation.js in our case):

<default>
	<!-- rest of the layout -->
        <reference name="head">
            <action method="addJs"><script>inchoo/validation.js</script></action>
	</reference>
        <!-- rest of the layout -->
</default>

Important part being the:

<action method="addJs"><script>inchoo/validation.js</script></action>

This way you only extend methods you need, and not the whole class as you would by just copying original file and then editing it. And what is great, you can extend multiple methods + add new ones you need. And that’s it!

First way is better because you can use $super variable to use parent class methods, but you can’t use it always as the second way.

If you have issues with it, first make alert or console.log on top of extended javascript file just to be sure you’re including the file correctly.

Good luck!