Magento's One Page Checkout
To the developer on the Magento forums whom I promised an answer, here’s a stab at a short one. You want to change /template/checkout/onepage/review.phtml. This is the review section for the one page checkout.
Let me just start by saying that Magento is an excellent piece of software. It has one of the most impressive and flexible architectures I have seen. And it’s written in PHP, a language I don’t generally care for. But it does have one flaw which lately has become my full-time job to work around.
It’s “template” system is ridiculously complex and counter-intuitive. And, completely undocumented. (being Open Source you can get away with that) So you spend a lot of time doing the change and refresh game, and even then your results are unpredictable. But let me break down at least one part I am more familiar with, the “one page checkout”. I put the quotes there because it’s not really one page, it’s at least 5, but through Ajax and some magic you at least never change URL’s, does that define a page?
So a typical Magento “package” includes all template and layout files for a site. You don’t NEED to have an entire package to make customizations but if you can’t do them through “skinning” (css/js/images) then you are stuck with this big mess of code.
For example, one our sites, lets say it’s fatloss.com we have a package that from the root goes:
/app/design/frontend/fatloss/default/ and we have 2 important directories there layout and template.
Template contains the .phtml files that define chunks of information that can display on your site. In the layout directory are files that define which chunks will be used and where.
I assume if you have read this far you are a Magento developer so I will not try to put this in any larger context than explaining it to the developer who asked the question.
If you don’t know about it already, go into the Admin and go to Configuration then down at the Bottom chose Developer and then “Display template hints”. Then when you reload the page you will see red lines around the various templates along with their names. Very useful. But how did those templates get their and why?
The first place to start is in /layout/page.xml. There you will see a block called <default>. This define what ever page will include unless it is specifically removed. All this XML is no fun to parse, but it holds the key to getting your page to work.
Focusing again on the one page cart, you then can look in checkout.xml. In that files is a block called <one_page_index> which is what defines the one page checkout.
The first thing that is specified is the “Master” template to be used. This is normally 1column.phtml, 2-column-right, 2column-left, and 3columns. This define the overall layout of the page. Once you determine which one of those you are using (by looking checkout.xml) you look for a block that says something like $this->getChildHtml(‘checkout/onepage’) which says “give me the HTML defined by the template called onepage.phtml in the directory called checkout. Standby, you may get to look at some actual code soon.
In onepage.phtml it iterates over 5 sections defined in the function called getSteps. These steps are by default: login,billing,shipping,payment,review. These are then called programatically by onepage.phtml So on the page you will separate forms for “co-billing-form” and “co-shipping-form” which are created by the foreach loop in onepage.phtml. These pages are found in the directory called /checkout/onepage. There, if you want to make changes, are the files you want (assuming you are in the correct package).
Ah, but not so simple because it’s JavaScript time. Each one of these is then wrapped in a Prototype JavaScript class (see the file opcheckout.js in the skin directory that you are using). This goes through and decorates the tables with the appropriate classes and ID’s. Then at submit time those classes are submitted to the Validator class’ validate function. So what you see when you “view source” was just a jumping off point for what is actually being displayed.
More to follow the next time someone cares.