Attaching an event to configurable product changes

Question

I need to inject a JS script into product pages than when changing the configurable option dropdown will give me the new simple products SKU inside the JS.

This is going to be added into an existing module.

Getting the SKU information programatically is ok, and originally I thought about extending configurable.phtml but then looked at how many sites I've build that have overwritten configurable so I don't want to do this.

Where would be the best place to inject this where I can get the product information I need and watch for the select box change?

Answer 1

You can specify layout updates for product types, so if you need an additional block with JavaScript on the configurable product page, use the layout handle PRODUCT_TYPE_configurable in your modules or themes layout XML file:

Example:

<PRODUCT_TYPE_configurable>
    <reference name="product.info.configurable.extra">
        <block type="core/template" name="my.configurable.productjavascript" template="path/to/script.phtml" />
        </block>
    </reference>
</PRODUCT_TYPE_configurable>

The block product.info.configurable.extra is a core/text_list container as hot spot for extensions to add new blocks without changing the template. All children will be rendered automatically. Downside: in the default template, this is rendered before the product options, so you should not try to access the dropdowns immediately but create an observer for dom:loaded.