How should Magento Varien JS Files be changed?

Question

I need to make some changes to the following Magento files:

• public_html\js\varien\configurable.js
• public_html\js\varien\product,js

The question is; should I be editing these files? Are they core files (that will be replaced if I upgraded Magento)?

If I shouldn't be editing them, what should I do if I want to change the contents of these files?

Answer 1

Suppose you want to override "reload" function of product.js

Follow the steps

-> Create a new folder under js folder, in our case under /js/jsoverride/

-> Now create a new js file, in our case we have created /js/jsoverride/product.js with the following code

Product.OptionsPrice.prototype.reload 
   = Product.OptionsPrice.prototype.reload.wrap(function(parentMethod){
                 alert("Override success");
});

-> Add the following code to the proper layout file(catalog.xml/local.xml)

 <reference name="head">
    <action method="addJs"><script>varien/product.js</script></action>
    <action method="addJs"><script>jsoverride/product.js</script></action>
        ......
 </reference>

Flush the cache after your are done with your update.

More information see wrap()