• This template defines how the elements of Single Page Checkout V2 (Version 2) - Step 2 are to be displayed.

  • This template is a Razor Template, which can be easily customizable as per your merchandising requirements.

  • For easy understanding, the Source Code and different elements of Single page Checkout V2 Step 2 template are displayed here.

  • You can restructure the template, modify the static content as per your merchandising requirements.


 Single page Checkout Step 2 V2


Source Code - Single page Checkout V2 Step 2:

@if (Martjack.Step2State == "Active" )
  {
<div class="customerdetails">
    @if (Martjack.Exception != ""){    
    <div id="Step2Msg"> @Martjack.Exception</div>
    } 
  else
  { 
    <div id="Step2Msg" style="display: none;"></div>
  }
  @if (Martjack.FailedValidations.Count > 0){    
      if (Martjack.FailedValidations.ContainsKey("INLOCPIN")){
         <div id="Step2Msg-LocationPINCode">
        <div class="error_msgsmall"> <div class="errorimgsmall">&nbsp;</div> <div class="smallmsg_info">  <div class="smallmsg_title">Invalid address</div> <div class="smallmsg_text">The pin code given is not served by the selected location.</div> </div> </div>
          </div>
      }
      if (Martjack.FailedValidations.ContainsKey("NOSER")){
         <div  id="Step2Msg-PINCodeService">
        <div class="error_msgsmall"> <div class="errorimgsmall">&nbsp;</div> <div class="smallmsg_info">  <div class="smallmsg_title">Invalid address</div> <div class="smallmsg_text">Sorry, currently  we do not deliver to this PIN Code.</div> </div> </div>
        </div>
      }
      if (Martjack.FailedValidations.ContainsKey("INADDPAR")){
           <div  id="Step2Msg-InValidCity">
              <div class="error_msgsmall"> <div class="errorimgsmall">&nbsp;</div> <div class="smallmsg_info">  <div class="smallmsg_title">Invalid address</div> <div class="smallmsg_text">Please enter valid Address.</div> </div> </div>
           </div>
      }
  } 
    @if (Martjack.IsShipOrder &&  !Martjack.IsStorePickupOrder )
    {         
      if (Martjack.ShippingAddress.Count > 0 && !Martjack.IsGuestLogin)
         {
            <div class="step2-new-ui">
              <div class="user-shippingaddress">
                  <div class="shipping-address-list">
                   @foreach (var billingcontact in Martjack.ShippingAddress)
                  {
                     if ( billingcontact.ContactID==Martjack.SelectedShippingAddressID )
                     {   
                     <div class="shipping-address selected" id="@billingcontact.ContactID"> 
                            <div class="user-name">
                                @billingcontact.FirstName  @billingcontact.LastName 
                            </div>
                            <p> 
                                @billingcontact.Address1,
                                @if (billingcontact.Address2.Length > 0 ) { @(billingcontact.Address2+ ","); }
                                @billingcontact.StateName,
                                @billingcontact.CityName - @billingcontact.PostCode,
                                @billingcontact.CountryName
                            </p>
                            <div class="user-phone">
                                @billingcontact.Mobile
                            </div>
                            <div class="address-btn">
                                <a class="select-btn" href="javascript:void(0);">Deliver here</a>
                                <a class="continue-btn" href="javascript:void(0);">Continue</a>
                            </div>
                            <a id="btnDeleteAddress-@billingcontact.ContactID" class="btn-delete" data-ContactId="@billingcontact.ContactID" href="javascript:void(0);"></a> <a id="btnEditAddress-@billingcontact.ContactID" class="btn-edit" data-ContactId="@billingcontact.ContactID"  href="javascript:void(0);"></a>
                            <div class="select-sign"></div>
                    </div>
                    }
                     else
                     {   
                     <div class="shipping-address"  id="@billingcontact.ContactID"> 
                            <div class="user-name">
                                @billingcontact.FirstName  @billingcontact.LastName 
                            </div>
                            <p> 
                                @billingcontact.Address1,
                                @if (billingcontact.Address2.Length > 0 ) { @(billingcontact.Address2+ ","); }
                                @billingcontact.StateName,
                                @billingcontact.CityName - @billingcontact.PostCode,
                                @billingcontact.CountryName
                            </p>
                            <div class="user-phone">
                                @billingcontact.Mobile
                            </div>
                            <div class="address-btn">
                                <a class="select-btn" href="javascript:void(0);">Deliver here</a>
                                <a class="continue-btn" href="javascript:void(0);">Continue</a>
                            </div>
                            <a id="btnDeleteAddress-@billingcontact.ContactID" class="btn-delete" data-ContactId="@billingcontact.ContactID" href="javascript:void(0);"></a> <a id="btnEditAddress-@billingcontact.ContactID" class="btn-edit" data-ContactId="@billingcontact.ContactID"  href="javascript:void(0);"></a>
                            <div class="select-sign"></div>
                    </div>
                }                                              
               }                    
                <div class="clear"></div>  
              </div>
         @if (!Martjack.IsGuestLogin)
            {
              <div class="add-newaddress">
                  <a href="javascript:void(0);" class="newaddress-btn" id="aAddNewAddress" >+ Add New Address</a>
              </div>
            }
            <div id="AddEditShippingAddress" style=" min-height: 0px; height: 600px;">
                        
                <div name="divLogin" style="margin: 0pt auto; min-height: 0px; height: 600px;" class="vs_popup ui-dialog-content ui-widget-content " id="divLogin">
                
                    <div class="singlepagecheckout">
                      <div class="customerdetails">
                 <ul class="fs_field">
              <li class="fs_fielddata" id="liShipFirstName">
                  <label>
                      Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipFirstName" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipLastName" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress1">
                  <label>
                      Address1 <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipAddress1" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress2">
                  <label>
                      Address2 </label>
                      <input type="text" class="maintxt" id="ShipAddress2" value="" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
              </li>
              <li class="fs_fielddata" id="liShipCountry">
                  <label>
                      Country <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipState">
                  <label>
                      State <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipCity">
                  <label>
                      City <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipCity" value="" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
              </li>
              <li class="fs_fielddata" id="liShipZip">
                  <label>
                      Post/Zip code <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipZip" value="" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
              </li>
    @if(Martjack.IsPhoneMandatory)
            {
               <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value=""
                      jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
              </li>
            }
            else
            {                
             <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value=""
                      jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
</li>
}
@if(Martjack.IsMobileMandatory)
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value=""
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>   
            }
            else
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value=""
                      jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
              </li>   
            }
            </ul>
                      <div class="action-bar" id="divAddNewShippingAddress">
                          <a  class="navbtn1" href="javascript:void(0);" > <span class="navbtn_l"></span><span class="navbtn_m"> Save & Continue </span><span class="navbtn_r"></span> </a><div id="Step2NewShippingAddressLoading" class="loader" style="display: none"></div>
                      </div>
                      </div>
                  </div>
                </div>
               </div>
              </div>           
@if ( Martjack.DisplayGiftMessage || Martjack.DisplayDemandedDeliveryDate )
                {
                  <div class="productgift" id="DivIsGift" >
                    <ul>  
                       @if ( @Martjack.DisplayGiftMessage )
                       {
                        <li class="giftmsg">
                            @if(@Martjack.IsGift)
                            {
                              <input type="checkbox" class="checkbox_style" id="chkIsGift" checked="true">
                        }
                            else
                            {
                               <input type="checkbox" class="checkbox_style" id="chkIsGift">
                            }
                            
                            Send this product as gift </li>                    
                        <li class="giftmsg" ><span>Type in your message in less
                            than 400 Charactors and the product will sent as gift with the message of yours.</span>
                        </li>
                        <li class="fs_fielddata" >
                            <textarea type="text" class="giftsamplemsg" id="txtGiftMsg">@Martjack.GiftMessage</textarea>
                        </li>
                        }
                        @if ( @Martjack.DisplayDemandedDeliveryDate )
                       {
                        <li class="fs_fielddata giftdate" >
                            <label>
                                Delivery date :</label>                   
                            <input type="text" class="maintxt" id="txtDeliveryDate" value="@Martjack.DeliveryDate"> 
                        </li>
                        }
                    </ul>
                </div>
                }
            </div>
         }
         else
         {
             /* only shipping without shipping address */
            <div class="step2-new-ui">
             @if (Martjack.IsGuestLogin && Martjack.ShippingAddress.Count > 0)
             {
                <div class="billingaddress" id="ShippingAddress">
                <ul>
                    <li class="titlestyle_1">Shipping address </li>
                    <li class="requiredfield"><span>*</span>Required fields</li>
                </ul>
                <ul class="fs_field">
                    <li class="fs_fielddata" id="liShipFirstName">
                        <label>
                            Name <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipFirstName" value="@Martjack.ShippingAddress[0].FirstName"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
                    </li>
                    <li class="fs_fielddata" id="liShipLastName">
                        <label>
                            Last Name <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipLastName" value="@Martjack.ShippingAddress[0].LastName"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
                    </li>
                    <li class="fs_fielddata" id="liShipAddress1">
                        <label>
                            Address1 <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipAddress1" value="@Martjack.ShippingAddress[0].Address1"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
                    </li>
                    <li class="fs_fielddata" id="liShipAddress2">
                        <label>
                            Address2 </label>
                            <input type="text" class="maintxt" id="ShipAddress2" value="@Martjack.ShippingAddress[0].Address2" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
                    </li>
                    <li class="fs_fielddata" id="liShipCountry">
                        <label>
                            Country <font color="#ff0000">*</font></label>
                        <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                        </select>
                    </li>
                    <li class="fs_fielddata" id="liShipState">
                        <label>
                            State <font color="#ff0000">*</font></label>
                        <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                        </select>
                    </li>
                    <li class="fs_fielddata" id="liShipCity">
                        <label>
                            City <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipCity" value="@Martjack.ShippingAddress[0].CityName" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
                    </li>
                    <li class="fs_fielddata" id="liShipZip">
                        <label>
                            Post/Zip code <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipZip" value="@Martjack.ShippingAddress[0].PostCode" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
                    </li>
                        @if(Martjack.IsPhoneMandatory)
                    {
                       <li class="fs_fielddata" id="liShipTelephoneCode">
                        <label>
                            Telephone <font color="#ff0000" style="display :inline">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.ShippingAddress[0].TelephoneCode"
                            jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                        <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.ShippingAddress[0].Telephone"
                            jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
                    </li>
                    }
                    else
                    {                
                     <li class="fs_fielddata" id="liShipTelephoneCode">
                        <label>
                            Telephone <font color="#ff0000" style="display:none">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.ShippingAddress[0].TelephoneCode"
                            jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                        <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.ShippingAddress[0].Telephone"
                            jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
                    </li>
                    }
                        @if(Martjack.IsMobileMandatory)
                    {
                       <li class="fs_fielddata" id="liShipMobileCode">
                         <label>
                            Mobile <font color="#ff0000" style="display :inline">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.ShippingAddress[0].MobileCode"
                            jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                        <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.ShippingAddress[0].Mobile"
                            jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
                    </li>   
                    }
                    else
                    {
                       <li class="fs_fielddata" id="liShipMobileCode">
                        <label>
                            Mobile <font color="#ff0000" style="display:none">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.ShippingAddress[0].MobileCode"
                            jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                        <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.ShippingAddress[0].Mobile"
                            jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
                    </li>   
                    }
                    </ul>
        </div>
}
else
{
<div class="billingaddress" id="ShippingAddress">
<ul>
                    <li class="titlestyle_1">Shipping address </li>
                     <li class="requiredfield"><span>*</span>Required fields</li>
                </ul>
                <ul class="fs_field">
<li class="fs_fielddata" id="liShipFirstName">
<label>
Name <font color="#ff0000">*</font></label>
<input type="text" class="maintxt" id="ShipFirstName"  value="@Martjack.BillingAddress.FirstName"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
                    </li>
                    <li class="fs_fielddata" id="liShipLastName">
                        <label>
                            Last Name <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipLastName" value="@Martjack.BillingAddress.LastName"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
                    </li>
                    <li class="fs_fielddata" id="liShipAddress1">
                        <label>
                            Address1 <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipAddress1" value="@Martjack.BillingAddress.Address1"
                            jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
                    </li>
                    <li class="fs_fielddata" id="liShipAddress2">
                        <label>
                            Address2 </label>
                            <input type="text" class="maintxt" id="ShipAddress2" value="@Martjack.BillingAddress.Address2" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
                    </li>
                    <li class="fs_fielddata" id="liShipCountry">
                        <label>
                            Country <font color="#ff0000">*</font></label>
                        <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                        </select>
                    </li>
                    <li class="fs_fielddata" id="liShipState">
                        <label>
                            State <font color="#ff0000">*</font></label>
                        <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                        </select>
                    </li>
                    <li class="fs_fielddata" id="liShipCity">
                        <label>
                            City <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipCity" value="@Martjack.BillingAddress.CityName" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
                    </li>
                    <li class="fs_fielddata" id="liShipZip">
                        <label>
                            Post/Zip code <font color="#ff0000">*</font></label>
                        <input type="text" class="maintxt" id="ShipZip" value="@Martjack.BillingAddress.PostCode" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
                    </li>
                    
                    @if(Martjack.IsPhoneMandatory)
                    {
                       <li class="fs_fielddata" id="liShipTelephoneCode">
                        <label>
                            Telephone <font color="#ff0000" style="display :inline">*</font> </label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.BillingAddress.TelephoneCode"
                            jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                        <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.BillingAddress.Telephone"
                            jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
                    </li>
                    }
                    else
                    {                
                     <li class="fs_fielddata" id="liShipTelephoneCode">
                        <label>
                            Telephone <font color="#ff0000" style="display:none">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.BillingAddress.TelephoneCode"
                            jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                        <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.BillingAddress.Telephone"
                            jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
                    </li>
                    }
                        @if(Martjack.IsMobileMandatory)
                    {
                       <li class="fs_fielddata" id="liShipMobileCode">
                        <label>
                            Mobile <font color="#ff0000" style="display :inline">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.BillingAddress.MobileCode"
                            jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                        <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.BillingAddress.Mobile"
                            jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
                    </li>   
                    }
                    else
                    {
                       <li class="fs_fielddata" id="liShipMobileCode">
                        <label>
                            Mobile <font color="#ff0000" style="display:none">*</font></label>
                        <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.BillingAddress.MobileCode"
                            jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                        <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.BillingAddress.Mobile"
                            jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
                    </li>   
                    }
                    </ul>
        </div>
             }
      @if (!Martjack.IsGuestLogin)
    {
    <div class="new-ui user_contactupdate">
       <ul>
          <li  id="liOffers">
             <input type="checkbox" class="checkbox_style" id="chkPromotions">
             I would like to be informed of new collections and promotional offers 
          </li>
          <li  id="liSaveContactInfo">
             <input type="checkbox" class="checkbox_style" id="SaveContactInfo" checked="true">
             Save the Contact info in my profile 
          </li>
       </ul>
    </div>
    }
@if ( Martjack.DisplayGiftMessage || Martjack.DisplayDemandedDeliveryDate )
{
                  <div class="productgift" id="DivIsGift" >
                    <ul>  
                       @if ( @Martjack.DisplayGiftMessage )
                       {
                        <li class="giftmsg">
                            @if(@Martjack.IsGift)
                             {
                              <input type="checkbox" class="checkbox_style" id="chkIsGift" checked="true">
                            }
                            else
                            {
                               <input type="checkbox" class="checkbox_style" id="chkIsGift">
                             }
                            
                            Send this product as gift </li>                    
                        <li class="giftmsg" ><span>Type in your message in less
                            than 400 Charactors and the product will sent as gift with the message of yours.</span>
                        </li>
                        <li class="fs_fielddata" >
                            <textarea type="text" class="giftsamplemsg" id="txtGiftMsg">@Martjack.GiftMessage</textarea>
                        </li>
                         }
                        @if ( @Martjack.DisplayDemandedDeliveryDate )
                       {
                        <li class="fs_fielddata giftdate" >
                            <label>
                                Delivery date :</label>                   
<input type="text" class="maintxt" id="txtDeliveryDate"  value="@Martjack.DeliveryDate"> 
</li>
                            }
                    </ul>
                </div>
                }
          </div>
 }
}
    
     @if ( Martjack.IsStorePickupOrder && !Martjack.IsShipOrder) 
{
       <div class="step2-new-ui">
             <div class="pickup-info-head">
                <div class="titlestyle_1">Enter your Store Pickup info.</div>
              <p>We will send an email and/or Text message when your order is ready within 2 hours. Orders placed after 7pm local time will be ready the next business day.</p>                
            </div> 
            <div>    
           <div class="pickup-info"  id="BillingAddress">               
              
              <ul class="fs_field">
              <li class="fs_fielddata" id="liBillFirstName">
                  <label>
                     First Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="BillFirstName" value="@Martjack.BillingAddress.FirstName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liBillLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="BillLastName" value="@Martjack.BillingAddress.LastName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}">
              </li> 
             <li class="fs_fielddata" id="liBillMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="BillMobileCode"  value="@Martjack.BillingAddress.MobileCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="BillMobile"  value="@Martjack.BillingAddress.Mobile"
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li> 
                <li class="fs_fielddata" id="liShipEmail">
                  <label>
                      Email <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipEmail" value="@Martjack.BillingAddress.Email" jval_v2="{valid:function (val) {  return ValidateEmail(val); } , message:'Enter Valid Email.'}" >
              </li> 
          </ul>
          </div>
              <div class="pickup-info alt-pickup-info"  id="Pickupdetails">
              <input type="checkbox" class="selection-checkbox"  id="chkDiffPickupAddress">                    
              <div class="titlestyle_1">Add an alternate pickup person <span>(optional)</span></div>
              <p>if you're not picking up your order, please enter the name and email address of the person who will.</p>
                              
              <ul id="ulpickup" class="fs_field"  style="display:none">            
                <li class="fs_fielddata" id="liPickupFirstName">
                  <label>
                      First name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupFirstName" value="@Martjack.PickupDetails.FirstName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}">
                </li>
              <li class="fs_fielddata" id="liPickupLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupLastName" value="@Martjack.PickupDetails.LastName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter Last Name'; else return ''; }}">
              </li>   
              <li class="fs_fielddata" id="liPickupMobileCode">
                  <label>
                      Mobile <font color="#ff0000" >*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="PickupMobileCode"  value="@Martjack.PickupDetails.MobileCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="PickupMobile"  value="@Martjack.PickupDetails.Mobile"
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>                
              <li class="fs_fielddata" id="liPickupEmail">
                  <label>
                      Email <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupEmail" value="@Martjack.PickupDetails.Email"  jval_v2="{valid:function (val) {  return ValidateEmail(val); } , message:'Enter Valid Email.'}" >
              </li>        
              </ul>
              <p class="note-text">Note: your alternate pickup person will need to show a valid government-issued ID and your order number to pickup your order</p>    
          </div>
            </div>
           <div class="new-ui user_contactupdate">
                  <ul>
                      @if (!Martjack.IsGuestLogin)
                    {
                        <li  id="liOffers">
                          <input type="checkbox" class="checkbox_style" id="chkPromotions">
                            I would like to be informed of new collections and promotional offers </li>
                       <li  id="liSaveContactInfo">
                           <input type="checkbox" class="checkbox_style" id="SaveContactInfo" checked="true">
                          Save the Contact info in my profile </li>
                    }                
                    </ul>
              </div>      
          </div>
    }
  <div>
     @if (Martjack.IsShipOrder &&  Martjack.IsStorePickupOrder  )
     {
        <div class="step2-new-ui">
              <div id="tabsEx1" class="tabs" >
                <ul>
                    <li><a href="#tab1"><span>Shipping Information</span></a></li>
                    <li><a href="#tab2"><span>Pickup at Store Information</span></a></li>
                </ul>
         
           <div id="tab1">
               @if (Martjack.ShippingAddress.Count > 0)
            {
            
              <div class="user-shippingaddress">
                  <div class="shipping-address-list">
                
                
                  @foreach (var billingcontact in Martjack.ShippingAddress)
                  {
                     if ( billingcontact.ContactID==Martjack.SelectedShippingAddressID )
                     {   <div class="shipping-address selected" id="@billingcontact.ContactID"> 
                            <div class="user-name">
                                @billingcontact.FirstName  @billingcontact.LastName 
                            </div>
                            <p> 
                                @billingcontact.Address1,
                                @if (billingcontact.Address2.Length > 0 ) { @(billingcontact.Address2+ ","); }
                                @billingcontact.StateName,
                                @billingcontact.CityName - @billingcontact.PostCode,
                                @billingcontact.CountryName
                            </p>
                            <div class="user-phone">
                                @billingcontact.Mobile
                            </div>
                            <div class="address-btn">
                                <a class="select-btn" href="javascript:void(0);">Deliver here</a>
                                <a class="continue-btn" href="javascript:void(0);">Continue</a>
                             </div>
                            <a id="btnDeleteAddress-@billingcontact.ContactID" class="btn-delete" data-ContactId="@billingcontact.ContactID" href="javascript:void(0);"></a> <a id="btnEditAddress-@billingcontact.ContactID" class="btn-edit" data-ContactId="@billingcontact.ContactID"  href="javascript:void(0);"></a>
                            <div class="select-sign"></div>
                    </div>
                    }
                      else
                     {   <div class="shipping-address"  id="@billingcontact.ContactID"> 
<div class="user-name">
@billingcontact.FirstName  @billingcontact.LastName 
</div>
<p> 
                                 @billingcontact.Address1,
                                @if (billingcontact.Address2.Length > 0 ) {    @(billingcontact.Address2+ ","); }
@billingcontact.StateName,
                                @billingcontact.CityName - @billingcontact.PostCode,
                                @billingcontact.CountryName
                            </p>
                            <div class="user-phone">
@billingcontact.Mobile
                            </div>
<div class="address-btn">
                                <a class="select-btn" href="javascript:void(0);">Deliver here</a>
                                <a class="continue-btn" href="javascript:void(0);">Continue</a>
                            </div>
                            <a id="btnDeleteAddress-@billingcontact.ContactID" class="btn-delete" data-ContactId="@billingcontact.ContactID" href="javascript:void(0);"></a> <a id="btnEditAddress-@billingcontact.ContactID" class="btn-edit" data-ContactId="@billingcontact.ContactID"  href="javascript:void(0);"></a>
                            <div class="select-sign"></div>
</div>
        }
                   }                    
                 <div class="clear"></div>  
              </div>
         @if (!Martjack.IsGuestLogin)
            {
              <div class="add-newaddress">
                  <a href="javascript:void(0);" class="newaddress-btn" id="aAddNewAddress" >+ Add New Address</a>
              </div>
            }
            <div id="AddEditShippingAddress" style=" min-height: 0px; height: 600px;">
                        
                <div name="divLogin" style="margin: 0pt auto; min-height: 0px; height: 600px;" class="vs_popup ui-dialog-content ui-widget-content " id="divLogin">
                
                    <div class="singlepagecheckout">
                      <div class="customerdetails">
                 <ul class="fs_field">
              <li class="fs_fielddata" id="liShipFirstName">
                  <label>
                      Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipFirstName" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipLastName" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress1">
                  <label>
                      Address1 <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipAddress1" value=""
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress2">
                  <label>
                      Address2 </label>
                      <input type="text" class="maintxt" id="ShipAddress2" value="" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
              </li>
              <li class="fs_fielddata" id="liShipCountry">
                  <label>
                      Country <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipState">
                  <label>
                      State <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipCity">
                  <label>
                      City <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipCity" value="" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
              </li>
              <li class="fs_fielddata" id="liShipZip">
                  <label>
                      Post/Zip code <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipZip" value="" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
              </li>
                @if(Martjack.IsPhoneMandatory)
            {
               <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value=""
                      jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
              </li>
            }
            else
            {                
             <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value=""
                      jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
              </li>
            }
            @if(Martjack.IsMobileMandatory)
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value=""
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>   
            }
            else
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value=""
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value=""
                      jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
              </li>   
            }
            </ul>
                      <div class="action-bar" id="divAddNewShippingAddress">
                          <a  class="navbtn1" href="javascript:void(0);" > <span class="navbtn_l"></span><span class="navbtn_m"> Save & Continue </span><span class="navbtn_r"></span> </a><div id="Step2NewShippingAddressLoading" class="loader" style="display: none"></div>
                      </div>
                      </div>
                  </div>
                 </div>
               </div>
              </div>           
              <div>
            @if ( Martjack.DisplayGiftMessage || Martjack.DisplayDemandedDeliveryDate )
                {
                  <div class="productgift" id="DivIsGift" >
                    <ul>  
                       @if ( Martjack.DisplayGiftMessage )
                       {
                        <li class="giftmsg">
                            @if(Martjack.IsGift)
                            {
                              <input type="checkbox" class="checkbox_style" id="chkIsGift" checked="true">
                    }
                            else
                            {
                               <input type="checkbox" class="checkbox_style" id="chkIsGift">
                            }
Send this product as gift </li>                    
                        <li class="giftmsg" ><span>Type in your message in less
                            than 400 Charactors and the product will sent as gift with the message of yours.</span>
                        </li>
                        <li class="fs_fielddata" >
                            <textarea type="text" class="giftsamplemsg" id="txtGiftMsg">@Martjack.GiftMessage</textarea>
                        </li>
                        }
                        @if (Martjack.DisplayDemandedDeliveryDate )
                       {
                        <li class="fs_fielddata giftdate" >
                            <label>
                                Delivery date :</label>                   
<input type="text" class="maintxt" id="txtDeliveryDate" value="@Martjack.DeliveryDate"> 
</li>
}
</ul>
</div>
}
            </div>
 }
         
         else
         {
             /* only shipping without shipping address */
           if (Martjack.IsGuestLogin && Martjack.ShippingAddress.Count > 0)
             {
              <div class="billingaddress" id="ShippingAddress">
          <ul>
              <li class="titlestyle_1">Shipping address </li>
              <li class="requiredfield"><span>*</span>Required fields</li>
          </ul>
          <ul class="fs_field">
             <li class="fs_fielddata" id="liShipFirstName">
 <label>
 Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipFirstName" value="@Martjack.ShippingAddress[0].FirstName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipLastName" value="@Martjack.ShippingAddress[0].LastName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress1">
                  <label>
                      Address1 <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipAddress1" value="@Martjack.ShippingAddress[0].Address1"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress2">
                  <label>
                      Address2 </label>
                      <input type="text" class="maintxt" id="ShipAddress2" value="@Martjack.ShippingAddress[0].Address2" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
              </li>
              <li class="fs_fielddata" id="liShipCountry">
                  <label>
                      Country <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipState">
                  <label>
                      State <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipCity">
                  <label>
                      City <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipCity" value="@Martjack.ShippingAddress[0].CityName" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
              </li>
              <li class="fs_fielddata" id="liShipZip">
                  <label>
                      Post/Zip code <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipZip" value="@Martjack.ShippingAddress[0].PostCode" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
              </li>
    @if(Martjack.IsPhoneMandatory)
            {
               <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.ShippingAddress[0].TelephoneCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.ShippingAddress[0].Telephone"
                      jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
              </li>
            }
            else
            {                
             <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.ShippingAddress[0].TelephoneCode"
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.ShippingAddress[0].Telephone"
                      jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
              </li>
            }
            @if(Martjack.IsMobileMandatory)
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.ShippingAddress[0].MobileCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.ShippingAddress[0].Mobile"
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>   
            }
            else
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.ShippingAddress[0].MobileCode"
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.ShippingAddress[0].Mobile"
                      jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
              </li>   
            }
 </ul>
      </div>
    }
    else
    {
    <div class="billingaddress" id="ShippingAddress">
          <ul>
              <li class="titlestyle_1">Shipping address </li>
              <li class="requiredfield"><span>*</span>Required fields</li>
          </ul>
<ul class="fs_field">
<li class="fs_fielddata" id="liShipFirstName">
<label>
Name <font color="#ff0000">*</font></label>
<input type="text" class="maintxt" id="ShipFirstName" value="@Martjack.BillingAddress.FirstName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipLastName" value="@Martjack.BillingAddress.LastName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 1) return 'Enter Last Name'; else return ''; }}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress1">
                  <label>
                      Address1 <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipAddress1" value="@Martjack.BillingAddress.Address1"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 3) return false; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}" >
              </li>
              <li class="fs_fielddata" id="liShipAddress2">
                  <label>
                      Address2 </label>
                      <input type="text" class="maintxt" id="ShipAddress2" value="@Martjack.BillingAddress.Address2" jval_v2="{valid:function (val) { if (val.length == 0) return true; else return validateDoubleQuote(val);  }, message:'Enter Valid Address'}">
              </li>
              <li class="fs_fielddata" id="liShipCountry">
                  <label>
                      Country <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipCountry" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select Country'; else return ''; }}" >
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipState">
                  <label>
                      State <font color="#ff0000">*</font></label>
                  <select class="dropdown" id="ShipState" jval_v2="{valid:function (val) {if ((val == '') ||(val == '0')) return 'Select State'; else return ''; }}">
                  </select>
              </li>
              <li class="fs_fielddata" id="liShipCity">
                  <label>
                      City <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipCity" value="@Martjack.BillingAddress.CityName" jval_v2="{valid:function (val) { if ( objHandleExpressCheckout.ValidateShipCity(val) == false )  return 'Enter Valid City Name'; else return ''; }}">
              </li>
              <li class="fs_fielddata" id="liShipZip">
                  <label>
                      Post/Zip code <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="ShipZip" value="@Martjack.BillingAddress.PostCode" jval_v2="{valid:function (val) { if (ValidateZipCode(val, 'ShipCountry') == '') return '';else return 'Invalid Post/Zip Code.' ;}}">
              </li>
 @if(Martjack.IsPhoneMandatory)
            {
               <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.BillingAddress.TelephoneCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.BillingAddress.Telephone"
                      jval_v2="{valid:function (val) { return IsNumericTel(val); }, message:' Enter Valid Phone No.'}">
              </li>
            }
            else
            {                
             <li class="fs_fielddata" id="liShipTelephoneCode">
                  <label>
                      Telephone <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipTelephoneCode"  value="@Martjack.BillingAddress.TelephoneCode"
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipTelephone"  value="@Martjack.BillingAddress.Telephone"
                      jval_v2="{valid:function (val) { return true; } , message:'Enter Valid Phone No.'}">
              </li>
}
@if(Martjack.IsMobileMandatory)
{
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display :inline">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.BillingAddress.MobileCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.BillingAddress.Mobile"
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>   
            }
            else
            {
               <li class="fs_fielddata" id="liShipMobileCode">
                  <label>
                      Mobile <font color="#ff0000" style="display:none">*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="ShipMobileCode"  value="@Martjack.BillingAddress.MobileCode"
                      jval_v2="{valid:function (val) { if (val.length > 0) {  if (val.length < 1) return 'Please Enter Valid Code'; else return ''; } else { return '' } } }">
                  <input type="text" class="maintxt phone-number" id="ShipMobile"  value="@Martjack.BillingAddress.Mobile"
                      jval_v2="{valid:function (val) {  return true; } , message:'Enter Valid Phone No.'}">
              </li>   
}
</ul>
      </div>
    }
    if (!Martjack.IsGuestLogin)
    {
    <div class="new-ui user_contactupdate">
       <ul>
          <li  id="liOffers">
             <input type="checkbox" class="checkbox_style" id="chkPromotions">
             I would like to be informed of new collections and promotional offers 
          </li>
          <li  id="liSaveContactInfo">
             <input type="checkbox" class="checkbox_style" id="SaveContactInfo" checked="true">
             Save the Contact info in my profile 
          </li>
       </ul>
    </div>
    }
            
             if ( Martjack.DisplayGiftMessage || Martjack.DisplayDemandedDeliveryDate )
                {
                  <div class="productgift" id="DivIsGift" >
                    <ul>  
                       @if ( @Martjack.DisplayGiftMessage )
                       {
                        <li class="giftmsg">
                            @if(@Martjack.IsGift)
                            {
                              <input type="checkbox" class="checkbox_style" id="chkIsGift" checked="true">
                            }
                            else
                            {
                               <input type="checkbox" class="checkbox_style" id="chkIsGift">
}
        Send this product as gift </li>                    
                        <li class="giftmsg" ><span>Type in your message in less
                            than 400 Charactors and the product will sent as gift with the message of yours.</span>
</li>
                        <li class="fs_fielddata" >
                            <textarea type="text" class="giftsamplemsg" id="txtGiftMsg">@Martjack.GiftMessage</textarea>
                        </li>
                        }
                        @if ( @Martjack.DisplayDemandedDeliveryDate )
                       {
                        <li class="fs_fielddata giftdate" >
                            <label>
Delivery date :</label>                   
<input type="text" class="maintxt" id="txtDeliveryDate" value="@Martjack.DeliveryDate"> 
</li>
}
</ul>
</div>
}
}
</div>
            <div id="tab2">
            <div class="pickup-info-head">
                <div class="titlestyle_1">Enter your Store Pickup info.</div>
              <p>We will send an email and/or Text message when your order is ready within 2 hours. Orders placed after 7pm local time will be ready the next business day.</p>                
            </div> 
            <div>            
              <div class="pickup-info alt-pickup-info"  id="Pickupdetails">
              <input type="checkbox" class="selection-checkbox"  id="chkDiffPickupAddress">                    
              <div class="titlestyle_1">Add an alternate pickup person <span>(optional)</span></div>
              <p>if you're not picking up your order, please enter the name and email address of the person who will.</p>
                              
              <ul id="ulpickup" class="fs_field"  style="display:none">                 
                <li class="fs_fielddata" id="liPickupFirstName">
                  <label>
                      First name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupFirstName" value="@Martjack.PickupDetails.FirstName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter First Name'; else return ''; }}">
                </li>
              <li class="fs_fielddata" id="liPickupLastName">
                  <label>
                      Last Name <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupLastName" value="@Martjack.PickupDetails.LastName"
                      jval_v2="{valid:function (val) { if ($.trim(val).length < 2) return 'Enter Last Name'; else return ''; }}">
              </li>   
              <li class="fs_fielddata" id="liPickupMobileCode">
                  <label>
                      Mobile <font color="#ff0000" >*</font></label>
                  <input type="text" class="maintxt phone-countrycode" id="PickupMobileCode"  value="@Martjack.PickupDetails.MobileCode"
                      jval_v2="{valid:function (val) { if (val.length < 1) return 'Please Enter Valid Code'; else return ''; }}">
                  <input type="text" class="maintxt phone-number" id="PickupMobile"  value="@Martjack.PickupDetails.Mobile"
                      jval_v2="{valid:function (val) { return IsNumeric(val,'Ship');  }, message:'Enter Valid Phone No.'}">
              </li>                
              <li class="fs_fielddata" id="liPickupEmail">
                  <label>
                      Email <font color="#ff0000">*</font></label>
                  <input type="text" class="maintxt" id="PickupEmail" value="@Martjack.PickupDetails.Email"  jval_v2="{valid:function (val) {  return ValidateEmail(val); } , message:'Enter Valid Email.'}" >
              </li>        
              </ul>
              <p class="note-text">Note: your alternate pickup person will need to show a valid government-issued ID and your order number to pickup your order</p>    
          </div>
            </div>
            </div>
          </div>
          </div>
         }
     </div>
    </div>
 if (Martjack.ShippingAddress.Count == 0 || Martjack.IsGuestLogin)
{
<div class="navbtn1" id="btnStep2continue">
      <span class="navbtn_l"></span><span class="navbtn_m">
          <input type="submit" value="Continue" class="mj_btnbg" id="Step2continue">
      </span><span class="navbtn_r"></span>
  </div>
  <div class="loader" id="Step2Loading" style="display: none">
  </div>
}
  }
