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.
That looks like an interesting approach.
Usually when I’ve had to do any Javascript changes to functionality I tend to just listen to the element in a custom javascript file.
No side effects that you have seen so far I trust?
Thanks John, listen to the element is always the best approach instead of overriding the core js file. But this is when you don’t have choice and you have to change the way the function has been written. In our case, we had to add tier pricing logic for configurable products and this is only way we could have done it. Hope it makes sense.
Hi,
I am using your same technique to override initPrices method of Product.OptionsPrice.prototype .
But it is not working. Please help me to solve this. I am using magento 1.9.2.1
Please share code with us and happy to help
-Nothing’s happening yet so I was wondering if you could clarify an ambiguous element for me? …function(parentMethod){
do I replace ‘parentMethod’ with the name of the method within the class I want to override like ‘configure’ in the following method
configure: function(event){
var element = Event.element(event);
this.configureElement(element);
},
Thanks,