My Orders

My orders section allows you to see a list of your previous orders and their statuses. From here you can click through to see the whole order in detail and also re-order it.

At the top of the order list is a small INLINE form for filtering the orders by status and re-ordering them.

<form action="..." method="post">
	<fieldset>
		<label for="filter">Filter by status:
			<select name="status" id="filter">
				<option value="">All</option>
				...
			</select>
		</label>
		<label for="sort-by">Sort by:
			<select name="sort" id="sort-by">
				<option value="date,desc">Newest to oldest</option>
				<option value="date">Oldest to newest</option>
			</select>
		</label>
 
		<input type="submit" value="Go" class="submit" />
	</fieldset>
</form>

The INLINE form is followed by the order list itself (with pagination).

<table summary="Your past orders" class="nc order-history">
	<thead>
		<tr>
			<th id="on" axis="order-number" scope="col">Order No.</th>
			<th id="st" axis="status" scope="col">Status</th>
			<th id="tt" axis="total" scope="col" class="tar">Total</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd">
			<td headers="on"><a href="...">XXXXXXXXXX</a><br /> <small class="pid">(14/02/2008) </small></td>
			<td headers="st">Awaiting processing</td>
			<td headers="tt" class="tar">&pound;72.00</td>
		</tr>
		<tr class="even">
			<td headers="on"><a href="...">XXXXXXXXXX</a><br /> <small class="pid">(14/02/2008) </small></td>
			<td headers="st">Incomplete</td>
			<td headers="tt" class="tar">&pound;2650.00</td>
		</tr>
		<tr class="odd">
			<td headers="on"><a href="...">XXXXXXXXX</a><br /> <small class="pid">(14/02/2008) </small></td>
			<td headers="st">Awaiting processing</td>
			<td headers="tt" class="tar">&pound;2650.00</td>
		</tr>
                ....
	</tbody>
</table>

This is a straight forward <table class="nc">. See the link for more information.

The other part to this section is the individual order screen. This uses a few common constructs detailed elsewhere:

• <dl class=“order-info”> standard definition list
• <div class=“adr”> the delivery and billing address(es) are shown next. See addresses for more.
• <table class=“nc”>
  The table lists out the items purchased on this order. The right most column contains checkboxes which allow users to re-order all or part of the order with a few clicks. The table is enclosed in a form that has the <fieldset class=“submit”> part at the bottom for adding the items to the basket.

<h3>Order Details</h3>
<dl class="order-info">
	<dt>Reference</dt>
	<dd>....</dd>
	<dt>Order ID</dt>
	<dd>....</dd>
	<dt>Date</dt>
	<dd>...</dd>
	<dt>Status</dt>
	<dd>...</dd>
	<dt>Order notes</dt>
	<dd>....</dd>
	<dt>Total</dt>
	<dd class="price">...</dd>
</dl>
 
<form method="post" action="...">
	<fieldset>
		<table summary="Order summary" class="nc order-summary">
			<thead>
				<tr>
					<th id="pd" axis="item">Product</th>
					<th id="qt" axis="quantity" class="tac">Quantity</th>
					<th id="st" axis="subtotal" class="tar">Subtotal</th>
					<th id="ab" axis="add-to-basket" class="tac">Re-order</th>
				</tr>
			</thead>
			<tbody>
				<tr class="odd">
					<td headers="pd">Stock Clothing <span class="pid">(CLTH8)</span></td>
					<td headers="qt" class="tac">1</td>
					<td headers="st" class="tar">&pound;20.00</td>
					<td headers="ab" class="tac"><input type="checkbox" name="..." value="1" checked="checked" /></td>
				</tr>
				<tr class="even">
					<td headers="pd">Trainers <span class="pid">(TRNR)</span></td>
					<td headers="qt" class="tac">1</td>
					<td headers="st" class="tar">&pound;42.00</td>
					<td headers="ab" class="tac"><input type="checkbox" name="..." value="1" checked="checked" /></td>
				</tr>
				<tr class="odd">
					<td headers="pd">Sports Cap <span class="pid">(CAP)</span></td>
					<td headers="qt" class="tac">1</td>
					<td headers="st" class="tar">&pound;10.00</td>
					<td headers="ab" class="tac"><input type="checkbox" name="..." value="1" checked="checked" /></td>
				</tr>
			</tbody>
		</table>
	</fieldset>
	<fieldset class="submit">
		<input class="submit" type="submit" value="Re-order selected items" />
	</fieldset>
</form>