- 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 |