Tuesday 30 June 2015

Override Magento varien product.js in an extension

Add layout updates in the module's etc/config.xml file

    <frontend>
        <layout>
          <updates>
            <yourcompany_yourmodule>
              <file>yourcompany_yourmodule.xml</file>
            </yourcompany_yourmodule>
          </updates>
        </layout>
    </frontend>

Create a layout xml file named yourcompany_yourmodule.xml,corresponding to the file name configured at the first step, in your current package and current theme folder, and add js in the layout file

<layout>
    <yourcompany_yourmodule_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>yourcompany/yourmodule/product.js</script>
            </action>
            <action method="addJs">
                <script>yourcompany/yourmodule/configurable.js</script>
            </action>
        </reference>
    </yourcompany_yourmodule_handle>
    <PRODUCT_TYPE_configurable><!-- layout handle for simple products -->
        <update handle="yourcompany_yourmodule_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_configurable>
</layout>

Create js files in js folder. In my case, there are two files that needs to be created: product.js and configurable.js

If you want to override the reload method of Product.OptionsPrice, just put the following code in product.js
Product.OptionsPrice.prototype.reload
   = Product.OptionsPrice.prototype.reload.wrap(function(){
    {
         alert('override reload');
    }
});

If you want to override the getOptionLabel method of Product.Config, just do as the code below:
Product.Config.prototype.getOptionLabel
   = Product.Config.prototype.getOptionLabel.wrap(function(parent, option, price){
    {
         alert('override getOptionLabel');
    }
});

No comments:

Post a Comment