How to override product.js file in magento

Question

I want to override the product.js file to add some extra values in some functions.I have copy the file from js/mage/adminhtml/product.js to my folder like js/myfolder/myproduct.js.How can i use the functions of the file as i try and its not working for me .When i change the object name than it will show no error but nothing happend (Products.Gallery = Class.create() orginal is Product.Gallery = Class.create();). Can anyone tell me how to use all the functions of myproduct without conflicting of original funcitons.

Thanks

Answer 1

Let's say you're going to override function loadImage from js/mage/adminhtml/product.js in product edit page.

Create your custom js: js/myfolder/myproduct.js:

Product.Gallery.addMethods({
    loadImage : function(file) {
        alert('hi there');
        var image = this.getImageByFile(file);
        this.getFileElement(file, 'cell-image img').src = image.url;
        this.getFileElement(file, 'cell-image img').show();
        this.getFileElement(file, 'cell-image .place-holder').hide();
    }
});

Reference: http://prototypejs.org/learn/class-inheritance.html

Then in your layout xml add your custom js:

<adminhtml_catalog_product_edit>
    <reference name="head">
        <action method="addJs"><script>myfolder/myproduct.js</script></action>
    </reference>
</adminhtml_catalog_product_edit>

Using this method, function loadImage will be overridden only if you include your js/myfolder/myproduct.js.

PS: Make sure js/myfolder/myproduct.js is included after js/mage/adminhtml/product.js (though it is like that by default since js/mage/adminhtml/product.js included in <default> tag)