'optionsPrice' is null or not an object in IE7 & IE8

Question

I have been brought onto this Magento site which has configurable products staring at £0.00. There's a JavaScript error concerning the 'optionsPrice' object which only occurs in IE7 & 8. I cannot find any information about this error anywhere. See the screenshot below.

Here's one of the pages: http://www.printloft.co.uk/standard-delivery-5-7-working-days-116537.html

The error occurs in configurable.js, when the optionsPrice object is used on line 285:

optionsPrice.changePrice('config', {'price': price, 'oldPrice': oldPrice});
optionsPrice.reload();

I've tried disabling any additional JavaScript but am officially at a dead end as nothing is pointing me to what the problem is!

Any help or advice would be much appreciated.

Answer 1

I don't have a direct answer, but hopefully this is enough background information to start you back on the debugging path.

The optionsPrice variable is a Javascript global that gets defined inline on the page

var optionsPrice = new Product.OptionsPrice({"productId":"6955","priceFormat":{"pattern":"\u00a3%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":1},"includeTax":"false","showIncludeTax":false,"showBothPrices":false,"productPrice":0,"productOldPrice":0,"priceInclTax":0,"priceExclTax":0,"skipCalculate":1,"defaultTax":0,"currentTax":0,"idSuffix":"_clone","oldPlusDisposition":0,"plusDisposition":0,"plusDispositionTax":0,"oldMinusDisposition":0,"minusDisposition":0,"tierPrices":[],"tierPricesInclTax":[]});

For some reason, this variable isn't being defined on your pages in IE. The reasons for this could include

1. Other javascript errors preventing execution of the above code

2. Timing issues brought about by custom code of a specific configuration

Re: number 2, line 285 is in the reloadPrice PrototypeJS method for the Product.Config object. Normally (meaning with the default themes/modules), this method isn't called until you select a configurable option on the page. If this system has been heavily customized, it's possible that reloadPrice is being called before optionPrice is defined, as the Product.Config object is instantiated before the the Product.OptionPrice object.

I'd start by figuring out if var optionsPrice = new Product.OptionsPrice is being called before reloadPrice to rule out number 1, and then move on to figuring out why reloadPrice is being called before optionsPrice exists.

Update: I managed to get a look at things in IE, and it appears your global Product variable is missing the Product.OptionsPrice object property. In IE this returns as undefined. This is normally defined in js/varien/product.js, and it appears your global Product object is missing other object properties defined there like Product.Zoom. Either the code in this file isn't being called, or something's running later that removes these items or redefines Product.

Answer 2

Thanks to Mr Storm's guidance I found that it was indeed some JavaScript being loaded before Magento JS which was causing the error. A HTML5 shiv script was being loaded in the head in the following way:

<!--[if lt IE 9]>
<script type="text/javascript" src="/js/html5shiv.js"></script>
<script>!window.r && document.write(unescape(<script src"/js/html5shiv.js">)</script>
<![endif]-->

I have no idea why it was written like this, but I simplified it:

The moral of the story is that any JavaScript can disrupt the Magento client-side scripting if not implemented and tested properly, so if you get this error, disable your custom JS first.