Uncaught TypeError Cannot change property of ‘changeSelection’ of undefined in Magento

I was working on a client site recently and after upgrading the site to Magento certain areas of the site started misbehaving namely the bundled products aren’t working properly. On loading any of the product pages,  it already went wrong with the following error in the console:

Uncaught TypeError: Cannot read property ‘reloadPrice’ of undefined

When i selected an option from the drop-down box, the amount field stays grayed out and i get an error in the console (Google Chrome) stating:

Uncaught TypeError Cannot change property of ‘changeSelection’ of undefined

The HTML from the amount field has the property disabled=”disabled”, I guess this was supposed to change on making a selection thus enabling a user to change the amount for the selection… Magento you dirty bastard, why can’t you be more like WordPress?

After some digging, I found that the issue was caused by our custom Magento theme not adding the new product_options.js file introduced in Magento

So if you are having a similar issue, follow the steps below.

  1. In your theme layout file (either local.xml or catalog.xml mine turned out to be catalog.xml) and add the following js under catalog_product_view <action method=”addJs”><script>varien/product_options.js</script></action>” just below the call to varien/product.js