Checkout Delivery
URL:
/user/order/deliverydetail?orderId%5B0%5D=00000
List of Elements
Progress Bar
<div class="delivery-top-sec">
<div class="container">
<div class="checkout-top-processbar">
<div class="order-prcs-tmln-sec active1">
<span class="prcs-icon prcs-icon-1">DELIVERY</span>
<span class="tmln tmln1"></span>
<span class="prcs-icon prcs-icon-2">REVIEW</span>
<span class="tmln tmln2"></span>
<span class="prcs-icon prcs-icon-3">PAY</span>
</div>
</div>
</div>
</div> Already Register ?
<div class="container">
<div class="delivery-top-white-box">
<div class="cart-top-sec-left">
<p>Already registered with us?</p>
</div>
<div class="cart-top-sec-right">
<a href="#" class="btn-black-cmn gust-sign-in"
id="register-modal-checkout">
SIGN IN NOW</a>
</div>
</div>
</div> Buyers Info
<div class="container">
<div class="delivery-top-white-box"> … </div>
<div class="delivery_white_section">
<div class="delivery-setting">
<div class="item-form-group">
<div class="col-md-6">
<label>FIRST NAME</label>
<input name="first-name" class="required"
id="FirstName" type="text" value="Grezia">
</div>
<div class="col-md-6">
<label>LAST NAME</label>
<input name="last-name" class="required" id="LastName"
type="text" value="Clarkson">
</div>
</div>
<div class="item-form-group">
<div class="col-md-6">
<label>NOTIFICATION EMAIL</label>
<input name="notification-email" class="required
emailOnly" id="notification-email" type="text"
value="grez@gmail.com">
</div>
<div class="col-md-6">
<label>CONTACT NUMBER</label>
<input name="contact-number" class="required
numbersOnly" id="ContactNumber" type="text"
value="12345678">
</div>
</div>
</div>
</div>
</div> Guest Delivery Address
<div class="container">
<div class="delivery-top-white-box"> … </div>
<div class="delivery_white_section">
…
<div class="delivery-address-sec">
<div class="item-form-group">
<div class="col-md-6">
<label>ADDRESSEE FIRST NAME</label>
<input name="ads-first-name" class="required"
id="addresseeViewModel_AddresseeFirstName"
type="text" value="">
</div>
<div class="col-md-6">
<label>ADDRESSEE LAST NAME</label>
<input name="ads-last-name" class="required"
id="addresseeViewModel_AddresseeLastName" type="text"
value="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-12">
<label>ADDRESS</label>
<input name="address" class="big-textbox required"
id="addresseeViewModel_Address" type="text" value="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-6">
<label>COUNTRY</label>
<input type="hidden" id="countryValue">
<select name="country" class="required" id="country">
<option value="">SELECT COUNTRY</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<!--List of countries-->
</select>
</div>
<div class="col-md-6">
<label>STATE</label>
<input type="text" name="state" id="state" class="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-6">
<label>CITY</label>
<input type="text" name="city" id="city" class="required">
</div>
<div class="col-md-6">
<label>POSTAL CODE</label>
<input name="postalcode" class="required"
id="addresseeViewModel_PostalCode" type="text"
value="">
</div>
</div>
</div>
</div>
</div> Saved Address
<div class="delivery_white_section">
<div class="delivery-address-sec">
<div class="saved-address">
<div data-id="51161" class="address-box col-md-4 col-sm-6 gutter-30">
<div class="svd-adrsbox-inner active">
<div class="description">
Martin Rahardja<br>
address <br>
Albania<br>
state<br>
city<br>
postal
</div>
<div class="action">
<span class="fancy-radio address-sel">
<input type="radio" id="delivery1"
name="delivery-method" checked="checked"
addressid="51161">
<label class="selected_address"
for="delivery1">SELECTED</label>
</span>
<span class="remove-address">
<a href="javascript:void(0);"
onclick="remove_address(51161)">
<i class="icon icon-remove"></i>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div> Add new button
<div class="delivery_white_section">
<div class="delivery-address-sec">
…
<div id="add-new-ads" align="center" style="display: block;">
<a href="javascript:void(0)" onclick="ShowNewAdsSec()"
class="btn-black-small-cmn">
ADD NEW</a>
</div>
</div>
</div> User Delivery Address
<div class="delivery_white_section">
<div class="delivery-address-sec">
…
<div id="add-new-delivery-ads" class="border-on-top" style="display: none;">
<div class="item-form-group">
<div class="col-md-6">
<label>ADDRESSEE FIRST NAME</label>
<input name="ads-first-name" class="required"
id="addresseeViewModel_AddresseeFirstName"
type="text" value="">
</div>
<div class="col-md-6">
<label>ADDRESSEE LAST NAME</label>
<input name="ads-last-name" class="required"
id="addresseeViewModel_AddresseeLastName" type="text"
value="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-12">
<label>ADDRESS</label>
<input name="address" class="big-textbox required"
id="addresseeViewModel_Address" type="text" value="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-6">
<label>COUNTRY</label>
<input type="hidden" id="countryValue">
<select name="country" class="required" id="country">
<option value="">SELECT COUNTRY</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<!--List of countries-->
</select>
</div>
<div class="col-md-6">
<label>STATE</label>
<input type="text" name="state" id="state" class="">
</div>
</div>
<div class="item-form-group">
<div class="col-md-6">
<label>CITY</label>
<input type="text" name="city" id="city" class="required">
</div>
<div class="col-md-6">
<label>POSTAL CODE</label>
<input name="postalcode" class="required"
id="addresseeViewModel_PostalCode" type="text"
value="">
</div>
</div>
<div align="center">
<a href="javascript:void(0)" class="chk-add-btn
btn-black-small-cmn">SAVE</a>
</div>
</div>
</div>
</div> Next Button
<div class="container">
<div class="delivery-top-white-box"> … </div>
<div class="delivery_white_section"> … </div>
<div class="next-tab-area">
<a class="my-btn btn-red" id="next-tab" href="javascript:void(0);">NEXT</a>
</div>
</div>