Addresses

The 'My Addresses' section allows you to store addresses for the checkout.

There are 3 screens to this section:

1. Address list lists the available addresses and adds the options to edit/remove and also provides a way of setting the address as your default for billing or delivery.
2. Add new address A simple LIST form
3. Edit address form A simple LIST form

The address list markup is a unique construct as follows:

	<form action="/addresses.html" method="post">
		<fieldset>
			<p><a href="/addresses.html?v=new">+ Add a new address</a></p>
			<p class="info msg">
				Select your usual billing and delivery addresses.<br />
				You can still select your other addresses or enter new ones during the checkout.
			</p>
			<ul class="address-list">
				<li class="odd">
					<div class="adr"><p>
						Address line 1,
						Address line 2<br />
						Address line 3<br />
						Address line 4, Postcode<br />
						Country
					</p></div>
					<div class="options">
						<fieldset>
							<label class="delivery" for="..."><input type="radio" id="..." name="..." value="..." checked="checked" /> Delivery</label>
							<label class="billing" for="..."><input type="radio" id="..." name="..." value="..." /> Billing</label>
						</fieldset>
						<a class="edit" href="...">edit</a>
						<a class="remove" href="...">Remove</a>
					</div>
				</li>
			</ul>
		</fieldset>
		<fieldset class="submit">
			<input type="submit" class="submit" value="Update" />
		</fieldset>
	</form>

Key things to note and use in the CSS are:

• <ul class=“address-list”>
  This lets you pick out the <ul> used to list the addresses. This is only present for specificity in the CSS, each part of the address section is under the same #addresses BOX and so there may be other <ul> used on other views in the future.
• <li class=“odd”>
  the address list items alternate the class names .odd and .even.
• <div class=“adr”><p>….</p></div>
  The .adr is used as a wrapper class any time an address is displayed just like on the checkout.
• <div class=“options”>
  This box contains the options for the address.
  • <fieldset> The fieldset contains two labels with class names .delivery-default and .billing-default. They are radio buttons contained /inside/ the <label> tag.
  • <a class=“edit” href=”…”>Edit</a> the edit address link
  • <a class=“remove” href=”…”>Remove</a> the remove address link