Magento Onepage Checkout Template Bug

Recently, we rolled out an installation of Magento for one of our clients but ran into small a problem along the way. Being an established open source project, I initially assumed that the error was my own when I found that the onepage checkout process would stop working half way through (step 3 to be exact).  However, after digging around, I found that the problem was actually a bug in Magento’s JavaScript.  The bug has been reported and will hopefully be fixed soon, but in the meantime, here’s the fix and how I found it.

I uncovered this bug after I had changed the template in app/design/frontend/default/default/layout/checkout.xml in the following block:

The default template specifies 2columns-right.phtml. When I switched to a different template (2columns-left.phtml in my case), onepage checkout broke.

Line 49 of opcheckout.js requires that the progress blocks (that summarize the user’s checkout information on the side) be within an element with the class col-right, which is how it references those blocks to update them when the user progresses to the next checkout step. col-right is part of the template 2columns-right.phtml, which as we saw is what the checkout process uses by default. This works out of the box, but unfortunately makes the onepage checkout process dependent on the 2columns-right.phtml template.

As you may have seen, if the template is changed, the onepage checkout accordion does not automatically expand to show step 2 after the user presses “continue” from step 1. More importantly, the user is not able to proceed past step 3 of the checkout process because of a silent JavaScript error(s).

The bug stems from a poor design choice in basing this sidebar’s functionality on a specific CSS class selector that is part of the global 2columns-right.phtml template rather than on a selector that is directly related to the progress blocks (one which is already being created by that module).

The fix is to replace .col-right on line 49 with .one-page-checkout-progress, a class that is specifically used for the progress block content.  This makes updating of the progress blocks independent of the template, and designers can change the template without having to change the JavaScript or having the checkout process break.

A simple fix for a simple bug, but I have the feeling designers without knowledge of JavaScript would have had a hard time cracking it.  Hope that helps.


Hi there, I'm Justin!

I like to teaching people about programming. Well, yeah, I guess it's obvious, I also like to write. Yes that was a Digital Underground reference.