- 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.
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"> </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
{
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 | ||
|---|---|---|
| Placeholder | Placeholder Type | Description |
| @Martjack.Exception | Condition and Variable | To check any exception is there and binds the same to the variable |
| Martjack.FailedValidations.Count | Condition | To get the count of failed validations |
| Martjack.FailedValidations.ContainsKey | Condition and Variable | Check for multiple keys and show the message based on the key |
| Martjack.IsShipOrder Condition | To check Is order to be shipped | |
| Martjack.IsStorePickupOrder | Condition | To check Is order store pickup one. |
| Martjack.ShippingAddress.Count | Condition | To check shipping address is present or not |
| Martjack.IsGuestLogin Condition | To check the logged in user is as Guest | |
| Martjack.SelectedShippingAddressID | Condition | To check for the selected shipping address is present or not. |
| billingcontact.ContactID | Condition | To check the bill to location contact id |
| @billingcontact.Address1, @billingcontact.Address2, @billingcontact.StateName, @billingcontact.CityName, @billingcontact.PostCode, @billingcontact.CountryName | Variable | To show the address 1, address 2, State, city, postal code, country of where the order to be shipped. |
| @billingcontact.Mobile | Variable | Mobile number |
| @Martjack.DisplayGiftMessage | Condition | To check the Display gift message |
| Martjack.DisplayDemandedDeliveryDate | Condition | To check the delivery date is available or not |
| @Martjack.IsGift | Condition | To check Is it Gift |
| @Martjack.GiftMessage | Variable | User written Gift message |
| @Martjack.DeliveryDate | Variable | Delivery 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].Mobile | Variable / if shipping address count >0 | Shipping 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.Mobile | Else 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.Mobile | Variable | Pickup address – user first name, last name, address1, address2,city , state, country, postal code, telephone code, telephone number, mobile number |