How to override product.js file in magento

magento

Solution

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)

Problem

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

Original source