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