• This template defines how the elements of Single Page Checkout-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 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


Source Code - Single page Checkout V1 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
  {
     if (Martjack.IsShipOrder &&  !Martjack.IsStorePickupOrder  )
        {    
        <div class="stepheader"> <label class="stepnumber">Step 2 -</label>Shipping Information     <span class="complitesign"> </span> </div>
        <div class="stepcontentedit">
           @foreach (var shippingcontact in Martjack.ShippingAddress)
           {
           if ( shippingcontact.ContactID==Martjack.SelectedShippingAddressID ||  shippingcontact.ContactID == -1)
           {
           <div class="leftdiv"> 
              <div class="details">
                 <ul>
                    <li class="heading">Your shipping address</li>
                    <li>@shippingcontact.FirstName  @shippingcontact.LastName </li>
                    <li>@shippingcontact.Address1 @shippingcontact.Address2,</li>
                    <li>@shippingcontact.CityName,</li>
                    <li>@shippingcontact.StateName,</li>
                    <li>@shippingcontact.CountryName - @shippingcontact.PostCode.</li>
                    <li>Mobile : @shippingcontact.Mobile</li>
                 </ul>
              </div>
           </div>
           }
           }
           <div class="middlediv">
              <div class="details">
                 <ul>  </ul>
              </div>
           </div>
           <a onclick="objHandleExpressCheckout.Step2Change();" href="javascript:void(0);" class="editlink">Make changes</a>  
        </div>
        }
     if (Martjack.IsStorePickupOrder && !Martjack.IsShipOrder  )
    {
      <div class="stepheader"> <label class="stepnumber">Step 2 -</label>Pickup Information     <span class="complitesign"></span> </div><div class="stepcontentedit"><div class="leftdiv"><div class="details"><ul><li class="heading">Pickup Details</li><li>@Martjack.BillingAddress.FirstName  @Martjack.BillingAddress.LastName </li><li>Mobile : @Martjack.BillingAddress.Mobile</li> <li>Email : @Martjack.BillingAddress.Email</li> </ul> </div>  </div>     
      @if ( Martjack.PickupDetails.FirstName != "" )
 {
 <div class="middlediv">
    <div class="details">
       <ul>
          <li class="heading">Your alternate pickup information</li>
          <li>@Martjack.PickupDetails.FirstName  @Martjack.PickupDetails.LastName </li>
         <li>@if (Martjack.PickupDetails.Mobile.Length > 0 ) { @("Mobile : " + Martjack.PickupDetails.Mobile + ".");   }</li>
@if(Martjack.PickupDetails.Email != null){
                      <li>@if (Martjack.PickupDetails.Email.Length > 0 ) { @("Email : " + Martjack.PickupDetails.Email + "."); }</li>
                      }
       </ul>
    </div>
 </div>
 }             
        <div class="rightdiv">     <div class="details"> <ul>  </ul>    </div>  </div>  <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 V1 Step 2
PlaceholderPlaceholder TypeDescription
@Martjack.ExceptionCondition and VariableTo check any exception is there and binds the same to the variable
Martjack.FailedValidations.CountConditionTo get the count of failed validations
Martjack.FailedValidations.ContainsKeyCondition and VariableCheck for multiple keys and show the message based on the key
Martjack.IsShipOrder ConditionTo check Is order to be shipped
Martjack.IsStorePickupOrderConditionTo check Is order store pickup one.
Martjack.ShippingAddress.CountConditionTo check shipping address is present or not
Martjack.IsGuestLogin ConditionTo check the logged in user is as Guest
Martjack.SelectedShippingAddressIDConditionTo check for the selected shipping address is present or not.
billingcontact.ContactIDConditionTo check the bill to location contact id
@billingcontact.Address1, @billingcontact.Address2, @billingcontact.StateName, @billingcontact.CityName, @billingcontact.PostCode, @billingcontact.CountryNameVariableTo show the address 1, address 2, State, city, postal code, country of where the order to be shipped.
@billingcontact.MobileVariableMobile number
@Martjack.DisplayGiftMessageConditionTo check the Display gift message
Martjack.DisplayDemandedDeliveryDateConditionTo check the delivery date is available or not
@Martjack.IsGiftConditionTo check Is it Gift
@Martjack.GiftMessageVariableUser written Gift message
@Martjack.DeliveryDateVariableDelivery date of the item
@Martjack.ShippingAddress[0].FirstName, @Martjack.ShippingAddress[0].LastName, @Martjack.ShippingAddress[0].Address1, @Martjack.ShippingAddress[0].Address2, @billingcontact.CountryName, @Martjack.ShippingAddress[0].CityName, @Martjack.ShippingAddress[0].PostCode, @Martjack.ShippingAddress[0].TelephoneCode, @Martjack.ShippingAddress[0].Telephone, @Martjack.ShippingAddress[0].MobileVariable / if shipping address count >0Shipping address first name , last name, address1, address2,city , state, country , postal code, telephone code , telephone number, mobile number
@Martjack.BillingAddress.FirstName, @Martjack.BillingAddress.LastName, @Martjack.BillingAddress.Address1, @Martjack.BillingAddress.Address2, @Martjack.BillingAddress.CityName, @Martjack.BillingAddress.PostCode, @Martjack.BillingAddress.Telephone, @Martjack.BillingAddress.MobileElse billing address will be used.Billing address – user first name , last name, address1, address2,city , state, country , postal code, telephone code , telephone number, mobile number
@Martjack. PickupDetails.FirstName, @Martjack. PickupDetails.LastName, @Martjack. PickupDetails.Address1, @Martjack. PickupDetails.Address2, @Martjack. PickupDetails.CityName, @Martjack. PickupDetails.PostCode, @Martjack.PickupDetails.Telephone, @Martjack. PickupDetails.MobileVariablePickup address – user first name, last name, address1, address2,city , state, country, postal code, telephone code, telephone number, mobile number