- This template defines how the elements of Single Page Checkout V2 - Step 3 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 3 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 3:
@{
CheckoutModel Checkout = Martjack;
String div = "div";
String rb = "rb";
}
@if (Checkout.Step3State == "Active"){
if (Checkout.Exception != ""){
<div id="Step3Msg"> @Checkout.Exception</div>
}
if (Checkout.FailedValidations.Count > 0){
if (Checkout.FailedValidations.ContainsKey("NOLOCSHP")){
<div id="Step3Msg-LocationShipQtyCheck">
<div class="error_msgsmall">
<div class="errorimgsmall"> </div>
<div class="smallmsg_info">
<div class="smallmsg_title">Invalid address</div>
<div class="smallmsg_text">The requested stock for the product(s) is not available for the selected location
<label id="Failedproducts"></label>.
<a class="buttonlnk" href="/Cart.aspx"> Edit Cart </a>
</div>
</div>
</div>
</div>
}
if (Checkout.FailedValidations.ContainsKey("NONLOSHP")){
<div id="Step3Msg-QtyCheck">
<div class="error_msgsmall">
<div class="errorimgsmall"> </div>
<div class="smallmsg_info">
<div class="smallmsg_title">Invalid address</div>
<div class="smallmsg_text">Sorry, these products are currently sold out or not available in your current location
<label id="Failedproducts"></label>.
<a class="buttonlnk" href="/Cart.aspx"> Edit Cart </a>
</div>
</div>
</div>
</div>
}
if (Checkout.FailedValidations.ContainsKey("INDESLOT")){
<div class="error_msgsmall">
<div class="errorimgsmall"> </div>
<div class="smallmsg_info">
<div class="smallmsg_title">Invalid Delivery Slot</div>
<div class="smallmsg_text">@Checkout.FailedValidations["INDESLOT"]["DvryMsg"]</div>
</div>
</div>
}
}
<div class="ordersdetails">
<div class="singlepage_container1">
<div class="orderdetails_leftpane">
<!--Location Details Html -->
@if(Checkout.IsStorePickupOrder){
<label class="titlestyle_1">Store address</label>
<div class="pickup-details">
<label></label>
<p>
<span class="storename">@Checkout.Location.LocationName </span>@Checkout.Location.Address1, @Checkout.Location.Address2, @Checkout.Location.City, @Checkout.Location.State, @Checkout.Location.Country - @Checkout.Location.Pin
</p>
</div>
}
<!--Location Details Html -->
<!--Products Summary Html -->
@if (Checkout.CartItems.Count > 0){
<label class="titlestyle_1">Order Details</label>
<div class="shoppinggrd" id="ProductSummary">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr class="headerstyle">
<th>Products in your order</th>
<th>Qty</th> <th>Unit Price</th>
@if (Checkout.DisplayShippingTab){
<th class="itemshipping_col">Shipping</th>
}
@if (Checkout.DisplayTaxTab){
<th>Taxes</th>
}
@if (Checkout.DisplaySavedPriceTab){
<th>Savings</th>
}
@if (Checkout.DisplayRemoveItemTab){
<th>Total Price</th>
<th class="lastcol"></th>
}else{
<th class="lastcol">Total Price</th>
}
</tr>
@foreach (CartItemModel item in Checkout.CartItems){
<tr>
<td class="productdetails">
@if (item.IsShippable){
<b>@item.Title</b>
}else{
<span class="non-shippable"><b>@item.Title</b></span>
}
@if (item.PhysicalStoreName!= ""){
<div class="storename"> <label>Store:</label><span> @item.PhysicalStoreName </span></div>
}
</td>
<td class="productqty">@item.Quantity</td>
<td class="productuniteprice">@Checkout.Currency @item.WebPrice</td>
@if (Checkout.DisplayShippingTab){
<td class="productuniteprice itemshipping_col">@Checkout.Currency @item.ShippingCost</td>
}
@if (Checkout.DisplayTaxTab){
<td class="productuniteprice p-tax">@Checkout.Currency @item.TaxAmount</td>
}
@if (Checkout.DisplaySavedPriceTab){
<td class="productuniteprice p-saving">@Checkout.Currency @item.SavedPrice</td>
}
<td class="productuniteprice producttotalprice">@Checkout.Currency @item.TotalPrice</td>
@if (Checkout.DisplayRemoveItemTab){
if (!item.IsShippable){
<td class="delete-column"><a class="delete-btn" href="javascript:void(0);" id="RemoveCartItem" data-CartRefKey="@item.CartReferenceKey.ToString()" data-SupplierId="@item.SupplierId.ToString()"></a></td>
}else{
<td class="delete-column"></td>
}
}
</tr>
}
</tbody>
</table>
</div>
}
<!--Products Summary Html -->
<!--ShippingModes Html -->
@if (Checkout.FailedValidations.Count > 0){
if (Checkout.FailedValidations.ContainsKey("WARNSHP")){
<div class="error_msgsmall">
<div class="errorimgsmall"> </div>
<div class="smallmsg_info">
<div class="smallmsg_title">Invalid Pincode.</div>
<div class="smallmsg_text">
The requested stock for the product(s) is not available for the selected location.
<a class="buttonlnk" href="/Cart.aspx">Edit Cart</a>
</div>
</div>
</div>
}
}
@if (Checkout.ShippingModes.Count > 1){
<label class="titlestyle_1" id="ShipSummaryHeading"></label>
<div class="shippingoption" id="ShippingSummary">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
@foreach (EnablerLibrary.ShippingMode item in Checkout.ShippingModes){
<tr>
<td class="shippingtype">
<span class="radiobutton">
@if(item.IsSelected){
<input type="radio" onclick="javascript:objHandleExpressCheckout.OnShippingModeChangeStep3('@item.ShippingModeId.ToString()','@item.SupplierId.ToString()','@item.PaymentType.ToString()');" value="@item.ShippingModeId.ToString()" name="@item.ShippingModeId.ToString()" id="@item.ShippingModeId.ToString()" checked="checked"/>
}else{
<input type="radio" onclick="javascript:objHandleExpressCheckout.OnShippingModeChangeStep3('@item.ShippingModeId.ToString()','@item.SupplierId.ToString()','@item.PaymentType.ToString()');" value="@item.ShippingModeId.ToString()" name="@item.ShippingModeId.ToString()" id="@item.ShippingModeId.ToString()"/>
}
</span>
<label>@item.ModeName</label>
</td>
</tr>
}
</tbody>
</table>
</div>
}
<!--ShippingModes Html -->
<!--Add DelivarySlot Html -->
@if (Checkout.DeliverySlots != null)
{
if (Checkout.DeliverySlots.AllSlots.Count > 0){
<div class="deliveryslots" id='divDeliveryslots'>
@if (Checkout.DeliverySlots.SummarySlots.Count > 0){
<label class="titlestyle_1">Choose your delivery slot</label>
<div class="selected-sloat">Selected Slot: @Checkout.DeliverySlots.SelectedDeliverySlot <label id='lblSelectedSlot'></label></div>
<div class="slots" id="divSummarySlots">
<label>Next @Checkout.DeliverySlots.SummarySlotsCount available slots</label>
<ul>
@foreach (DeliverySlotView slot in Checkout.DeliverySlots.SummarySlots){
<li><input type="radio" class="sloat-radio" name="sloat" id="@rb@slot.DeliverySlotID" value="@slot.DeliverySlotDate"/><span> @slot.FormatedDate @slot.FormatedSlotRange </span></li>
}
</ul>
<div class="clear"></div>
</div>
<div class="viweall" id="divViewallslotsSummary">
<label>Looking for another slot?</label>
<div class="navbtn" id='divViewallslots' > <span class="navbtn_l"></span> <span class="navbtn_m"> <input type="submit" class="mj_btnbg" value="View more Slots"> </span> <span class="navbtn_r"></span></div>
</div>
}
<div class="slots" style="display:none" id="divAllslots" >
<div class="allslots">
<div class="heading">
<div> Day / Date </div>
<div></div>
<div>Time Slots</div>
<div></div>
<div></div>
</div>
@foreach (DaySlots Day in Checkout.DeliverySlots.AllSlots){
<div class="slot-timings">
<div id="@div@Day.DeliverySlotDate" >@Day.Day</div>
@foreach (DeliverySlotView Dayslot in Day.Slots){
if(Dayslot.IsDisabled){
<div id="@Dayslot.DeliverySlotID" value="@Dayslot.DeliverySlotDate" class='not-available' name='divDayslottimings'> @Dayslot.FormatedSlotRange </div>
}else{
<div id="@Dayslot.DeliverySlotID" value="@Dayslot.DeliverySlotDate" class='slot-timings-slot' name='divDayslottimings'> @Dayslot.FormatedSlotRange </div>
}
}
</div>
}
</div>
<div class="slots-legends"> <span class="not-available"></span><span>Not Available</span> <span class="selected"></span><span>Selected</span></div>
<div class="clear"></div>
</div>
<input id="hdnDeliveySlotID" type="hidden" value="@Checkout.DeliverySlots.SelectedSlotID" name="hdnDeliveySlotID">
<input id="hdnDeliverySlotDate" type="hidden" value="@Checkout.DeliverySlots.DeliverySlotDate" name="hdnDeliverySlotDate">
</div>
}
}
<!--END DelivarySlot Html -->
<!--Discount Voucher Html -->
@if(Checkout.DiscountVoucherApplied){
<div id="VoucherMsg">
<div class="success_msgsmall"> <div class="successimgsmall"> </div> <div class="smallmsg_info"> <div class="smallmsg_title">Valid Voucher Code</div> <div class="smallmsg_text">
<a href="javascript:void(0);" id="aRemoveVoucher" OnClick="return objHandleExpressCheckout.RemoveVoucher();">Remove Voucher</a>
</div></div></div>
</div>
}else{
if(!Checkout.IsValidDiscountVoucher){
<div class="error_msgsmall"> <div class="errorimgsmall"> </div> <div class="smallmsg_info"> <div class="smallmsg_title">Invalid Voucher Code</div> <div class="smallmsg_text">Please enter a valid voucher code to avail the discount offer.</div></div></div>
}
<div class="couponcode_parent" id="Voucher">
<div class="couponcode_left">
<ul>
<li>
<label class="boldtext"> Use your voucher code</label>
</li>
<li>Only one coupon code can be used per order at this time.</li>
</ul>
</div>
<div class="couponcode_right">
<ul>
<li>
<label class="boldtext"> Voucher code</label>
<span>
<input type="text" class="maintxt" id="VoucherCode">
</span>
<div class="navbtn">
<span class="navbtn_l"></span>
<span class="navbtn_m">
<input type="button" value="APPLY" class="mj_btnbg" id="ApplyVoucher">
</span>
<span class="navbtn_r"></span>
</div>
</li>
</ul>
</div>
</div>
}
<!--Discount Voucher Html-->
</div>
<div class="orderdetails_rightpane">
<!--Payment Summary Html -->
<label class="titlestyle_1">Invoice</label>
<div class="ordersummery" id="InvoiceSummary">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="ordersummery_attributes"> Cart sub total </td>
<td class="ordersummery_values">@Checkout.Currency @Checkout.CartTotal</td>
</tr>
<tr id="trShippingHandling" >
<td class="ordersummery_attributes">Shipping & Handling Price </td>
@if (Checkout.TotalShippingCost > 0){
<td class="ordersummery_values">@Checkout.Currency @Checkout.TotalShippingCost</td>
}else{
<td class="ordersummery_values">Free</td>
}
</tr>
@if (Checkout.TotalRewardDiscount > 0){
<tr>
<td class="ordersummery_attributes">Reward Discount</td>
<td class="ordersummery_values">@Checkout.Currency @Checkout.TotalRewardDiscount</td>
</tr>
}
@if (Checkout.TotalDiscount > 0){
<tr>
<td class="ordersummery_attributes">Discount</td>
<td class="ordersummery_values">@Checkout.Currency @Checkout.TotalDiscount</td>
</tr>
}
@if (Checkout.TaxCategory.Count > 0){
foreach (var item in Checkout.TaxCategory){
<tr><td class="ordersummery_attributes">@item.Key</td><td class="ordersummery_values">@Checkout.Currency @item.Value</td> </tr>
}
}else if(Checkout.Tax > 0){
<tr>
<td class="ordersummery_attributes">Tax Total</td>
<td class="ordersummery_values">@Checkout.Currency @Checkout.Tax</td>
</tr>
}
<tr>
<td class="ordersummery_attributes"><label>Total payable</label></td>
<td class="ordersummery_values"><label>@Checkout.Currency @Checkout.BuildTotal</label></td>
</tr>
</tbody>
</table>
</div>
<!--Payment Summary Html -->
</div>
</div>
@if (Checkout.FailedValidations.Count == 0){
<div class="navbtn1 clear" id="Step3btncontinue" >
<span class="navbtn_l"></span>
<span class="navbtn_m">
<input type="button" value="Continue" class="mj_btnbg" id="Step3continue" >
</span>
<span class="navbtn_r"></span>
</div>
}else if(Checkout.FailedValidations.ContainsKey("INDESLOT")){
<div class="navbtn1 clear" id="Step3btncontinue">
<span class="navbtn_l"></span>
<span class="navbtn_m">
<input type="button" value="Continue" class="mj_btnbg" id="Step3continue" >
</span>
<span class="navbtn_r"></span>
</div>
}
<div class="loader" id="Step3Loading" style="display:none"></div>
<!--Step3 common continue for publisher order-->
<div class="navbtn1 clear" id="Step3btncommoncontinue" style="display:none">
<span class="navbtn_l"></span>
<span class="navbtn_m">
<input type="button" value="Continue" class="mj_btnbg" id="Step3continue" >
</span>
<span class="navbtn_r"></span>
</div>
<div class="loader" id="Step3commonLoading" style="display:none"></div>
<!--End Step3 common continue for publisher order-->
</div>
}else{
<div class="stepheader">
<label class="stepnumber">3</label> Order Summary & Logistics <span class="complitesign"></span>
<a class="editlink" href="javascript:void(0);" onclick="objHandleExpressCheckout.Step3Change();">Make changes</a>
</div>
} | Elements - Single page Checkout V2 Step 3 | ||
|---|---|---|
| Placeholder | Placeholder Type | Description |
| Checkout.FailedValidations.Count | Condition | It will get count of the Failed Validations |
| Checkout.FailedValidations.ContainsKey | Condition | Check for specific Keys to show the validation message. |
| @Checkout.IsStorePickupOrder | Condition | To check the order type is a Store Pickup order |
| @Checkout.Location.LocationName | Variable | If above condition is true then it will show the location name of the store |
| @Checkout.Location.Address1, @Checkout.Location.Address2, @Checkout.Location.City, @Checkout.Location.State, @Checkout.Location.Country - @Checkout.Location.Pin | Variable | Location Address1, Address2,City,State,Country,Pin code |
| @Checkout.CartItems.Count | Condition and Variable | To get the Cart items count and if condition is true then bind the value to the variable |
| @Checkout.DisplayShippingTab | Condition and Variable | To check to display the 'Shipping' tab and if condition is true then bind the value to the variable |
| @Checkout.DisplayTaxTab | Condition and Variable | To check to display the 'Tax' tab and if condition is true then bind the value to the variable |
| @Checkout.DisplaySavedPriceTab | Condition and Variable | To check to display the 'Saved Price' tab and if condition is true then bind the value to the variable. The same can be bind to item level as well. |
| Checkout.CartItems | List | It will give all the cart items |
| @item.IsShippable | Condition | From the above list to loop through each item and show the item if it is ready for shipping |
| @item.Title | Variable | Item Title |
| @item.PhysicalStoreName | Variable | Item physical store name |
| @item.Quantity | Variable | Item Quantity |
| @item.WebPrice | Variable | Item price after discount |
| @Checkout.DisplayShippingTab | Condition | To check display 'Shipping' tab |
| @item.ShippingCost | Variable | If above condition is true to bind the shipping cost |
| @item.ModeName | Variable | Shipping mode name |
| @Checkout.DeliverySlots | Condition | To get all the Delivery slots |
| @Checkout.DeliverySlots.SelectedDeliverySlot | Variable | Selected delivery slot from the available slots |
| Checkout.DiscountVoucherApplied | Condition | To check whether the discount voucher is applied or not |
| Checkout.IsValidDiscountVoucher | Condition | To check whether the discount voucher is valid or not |
| @Checkout.CartTotal | Variable | Cart total value |
| @Checkout.TotalShippingCost | Variable | Total Shipping Cost |
| @Checkout.TotalRewardDiscount | Variable | Total Reward Discount |
| @Checkout.TotalDiscount | Variable | Total Discount |
| @Checkout.Tax | Variable | Tax value |
| @Checkout.BuildTotal | Variable | Total payable amount |