Magento checkout progress with custom layout

30/11/2009 - 14:09 / Posted by Szymon Switala

Recently, while working on Magento checkout process, I stumbled on two issues related to the "one page checkout" solution used on sites Magento. The problems are maybe not very difficult to solve, but as they repeat in different projects, I think they deserve mentioning. In this article I'll shortly explain the checkout progress mechanism in Magento, I'll investigate why it doesn't work with custom layout, and how to fix it.

As you can see, Magento checkout page contains two columns:

main column, consisting of checkout steps
side column with „checkout progress”, list of all currently entered data in checkout process (billing adress, shipping adress, shipping method, payment method)

The checkout progress column is updated by javascript each time any checkout step is completed. But if you decide to set different layout for checkout page than the default "two-columns-right" (default in Community Edition; in Enterprise Edition we've got "one column" layout here), the checkout progress column will not be updated any more. Why?

To find an answer on this mysterious riddle, open the file /skin/frontend/default/default/js/opcheckout.js. This is the javascript mechanism controlling behaviour of checkout process. About line 50 you can find function reloadProgressBlock:

reloadProgressBlock: function(){
var updater = new Ajax.Updater(
$$('.col-right')[0],
this.progressUrl,
{method: 'get', onFailure: this.ajaxFailure.bind(this)}
);
},

This function updates the content of the right column, filling it with the actual checkout progress status. So if the layout of checkout page is "two columns right", everything works fine. But in other case the function fails – it can't find the DOM element with class="col-right", specified by $$('.col-right')[0] javascript statement.

Now the solution is obvious – to replace $$('.col-right')[0] by the selector of your wrapper element containing <div class="one-page-checkout-progress">. So, for example, if your HTML structure looks like that:

then you have to copy the default opcheckout.js file, put it into your theme's appriopriate folder, and edit the reloadProgressBlock function, by changing the $$('.col-right')[0] into $('my-custom-right-column'):

reloadProgressBlock: function(){
var updater = new Ajax.Updater(
$('my-custom-right-column'),
this.progressUrl,
{method: 'get', onFailure: this.ajaxFailure.bind(this)}
);
},

Moreover, the Ajax.Updater() accepts also an id of an object as first argument, so if you select wrapper by ID, you can simplify the code, removing the $() Prototype element selector:

reloadProgressBlock: function(){
var updater = new Ajax.Updater(
'my-custom-right-column',
this.progressUrl,
{method: 'get', onFailure: this.ajaxFailure.bind(this)}
);
},

That's all. It works :)

Catégorie: Magento templates
Tag: Magento layout, Magento checkout progress, magento checkout

Szymon Switala's blog

23 comments on "Magento checkout progress with custom layout"

Snowcore (visitor) - Wed, 02/12/2009 - 18:18:

So simply :) Nice...

Dan (visitor) - Wed, 13/01/2010 - 10:49:

Thanks!
Was going crazy over this, it was breaking the whole checkout process page. I click on the continue button, it shows the AJAX loader, then it disappears as if nothing happened.

Mike S (visitor) - Tue, 23/03/2010 - 06:28:

I've been searching for this fix for weeks! I posted your link in the Magento Forums: http://www.magentocommerce.com/boards/viewthread/66164/

Thanks!

Magento Templates (visitor) - Tue, 01/02/2011 - 12:55:

checkout progress mechanism in Magento is really a helpful post.

Bamboo Sheets (visitor) - Fri, 04/03/2011 - 23:48:

Life saver! I have been scratching my head over this checkout issue on my Magento site for last two weeks. Thanks for making it simple to understand and showing the exact file/lines to look for!

ugg slippers (visitor) - Sat, 05/03/2011 - 04:16:

I hope you will keep updating your content constantly as you have one dedicated reader here.

One Step Extension (visitor) - Wed, 23/03/2011 - 04:35:

A nice and great post on the topic of Magneto, Have tried out these one step checkout extensions of Magento. This extension of Magento isable to go on and provide the best way to achieve conversion rate by maximizing your profits.... in order to catch the best deal available on these One Step Magento Extensions visit... http://www.magentocommerce.com/magento-connect/FME+Extensions/extension/...

ravi (visitor) - Wed, 04/05/2011 - 12:04:

hi
can you provide me solution for change the layout of checkout onepage .
where should i modify the code in checkout.xml to add block in left side

Anonymous (visitor) - Tue, 16/08/2011 - 08:08:

This was really an interesting subject, I am very lucky to be able to come to your weblog and I will bookmark this web page in order that I could come back another time. Armstrong Ceilings

Magento Checkout Page (visitor) - Tue, 23/08/2011 - 11:07:

Thanks Switala, I need to try that out quickly Looks good!

