Français
English
Polski
One of the most important parts of any e-commerce solution, including Magento, is checkout process. The number of orders is higly dependent on the simplicity, usability and even look of the checkout pages. That's why shop owners often decide to create custom design of those pages in their Magento website. With Magento templates system you can easily customize the look of any page, but in case of checkout, you have to keep some default constructions.
You can find the default template of checkout stages in app/design/frontend/.../.../templates/checkout/onepage.phtml. Here's the fragment of html output of that template:
<li id="opc-login" class="section">
<div class="head">
...<!-- head of login section -->
</div>
<div id="checkout-step-login" class="box a-item" style="display:none;">
...<!-- body of login section -->
</div>
</li>
... <!-- next sections here -->
</ol>
As we can see, the checkout process is enclosed in an ordered list (<ol>...</ol>). It is quite a good idea, as the order of steps is very important here. Moreover, the default javaScript scripts are strongly related to the html structure (especially to the names of classes – we will look at them later). So it is suggested to preserve this default structure of an ordered list.
To improve the usability of the process, it is a good habit to give a different look to checkout steps headers, depending on the currently active stage. It is an easy task in Magento, because the included script dynamicaly adds or removes class names to the <li class="section"> elements of <ol id="checkoutSteps">. Those class names depend on the currently active step of checkout:
- no additional class for all next steps after the current step
- class="allow" for all previous steps
- class="allow active" for the current step
A similar mechanism is applied in checkout progress - an additional column containing data of already passed checkout steps (billing address, shipping address, shipping method and payment method). The content of this column is changed dynamically, too, according to the current step. The example below show the checkout progress block's html structure after the "billing information" checkout step:
<h3>Your Checkout Progress</h3>
<ol>
<li>
<h4 class="complete">Billing Address
<span class="separator">|</span>
<a href="#billing" onclick="checkout.accordion.openSection('opc-billing'); return false;">Change</a>
</h4>
<div class="content">
... <!-- billing address here -->
</div>
</li>
<li>
<h4>Shipping Address</h4>
</li>
<li>
<h4>Shipping Method</h4>
</li>
<li>
<h4>Payment Method</h4>
</li>
</ol>
</div>
The checkout progress is an ordered list, too. The steps that are not yet passed contain only <h4> title. In the other steps there is a class="complete" added to <h4> so we can make the titles of previous steps look different then the titles of next steps.
Those are the basis of the Magento checkout page structure. Understanding and remembering that strucutre can be very helpful during custom Magento shop development.
