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.

About the authorMartin Boze is the Founder of MultiMerch Marketplace. I also love skydiving, motorcycles and space. And other cool things.

6 replies
  1. MarioOO
    MarioOO says:

    This blog post saved me from loosing all customers today....I was editing checkout page ( ) - deleting some inpusts like Fax and Adress 2, when suddenly checkout page from step 2 stoped working.
    The problem was in language files, because i inserted the symbol ? at the end of the title - NEW OR OLD CUSTOMER ? for an examle.

    Thanks again!


Trackbacks & Pingbacks

  1. […] This post covers blank pages and internal server errors. If you're struggling with JSON.parse errors in OpenCart, see our other blog post. […]

  2. [...] View in Fire Fox and use Firebug to debug it. … -opencart/ [...]

  3. [...] Or use Firebug as described in our tutorial on debugging AJAX in OpenCart if you are too lazy to apply patches: … -opencart/ [...]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.