Basket

The shopping basket is a table of the products and totals with a few options. The enquiry basket uses exactly the same markup so a class of .basket is available on the outer BOX of both the enquiry and shopping baskets.

	<form action="/basket.html" method="post">
		<div class="steps">
			<span class="current basket-step">Basket</span>
			<a href="/checkout.html" class="checkout-step">Checkout</a>
			<span class="confirm-step">Confirm</span>
			<span class="payment-step">Payment</span>
		</div>
		<fieldset>
			<table summary="Shopping basket" class="nc">
				<thead>
					<tr>
						<th id="pd" axis="product" scope="col">Product</th>
						<th id="qt" axis="quantity" scope="col" class="tac"><abbr title="Quantity">qty</abbr></th>
						<th id="pr" axis="price" scope="col" class="tar">Price<br /> <small>(each)</small></th>
						<th id="lst" axis="line-subtotal" scope="col" class="tar">Subtotal</th>
						<th id="rm" axis="remove" scope="col">&nbsp;</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th id="d" class="ttop" axis="delivery" scope="row" colspan="3">Delivery</th>
						<td headers="d" class="tar ttop">Free</td>
						<td class="ttop">&nbsp;</td>
					</tr>
					<tr>
						<th id="st" axis="subtotal" scope="row" colspan="3">Subtotal</th>
						<td headers="st" class="tar">&pound;12.60</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<th scope="row" id="tt" axis="basket-total" colspan="3">Total</th>
						<td headers="tt" class="tar tot">&pound;12.60</td>
						<td headers="tt" class="tac"><input class="submit" type="submit" value="Update" title="Update basket total" /></td>
					</tr>
				</tfoot>
				<tbody>
					<tr class="odd">
						<td headers="pd">Pencil Set 1<br /> <span class="pid">(ART1)</span></td>
						<td headers="qt" class="tac"><input class="quantity" type="text" id="quantity-art1" name="..." value="1" size="3" /></td>
						<td headers="pr" class="tar">&pound;12.60</td>
						<td headers="lst" class="tar">&pound;12.60</td>
						<td headers="rm" class="tac"><a href="..." class="remove">remove</a></td>
					</tr>
					<tr class="even">
						<td headers="pd">Pencil Set 2<br /> <span class="pid">(ART2)</span></td>
						<td headers="qt" class="tac"><input class="quantity" type="text" id="quantity-art2" name="..." value="0" size="3" /></td>
						<td headers="pr" class="tar">&pound;14.00</td>
						<td headers="lst" class="tar">&pound;0.00</td>
						<td headers="rm" class="tac"><a href="..." class="remove">remove</a></td>
					</tr>
					<tr class="odd">
						<td headers="pd">Pencil Set 4<br /> <span class="pid">(ART4)</span></td>
						<td headers="qt" class="tac"><input class="quantity" type="text" id="quantity-art4" name="..." value="0" size="3" /></td>
						<td headers="pr" class="tar">&pound;12.60</td>
						<td headers="lst" class="tar">&pound;0.00</td>
						<td headers="rm" class="tac"><a href="..." class="remove">remove</a></td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<fieldset class="submit">
			<a class="continue-link" rel="back" href="..." title="Continue shopping">Continue Shopping</a>
			<a class="submit checkout-link" href="...">Checkout</a>
		</fieldset>
	</form>

So, fairly complex. Let's take it from the top:

<div class=“steps”>
The checkout process consists of a few steps, and this block allows you to indicate that to the users.
- <span class=“current basket-step”>Basket</span>
  for each step there is an inline element that can be any of a <span>, <a> or <input />. Depending on the users current position in the checkout process the class .current is applied to the relevant step, in this case the user is on the shopping basket. The steps are also a means of navigation so users can click on them to proceed or to go back through the process.
- <a href=”…” class=“checkout-step”>Checkout</a>
  This becomes a <span> when on the checkout step and an <input /> on the confirm step.
- <span class=“confirm-step”>Confirm</span>
  This is an <input /> on the checkout step
- <span class=“payment-step”>Payment</span>
  This is always a <span> because the confirm-step is made up of two forms, it is one place where you can use javascript to submit the order confirmation when it is clicked.
<table summary=“shopping basket” class=“nc”>
The .nc class is a device for styling all tables that the template writes out to avoid interfering with the tables that FCK Editor generates. If you wish you can style tables produced by FCK Editor using the .body class eg. .body table { border: 1px solid #000; }. For more information on the template <table> conventions click here.
<thead> Contains the top row of <th> headers.
- <th id=“pd” axis=“product” scope=“col”>Product</th>
  The table headers for the product list section each have an id that can be used to apply widths to your columns, for example: th#pd { width: 50%; }. (the axis and scope attributes are to aid accessibility).
- <th id=“qt”>… Quantity column
- <th id=“pr”>… Price column
- <th id=“lst”>… Line SubTotal column
- <th id=“rm”>… Remove item column
<tfoot> Contains the basket summary rows, delivery, subtotal, tax and total.
- <th id=“d” class=“ttop” axis=“delivery” scope=“row” colspan=“3”>Delivery</th>
  These are like the <th>s from the table header however they are scoped to the /row/ and have a colspan of 3 which leaves the prices in the #lst column. The total price row has an update button in the last table cell for refreshing the basket totals so you could use a background image replacement technique to create a refresh button.
.tal / .tac / .tar
These class names are handy helpers used for text-aligning. They stand for 'text-align-left', text-align-center' and 'text-align-right'. Obviously you have to add these classes to you style sheet but it is not a requirement and they may be used however you wish.
.ttop A class name applied to the table cells on the first row of the <tfoot> summary area. Useful for border styling.
<tbody>
This is where the shopping basket items are listed out.
- .odd / .even
  These classes are added to alternate <tr> rows within <tbody> to allow for striping effects.
- <td headers=“pd”>Pencil Set 1<br /> <span class=“pid”>(ART1)</span></td>
  The table cells containing the product information contain some elements and classes that can be found elsewhere aswell.
  - .pid The product id
  - .quantity The quantity input
  - .price Price fields
  - .remove Remove link
<fieldset class=“submit”>
As per the form conventions the .submit <fieldset> is present however on the basket it contains 2 links:
- .continue-link This link takes users back to their previous location in the webshop.
- .proceed-link This link takes users to the checkout

Enquiry Basket

There are only a few differences with the regular shopping basket here:

<div class=“steps”>
- <span class=“basket-step”>Enquiry Basket</span>
- <span class=“form-step”>Enquiry Form</span>

See basic structures for information and hints on using the commonly appearing class names throughout the template.