else
  {
<div class="stepheader"> <label class="stepnumber">Step 2 - </label>Billing &amp; Shipping Information      <span class="complitesign"></span> <a onclick="objHandleExpressCheckout.Step2Change();" href="javascript:void(0);" class="editlink">Make changes</a>  </div>

  
  }
<div>
 @if( Martjack.ShippingAddress.Count >0)
 {
 foreach (var shippingcontact in Martjack.ShippingAddress)
 {
 if ( shippingcontact.ContactID==Martjack.SelectedShippingAddressID )
 {   
 <input type="hidden" name="hdnShipCountry" id="hdnShipCountry" value="@shippingcontact.Country" />
 <input type="hidden" name="hdnShipState" id="hdnShipState" value="@shippingcontact.State"  />
 <input type="hidden" name="hdnShipCity" id="hdnShipCity" value="@shippingcontact.City"  />
 }
 else
 {
 <input type="hidden" name="hdnShipCountry" id="hdnShipCountry" value="" />
 <input type="hidden" name="hdnShipState" id="hdnShipState" value=""  />
 if(Martjack.CurrentDeliveryArea != null && Martjack.CurrentDeliveryArea.DeliveryAreaCities != null && Martjack.CurrentDeliveryArea.DeliveryAreaCities.Count >0)
{
<input type="hidden" name="hdnShipCity" id="hdnShipCity" value="@Martjack.CurrentDeliveryArea.DeliveryAreaCities[0].DeliveryCityID"  />
}
else
{
<input type="hidden" name="hdnShipCity" id="hdnShipCity" value="554"  />
}
}
}
}
else
{
 <input type="hidden" name="hdnShipCountry" id="hdnShipCountry" value="@Martjack.BillingAddress.Country" />
 <input type="hidden" name="hdnShipState" id="hdnShipState" value="@Martjack.BillingAddress.State"  />
 if(Martjack.CurrentDeliveryArea != null && Martjack.CurrentDeliveryArea.DeliveryAreaCities != null &&   Martjack.CurrentDeliveryArea.DeliveryAreaCities.Count >0)
{
<input type="hidden" name="hdnShipCity" id="hdnShipCity" value="@Martjack.CurrentDeliveryArea.DeliveryAreaCities[0].DeliveryCityID"  />
}
else
{
<input type="hidden" name="hdnShipCity" id="hdnShipCity" value="554"  />
}
 }
 <input type="hidden" name="hdnBillCountry" id="hdnBillCountry" value="@Martjack.BillingAddress.Country" />
 <input type="hidden" name="hdnBillState" id="hdnBillState" value="@Martjack.BillingAddress.State"  />
 <input type="hidden" name="hdnBillCity" id="hdnBillCity" value="@Martjack.BillingAddress.City"  />
