Today we are going to talk about how to Override Magento core javascript or JS files without touching core files. We have been trying to find this but couldn’t find useful tutorials out there so we thought we should write one to help you guys. Let’s try by overwriting one of the reload functions of varien/product.js file.
Step 1
Create a new folder under js folder, in our case under /js/scommerce/
Step 2
Now create a new js file, in our case we have created /js/scommerce/product.js with the following code -:
Product.OptionsPrice.prototype.reload = Product.OptionsPrice.prototype.reload.wrap(function(parentMethod){ alert("hello world");
});
N.B – The above code will replace the reload code completely with the message “hello world”.
Step 3
We have decided to do this only on main product page so we amended catalog.xml file in the layout folder with the following code -:
<catalog_product_view translate="label"> ....... <reference name="head"> <action method="addJs"><script>varien/product.js</script></action> <action method="addJs"><script>scommerce/product.js</script></action> ...... </reference> ....... </catalog>
You can easily test the above function using configurable product page on your site because the above reload function gets executed when you select your option from the drop down.
Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.
