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>