address.html

<section id="content" class="col-xs-12 account">
	
	<div class="row">
		
		<div class="col-xs-12">
						
			<ul class="nav nav-tabs" role="tablist">
			  <li role="presentation"><a href="/account/#overview">Overview</a></li>
			  <li role="presentation"><a href="/account/#orders">Orders</a></li>
			  <li role="presentation"><a href="/account/#prescription" >Prescription</a></li>
			  <li role="presentation" class='active'><a href="#address" role="tab" data-toggle="tab">Address</a></li>
			</ul>
			
			<!-- Tab panes -->
			<div class="tab-content">
			  
			  <div role="tabpanel" class="tab-pane active" id="address">
					<div class="row">
						<div class="col-xs-12">
							
							<div id="current-addresses">
								<div class='well-md well-reset-lr'>
									<h3 class="account-title">Your Addresses</h3>
									{% if customer.addresses.count > 0 %}
										{% for address in customer.addresses %}
											<table class='table table-bordered'>  
												<tbody>  
													{% if address == customer.default_address %}
													<tr>  
														<td colspan=2 class='active'><strong>Default Address</strong></td>  
													</tr>
													{% endif %}
													<tr>  
														<td><strong>Address Line 1</strong></td>  
														<td>{{ customer.default_address.address1 }}</td>  
													</tr>
													{% if customer.default_address.address2 != "" %}
														<tr>  
															<td><strong>Address Line 2</strong></td>  
															<td>{{ customer.default_address.address2 }}</td>  
														</tr>
													{% endif %}
													<tr>  
														<td><strong>City</strong></td>  
														<td>{{ customer.default_address.city }}</td>  
													</tr>
													{% if address.province_code %}
														<tr>  
															<td><strong>Address Line 2</strong></td>  
															<td>{{ customer.default_address.province_code }}</td>  
														</tr>
													{% endif %}
													<tr>  
														<td><strong>Country</strong></td>  
														<td>{{ customer.default_address.country }}</td>  
													</tr>
													<tr>  
														<td><strong>Postcode</strong></td>  
														<td>{{ customer.default_address.zip }}</td>  
													</tr>
													<tr>  
														<td><strong>Phone</strong></td>  
														<td>{{ customer.default_address.phone }}</td>  
													</tr>
												</tbody>
											</table>									
										{% endfor %}
										<a href="#new-address" class="show-new-address-form btn btn-primary">Add Address</a>
									{% else %}
										<p class="sad-face">
											There are no adresses associated with your account, to get started please click <a href="#new-address" class="show-new-address-form">here</a>.
										</p>
									{% endif %}
								</div>
							</div>
							
							<div id="new-address" style="display:none">
								<div class='well-md well-reset-lr'>
									<h3 class="account-title">Add a new address</h3>
									
									{% form 'customer_address', customer.new_address %}
									
										{% if form.errors %}
											<script type="text/javascript" charset="utf-8">
												jQuery(function($){
													$("#current-addresses").hide();
													$("#new-address").show();
												});
											</script>
											<div class="alert alert-danger" role="alert">
												<p>
													The form submission failed because of the following reasons:
												</p>
												<ul>
													{% for field in form.errors %}
													{% if field == 'form' %}
													<li>
														{{ form.errors.messages[field] }}
													</li>
													{% else %}
													<li>
														{{ form.errors.translated_fields[field] }} - {{ form.errors.messages[field] }}
													</li>
													{% endif %}
													{% endfor %}
												</ul>
											</div>
										{% endif %}

										<div class="form-group">
											<label for="first_name">First Name</label>
											<input type="text" class="form-control input-sm" name='address[first_name]'>
										</div>

										<div class="form-group">
											<label for="last_name">Last Name</label>
											<input type="text" class="form-control" name='address[last_name]'>
										</div>

										<div class="form-group">
											<label for="company">Company</label>
											<input type="text" class="form-control" name='address[company]'>
										</div>

										<div class="form-group">
											<label for="address1">Address 1</label>
											<input type="text" class="form-control" name='address[address1]'>
										</div>

										<div class="form-group">
											<label for="address2">Address 2</label>
											<input type="text" class="form-control" name='address[address2]'>
										</div>

										<div class="form-group">
											<label for="city">City</label>
											<input type="text" class="form-control" name='address[city]'>
										</div>	
								
										<div class="form-group">
											<label for="country">Country</label>
											<select class="form-control" name='address[country]' id="address_country_new">
												{{ country_option_tags }}
											</select>
										</div>
								
										<div id="address_province_container_new" style="display:none">
											<div class="form-group">
												<label for="province">Province</label>
												<select class="form-control" name='address[province]' id="address_province_new"></select>
											</div>
										</div>
								
										<div class="form-group">
											<label for="zip">Postcode</label>
											<input type="text" class="form-control" name='address[zip]'>
										</div>
								
										<div class="form-group">
											<label for="phone">Phone Number</label>
											<input type="text" class="form-control" name='address[phone]'>
										</div>
								
										<p>
											{{ form.set_as_default_checkbox }}
											<label for="address_default_address_new" class="inline">Set as Default Address?</label>
										</p>

										<button type="submit" class="btn btn-primary">Add Address</button>
										
										<a class="btn btn-danger cancel-new-address">Cancel</a>
								
									{% endform %}
							
									<script type="text/javascript" charset="utf-8">
										new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {hideElement: 'address_province_container_new'});  
										jQuery(function($){
											
											$("a.show-new-address-form").click(function(){
												$("#current-addresses").hide();
												$("#new-address").show();
												return false;
											});
											
											$("a.cancel-new-address").click(function(){
												$("#current-addresses").show();
												$("#new-address").hide();
												return false;
											});
											
											$("a.edit-address").click(function(){
												$("ul.nav li a.address").click();
											});
											
										});
									</script>
									
								</div>
							
							</div>
							
						</div>
						
					</div>
					
			  </div>
			
			</div>			
			
		</div>
		
	</div>

</section>