Fielder (visitor) - Thu, 01/09/2011 - 14:39:

Not only do these systems keep track of sales, but I saw a Cincinnati time and attendance function built into the checkout system too. The fact that these are multi-function operating systems adds a lot to the complexity of these changes. It is all good, just another layer of data and interfaces to sort through.

Eric Townsend (visitor) - Mon, 12/09/2011 - 18:48:

I tried this on a site I have selling electric toothbrushes and it worked a treat.

office 2010 (visitor) - Thu, 13/10/2011 - 03:39:

Einfuhrung from Office 2007 death revolutionaren yangon Microsoft Office 2007 fruhen nest Tastatur through yangon Office 2007 Download vergessene chart Navigationsmethode Office 2007 Professional holiday with his MS Office 2007 angestaubt wenig vein Office 2007 Key, but dennoch China and buy microsoft office 2007 Zwecken Programmen modernen also Download Office 2007 unhappy with praktisch selten erst Microsoft Office 2007 Professional, analysing Zeitsparer purchase microsoft office 2007 echter vein.Microsoft Office 2010 Many people use Office 2010 to help their work and life Microsoft office 2011.

This is the Download Office 2010 art Kontrolle winter altmodisch just and MS Office 2010, and not unsinnig sieht nest Office 2010 Key. Here are written by Office 2010 Download Tastatur enorm erreichen physician Office 2010 Professional. I eventuell Microsoft Office 2010 Download death Anwendungen many buy microsoft office 2010 Tastenkommandos Buy Windows 7 relativ flag-bearing Windows 7 angewiesen bigger worry, weniger Microsoft Windows 7 die interface anxiety.Win 7 is such a good assistant of the Download Windows 7.
http://softwarestockss.blogspot.com

http://software-stocks.com

Anonymous (visitor) - Thu, 20/10/2011 - 12:31:

thank u for your article

منتدى بناتى
great with
منتدى تصميم
good for
العاب بنات لها

Headphones (visitor) - Fri, 21/10/2011 - 08:58:

Genius (visitor) - Fri, 21/10/2011 - 14:37:

I always follow all your news but this one I have missed. It is really a new fact for me about Trojans and I will definitely try to find more publications about her. What Exercises Burn The Most Calories
Well, I have to admit that she is really a beautiful woman and personally I think that she is very similar like Alexis Texas! Look at her. Anyway thanks a lot for sharing these wonderful new. WP Plugins

monclerit2011 (visitor) - Fri, 28/10/2011 - 03:24:

Giubbotti Moncler sono un buon modo per manteneremoncler outlet il vostro senso

della moda canada goose outletvive іn ogni stagione. Quando si indossano

giubbotti Moncler caldo ed elegante, si non può non innamorarsi di fiducia e personalità che giubbotti Moncler portare a voi!

Come per una famosa marca,belstaff outlet Moncler è continuare a muoversi nel

mondo della moda, belstaff outletcontinua a lanciare sempre più gardgets

Moncler moda per soddisfare le esigenze della moda più persone

Terry (visitor) - Thu, 03/11/2011 - 11:48:

I prefer Lightcheckout of gomage – one page checkout exetsion. I’ve just installed it – no need to change code. Also I can set delivery date and verify VAT – best solution for me. http://www.gomage.com/extensions/gomage-lightcheckout.html

Alvin (visitor) - Fri, 11/11/2011 - 12:47:

Recommended of Apptha – one page checkout extension. customers can quickly fill in the personal information and payment methods and complete the purchase: http://www.apptha.com/category/extension/Magento/OneStepCheckout

gianmarco lorenzi (visitor) - Wed, 07/12/2011 - 10:30:

gianmarco lorenzi shop sales the full range of shose.Whether gianmarco lorenzi boots or gianmarco lorenzi pumps,you can see here.Even if you want to buy gianmarco lorenzi sandals in winter is also possible.

Magento Customization India (visitor) - Fri, 30/12/2011 - 12:00:

It's nice article. Thanks Szymon for sharing your knowledge.

Anonymous (visitor) - Sat, 31/12/2011 - 14:27:

I would like to thank you for the efforts you have made while writing this post. I am hoping for the best work of the same from you in future criminal lawyers melbourne

baseball hats (visitor) - Thu, 12/01/2012 - 11:39:

I was also searching related stuff from long time.You have solved my problem.Thanks for sharing this great stuff with us.
hats
caps
cap hat
cap
hat
baseball caps
baseball cap
new era 59fifty hats
new era hats
baseball hats
red bull hats
monster energy hats
filipino hats

Baobaz Blog

Magento checkout progress with custom layout

23 comments on "Magento checkout progress with custom layout"

Post new comment

Navigation

Categories