Debugging SyntaxError: JSON.parse in OpenCart

Developing and debugging OpenCart is usually easier and takes less time than with bigger e-commerce platforms. However, there are cases when using a plain web browser and a text editor is not enough. One of these cases is JavaScript SyntaxError, occasionally encountered in OpenCart.

Fortunately, there are some great free tools to assist you in debugging and fixing this kind of errors in OpenCart.

SyntaxErrors are not unique to OpenCart and are thrown by the JavaScript engine parsing non-conformant code. There are different kinds of these errors you can encounter in OpenCart, the most common being:

  • SyntaxError: JSON.parse: unexpected character
  • SyntaxError: Unexpected Token
  • SyntaxError: Unexpected Character

These are usually seen on the checkout page. A typical SyntaxError during checkout appears when a button is clicked and looks something like this.

Sometimes you may not see the error message, but come across a seemingly non-functional button instead.

In either case, these issues are caused by the unexpected output in server-side scripts passed to client-side JavaScript along with the response thus preventing the JavaScript engine from parsing it.

Since the JavaScript dialog doesn't give any details about the actual error, it is difficult to debug it using a plain web browser. Fortunately, there's a tool that will allow you to dig out the cause in no time.

Firebug addon for Firefox provides you with a toolset to monitor, debug and develop CSS, HTML, and JavaScript in any web page. Firebug is also available for Chrome browser. In case you are using Opera, Dragonfly's network log offers similar functionality.

After installing Firebug, open it from the Tools menu, make sure Console is enabled and active and navigate to the page giving you the error. In our case, it's the checkout page, so by the time we see the SyntaxError dialog, our Firebug console looks somewhat like this.

As you can see, Firebug console shows a list of requests executed during page load. The request of most interest to us is the last one since it's the one that causes the SyntaxError, so we want to take a closer look at it's contents. To do it, click on the request and scroll down to see what's inside.

The cause of the SyntaxError will be in the beginning of the response body. In our case, it's a notice about a missing language file for a custom payment module:

Notice: Error: Could not load language payment/pesapal!

Missing language files is one of the main causes of SyntaxErrors in OpenCart. Another common cause are various "Undefined index" PHP notices due to outdated or broken extensions or incorrectly performed updates to OpenCart.

Now when you know the actual problem, it shouldn't be too difficult to either solve it yourself or find someone to help you with it.

Fortunately, it has been stated that this OpenCart's behavior is to change in version 1.5.2 so that the actual error will be displayed instead of a generic SyntaxError. Until then, Firebug and Dragonfly will be great helpers in discovering and solving these errors.

P.S. There is also a screencast available for this approach on OpenCart Forums, however, we've decided to describe it in detail.

Martin is the founder of MultiMerch who has dedicated his life to building great products.