How can I extend adminhtml JavaScript methods with custom logic?

Question

I have extended several JavaScript methods of the Product.Config class on the frontend website to apply some custom business logic, but I need to share the same customizations with the sales order create page in adminhtml.

On the frontend I created a customized version of the catalog/product/view/type/options/configurable.phtml template in my theme, which injects some custom data for configurable products.

I also needed to extend the Product.Config class to make use of the data. I used the wrap method, which allows me to call the parent method and avoid duplicating the whole method (or worse, the entire file) but also inject some new logic as well.

Product.Config.prototype.getOptionLabel = Product.Config.prototype.getOptionLabel.wrap(function(parentMethod, option, price){
    var str = parentMethod(option, price);

    // Custom logic

    return str;
});

I then added it to the catalog/product/view page like this:

<catalog_product_view>
    <reference name="head">
        <action method="addJs">
            <script>custom/configurable.js</script>
        </action>
    </reference>
<catalog_product_view>

Obviously, I don’t want to have this logic duplicated in two places, so how do I leverage my existing logic on the adminhtml side?

Answer 1

First, you need to customize the adminhtml equivalent of the template mentioned above, which would be: app/design/adminhtml/default/default/template/catalog/product/composite/fieldset/configurable.phtml.

The best way to accomplish this is to add a custom theme to your adminhtml so that you can override the template by copying it to app/design/adminhtml/default/custom/template/catalog/product/composite/fieldset/configurable.phtml and making your edits there.

Second, since you are talking about Magento 1.9, make sure to define your app/design/adminhtml/default/custom/etc/theme.xml to define your theme fallback order, as well as define a layout update file where you can add the shared JavaScript file to the page:

<?xml version="1.0"?>
<theme>
    <parent>default/default</parent>
    <layout>
        <updates>
            <custom_adminhtml_sales>
                <file>custom/sales.xml</file>
            </custom_adminhtml_sales>
        </updates>
    </layout>
</theme>

Now your layout updates can be added to the correct adminhtml page in the app/design/adminhtml/default/custom/layout/custom/sales.xml file. This will allow the same JavaScript logic from the frontend to be applied on the adminhtml page:

<?xml version="1.0"?>
<layout>
    <adminhtml_sales_order_create_index>
        <reference name="head">
            <action method="addJs"><script>custom/configurable.js</script></action>
        </reference>
    </adminhtml_sales_order_create_index>
</layout>