</div>
Elements - Single page Checkout V2 Step 2
PlaceholderPlaceholder TypeDescription
Martjack.ExceptionCondition and VariableIf any exception is there, bind it to the control
Martjack.FailedValidations.CountConditionTo get the count of failed Validations
Martjack.FailedValidations.ContainsKeyCondition and VariableCheck for specific Keys to show the validation message.
Martjack.IsShipOrderConditionThe order is of type ship to
Martjack.IsStorePickupOrderConditionThe order is of type Store Pickup
Martjack.ShippingAddress.CountConditionShip to address count
Martjack.IsGuestLoginConditionVerifies whether the user logged in as Guest user or not
@billingcontact.FirstName, @billingcontact.LastName, @billingcontact.Address1, @billingcontact.Address2, @billingcontact.StateName, @billingcontact.CityName, @billingcontact.PostCode, @billingcontact.CountryName, @billingcontact.MobileVariableBilling address will show
Martjack.IsPhoneMandatoryConditionVerifies whether the phone number is mandatory to enter while adding the new address or not
Martjack.IsMobileMandatoryConditionVerifies whether the mobile number is mandatory to enter while adding the new address or not
@Martjack.DisplayGiftMessageConditionVerifies whether any gift message present for the order or not
@Martjack.IsGiftConditionIs the order is a gift
@Martjack.GiftMessageConditionIf the product is a gift then check for Gift message
@Martjack.DisplayDemandedDeliveryDateVariableDisplays Delivery Date
If the order is a store pick up order, then @Martjack.PickupDetails.FirstName, @Martjack.PickupDetails.LastName, @Martjack.PickupDetails.MobileCode, @Martjack.PickupDetails.MobileVariablePick up address details