Magento one page checkout : display shopping cart details in sidebar


There are a lot of discussions going on about Magento's one page checkout procedure : it is supposed to enhance customer payment experience by probviding ajax based single page order progress. But there are alos some discussions in the forum on how to enhance this process which is quite unusual and might discourage some customers. In a previous post I reviewed the code that produces sidebar shopping cart in default pages with right margin. The solution below explains how to add a full shopping cart display for the customer's that trying to complete an order.

Full template vs AJAX based loading

The code that builds the one page checkout (checkout/onepage/) sidebar display is made of two separate components :

  • the first loading of the page is a full template loading, meaning every component of the page is loaded at once, and returned to the browser via a standard HTTP request, returning HTML. The HTML produced at this stage for the right column is described in the checkout_onepage_index section of the layout/checkout.xml configuration file. I added the shopping cart display by  simply adding a block to the right :
           <reference name="right">
                <action method="unsetChildren"></action>
                <block type="checkout/onepage_progress" name="checkout.progress" before="-" template="checkout/onepage/progress.phtml"/>
                <block type="checkout/cart_sidebar" before="-" name="catalog.cart.sidebar"    template="checkout/cart/sidebarCheckout.phtml"/>
  • Following steps are processed via AJAX calls (function reloadProgressBlock in opcheckout.js) that invoke the the checkout_onepage_progress section of the layout/checkout.xml configuration file. Below you'll find the same code added to this section, that adds a cart block to the raw HTML returned by this AJAX call.
            <!-- Mage_Checkout -->
            <remove name="right"/>
            <remove name="left"/>
     <block type="checkout/cart_sidebar" output="toHtml"  name="catalog.cart.sidebar"    template="checkout/cart/sidebarCheckout.phtml"/>
            <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress.phtml">
                <block type="checkout/onepage_payment_info" name="payment_info">
                    <action method="setInfoTemplate"><method></method><template></template></action>

You will notice that we deliberately position the sidebar cart XML block , in the first case after, and in the second case before other blocks, so that this block always appears first on your one page chcekout right margin. What you finally need now in order for this to work is to code the sidebarCheckout template : take the checkout/cart/sidebar.phtml  template and modify the display to produce best reassuring order total for your customer before he finally decides to pay !

9 replies
  1. kalpana
    kalpana says:

    hi tried this in my website, but no reflection. Any comment about what to change in layout of sidebar.phtml?

  2. Brian
    Brian says:

    Any idea how I can include tax and shipping rates in the sidebar? I tried using javascript to insert into that section, but on each ajax call that sidebar reloads.

  3. Andrew
    Andrew says:


    No the instructions are correct. You want to create a new file and put the contents of sidebar into sidebarCheckout. It makes life eaiser.

  4. Kat
    Kat says:

    Hi, thanks so much for this!!!
    It's really useful to have it for the customer to see bought products all the way to the end of purchase!!

    By the way I also had an error stating it can't open the sidebarCheckout.phtml.
    The problem is that the included block under
    should be
    (note the template name for the file is "sidebar.phtml")

    Otherwise I havent' done much testing, so I hope it works fine.

    Thanks again!

  5. Sam
    Sam says:


    Did this on my site. Works great except for one problem. When the customer is either at the register/login stage, or is already logged in and is at the billing stage, removing an item from the cart works fine. If a customer is in one of the later stages, instead of the redirect back to:
    it redirects to:

    Which is a page containing just the right side bar, with no css.
    Any ideas?

  6. Eric Pollard
    Eric Pollard says:

    I'm confused as to where exactly the blocks above are placed. The addition to the checkout_onepage_index block is placed at the end of the block? The addition to the checkout_onepage_progress is placed at the front of the block?

    Is there an example of how to modify the sidebar.phtml template to get this to work?

    Can you e-mail me edited versions of these files? This would be very useful for not only adding the cart summary, but perhaps other callouts in the right column of the checkout process as well...


Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *