Checkout

There are a couple of sections to it so you need to be aware of how it changes depending on which step you are on.

This step is a LIST form that may or may not have some extra fields that you will need to style such as the file attachment field.

The form is generated in it's raw state, you can manipulate this using javascript to create a sleeker user-interface. Examples of this coming soon or when requested through the support forum.

This step displays the invoice and asks for confirmation. It displays your order information followed by the billing and delivery addresses and a summary of the order. The view brings together a few things we've seen before.

• <dl class=“order-info”>
  is used for the order information, see definition lists for more information.
• .adr is a wrapper class around the addresses, in this instance there is a <h3> denoting which address it is inside this container.
  
  

  <div class="delivery-address adr">
  	<h3>Delivery address</h3>
  	<p>
  		123 Testerton Road,
  		Testershire<br />
  		TES 123
  	</p>
  </div>							
  <div class="billing-address adr">
  	<h3>Billing address</h3>
  	<p>
  		123 Testerton,
  		Testershire<br />
  		TES 123
  	</p>
  </div>

  You can use the .delivery-address and .billing-address classes to differentiate them if desired.

• the order summary is similar to the basket however there are a few key differences indicated here:
  
  

  <table summary="Your order summary" class="nc">
  	<thead>
  		<tr>
  			<th id="pd" axis="product" scope="col">Product</th>
  			<th id="qt" axis="quantity" scope="col" class="tac">Quantity</th>
  			<th id="ist" axis="subtotal" scope="col" class="tar">Item Subtotal</th>
  		</tr>
  	</thead>
  	<tfoot>
  		<tr>
  			<th id="st" class="ttop" axis="subtotal" colspan="2" scope="row">Subtotal</th>
  			<td headers="st" class="tar ttop">&pound;14.00</td>
  		</tr>
  		<tr>
  			<th id="tx" axis="tax" colspan="2" scope="row">VAT</th>
  			<td headers="tx" class="tar">&pound;0.00</td>
  		</tr>
  		<tr>
  			<th id="tt" axis="order-total" colspan="2" scope="row">Total</th>
  			<td headers="tt" class="tar tot">&pound;14.00</td>
  		</tr>
  	</tfoot>
  	<tbody>
  		<tr class="odd">
  			<td headers="pd">Pencil Set 4<br /> <span class="pid">(ART4)</span></td>
  			<td headers="qt" class="tac">0</td>
  			<td headers="ist" class="tar">&pound;0.00</td>
  		</tr>
  		<tr class="even">
  			<td headers="pd">Pencil Set 2<br /> <span class="pid">(ART2)</span></td>
  			<td headers="qt" class="tac">0</td>
  			<td headers="ist" class="tar">&pound;0.00</td>
  		</tr>
  		<tr class="odd">
  			<td headers="pd">Pencil Set 1<br /> <span class="pid">(ART1)</span></td>
  			<td headers="qt" class="tac">1</td>
  			<td headers="ist" class="tar">&pound;14.00</td>
  		</tr>
  	</tbody>
  </table>

  This time there are only 3 columns , .basket class is still present on the outer BOX so you may not to need to add any more specific styling to this table.

• <form id=“payment”>…
  This is the form that appears at the bottom of the order confirmation screen. It will contain a 'proceed' <input /> with the class .submit. There may also be a message box and some inline text next to the <input />.

This step is actually handled by the payment provider used (unless ordering on account), you can get some of the payment providers to use a custom payment page. You may need to pay for the privilege.

Once all the steps have been completed users are redirected to this screen.

• <dl class=“order-info”>
  This is the same as on the confirmation step except with a few more lines of information. See definition lists.
• .adr
  Same as on the confirmation screen.