- 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.
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"> </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"> </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"> </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 & 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 | ||
|---|---|---|
| Placeholder | Placeholder Type | Description |
| Martjack.Exception | Condition and Variable | If any exception is there, bind it to the control |
| Martjack.FailedValidations.Count | Condition | To get the count of failed Validations |
| Martjack.FailedValidations.ContainsKey | Condition and Variable | Check for specific Keys to show the validation message. |
| Martjack.IsShipOrder | Condition | The order is of type ship to |
| Martjack.IsStorePickupOrder | Condition | The order is of type Store Pickup |
| Martjack.ShippingAddress.Count | Condition | Ship to address count |
| Martjack.IsGuestLogin | Condition | Verifies 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.Mobile | Variable | Billing address will show |
| Martjack.IsPhoneMandatory | Condition | Verifies whether the phone number is mandatory to enter while adding the new address or not |
| Martjack.IsMobileMandatory | Condition | Verifies whether the mobile number is mandatory to enter while adding the new address or not |
| @Martjack.DisplayGiftMessage | Condition | Verifies whether any gift message present for the order or not |
| @Martjack.IsGift | Condition | Is the order is a gift |
| @Martjack.GiftMessage | Condition | If the product is a gift then check for Gift message |
| @Martjack.DisplayDemandedDeliveryDate | Variable | Displays Delivery Date |
| If the order is a store pick up order, then @Martjack.PickupDetails.FirstName, @Martjack.PickupDetails.LastName, @Martjack.PickupDetails.MobileCode, @Martjack.PickupDetails.Mobile | Variable | Pick up address details |