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"/> </reference>
- 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.
<checkout_onepage_progress> <!-- 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> </block> </block> </checkout_onepage_progress>
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 !