Magento Onepage Checkout Template Bug

September 22, 2009Justin20 Comments

Recently, we rolled out an installation of Magento 1.3.2.3 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:

<checkout_onepage_index>
    <!-- Mage_Checkout -->
    ...
    <reference name="root">
        <action method="setTemplate">
            <template>page/2columns-right.phtml</template>
        </action>
    </reference>
    ....
<checkout_onepage_index>

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.

20 comments to “Magento Onepage Checkout Template Bug”

  1. Vinai | September 24, 2009 | Permalink Reply

    I would not call that a bug, though I agree they could have made it more compatible easily.

    The opcheckout.js is part of the theme files within the /skin/ directory tree, not the theme-independant js under /js/

    Vinai

    • Justin | September 30, 2009 | Permalink Reply

      I agree this may be more of a design/compatibility issue than a bug but I think more people will search for it in those terms and I wanted to give the issue as much exposure as possible. I based my template off of the out of the box blank template, which I should have stated in the post, so I was under the assumption that the provided code was flexible enough to allow something as simple as a template change.

  2. Daniel Peterson | September 25, 2009 | Permalink Reply

    Hey Justin, thanks for posting the quick fix. I’ve had a lot of “fun” debugging my own work in Magento. It’s nice to hear when someone else triumphs over the beast and to hear how they did it. Keep it up!

  3. taer | September 28, 2009 | Permalink Reply

    When is the date this was posted?

  4. Brennon | October 8, 2009 | Permalink Reply

    Thank you so much!!!! Totally saved my life on this one.

  5. MagentoNinja | October 12, 2009 | Permalink Reply

    Thanks a lot. I got it working

  6. Steve | October 13, 2009 | Permalink Reply

    Thanks a bunch, Justin!

  7. Jesus | October 26, 2009 | Permalink Reply

    Great, it’s very helpful

  8. john | November 13, 2009 | Permalink Reply

    Thanks for this. Not sur eif it will fix my problem though. When the user clicks checkout it brings them to the one page checkout with accordian, but all the options are greyed out and even the billing form wont drop down. Help!!

  9. Shah | November 24, 2009 | Permalink Reply

    Hi
    Its not working for me , when I gave .col-left , its working but, progress boxes are coming on left side, I need the it to be on right side.

  10. Shah | November 24, 2009 | Permalink Reply

    Hi
    Please help me. Its not working for me , when I gave .col-left , its working but, progress boxes are coming on left side, I need the it to be on right side. Thanks in advance.

    • Justin | November 30, 2009 | Permalink Reply

      In layout/checkout.xml under the <default> section, you’ll see something like:

      <reference name=”left”>
      <block type=”checkout/cart_sidebar” name=”cart_sidebar” template=”checkout/cart/sidebar.phtml” after=”top.links”>

      </block>
      </reference>

      Change the reference to “right”. Then, in the <checkout_cart_index>, comment out `<remove name=”right”/>` and change

      <reference name=”root”>
      <action method=”setTemplate”><template>page/2columns-left.phtml</template></action>
      </reference>

      to use `2columns-right.phtml`.

  11. Adi | March 3, 2010 | Permalink Reply

    Original Code

    var updater = new Ajax.Updater(‘checkout-progress-wrapper’, this.progressUrl, {method: ‘get’, onFailure: this.ajaxFailure.bind(this)});

    i changed it to

    var updater = new Ajax.Updater(‘one-page-checkout-progress’, this.progressUrl, {method: ‘get’, onFailure: this.ajaxFailure.bind(this)});

    i am guessing “one-page-checkout-progress” class does not exist in the css of my skin hence its not working ?

  12. Dr McNinja | March 22, 2010 | Permalink Reply

    What to do? Where to start? Who to blame? What would batman do??

    He would do just that!!

    Thanks heaps Justin.

    Magento is an excellent platform although a bit hard to start with (especially when new to coding and without IT support)

    Cheers,
    Freddy

  13. peppe | April 14, 2010 | Permalink Reply

    Doesn’t work for me. Magento ver. 1.3.0 and i am using the default skin. The progress just fails when trying to go to step 3 and then i am redirected back to Cart. Very frustrating this whole Magento-shit, the worst software i have ever used.. a real disappointment, nothing has worked fine. Any ideas how to get this checkout working?

  14. Max-B | May 14, 2010 | Permalink Reply

    Thank you very much. We are implementing an alternative shipping method AND changing the layout and we are stuck for two day before reading this article, because we were thinking was our fault!

  15. adam | May 26, 2010 | Permalink Reply

    Help me !
    I’m trying to change checkout page from 1column to 2columns-right.
    But right column appear only static blocks and not an other blocks – for example last viewed products.
    checkout.xml code – magento.opsys.co.il/checkout.xml.

    checkout page: http://bradex.hostingil.com/checkout/cart/

    right column example that i need:
    http://bradex.hostingil.com/green-washing-ball.html

  16. Iwin | August 4, 2010 | Permalink Reply

    Thanx! I’m working on a project with Magento version 1.4.1.1. The same problem occurred while using the onepageCheckout in combination with a custom skin. Your solution worked like a charm.

  17. Dan c | September 19, 2010 | Permalink Reply

    You saved my neck, thanks!

Leave a Reply

Contact Zebra Kick

Ready to find out how Zebra Kick can help you? Fill out the contact form below. We will be in touch with you as soon as possible.