• This template defines how the elements of Single Page Checkout-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 Step 3 template are displayed here.

  • You can restructure the template, modify the static content as per your merchandising requirements.


 Single page Checkout Step 3


Source Code - Single page Checkout V1 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">Step 3 - </label>Order Summary &amp; Logistics <span class="complitesign"></span>   </div>
<div class="stepcontentedit">
    <div class="leftdiv">
        <div class="details">
            <ul>     
                <li class="heading">Your Invoice details</li> 
                <li><label>Total</label><span>@Checkout.Currency @Checkout.CartTotal</span> </li> 
                <li id="liShippingCost" ><label>Shipping cost</label> <span>@Checkout.Currency @Checkout.TotalShippingCost</span> </li> 
                @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){
                     <li><label>Tax Total</label> <span>@Checkout.Currency @Checkout.Tax</span> </li>
                 }
                 <li id="lisavings" class="sp_Savings"><label>Your savings</label> <span>@Checkout.Currency  @Checkout.CartDiscount</span> </li>
                 <li class="totalpay"><label>Total payable</label> <span>@Checkout.Currency  @Checkout.BuildTotal</span> </li>
            </ul> 
        </div>
    </div>
@if(!Checkout.IsStorePickupOrder){
        foreach (EnablerLibrary.ShippingMode item in Checkout.ShippingModes){
            if (Checkout.ShippingModes.Count > 1){
            if(item.IsSelected){
                     <div class="middlediv"> 
                         <div class="details"> 
                                 <ul> 
                                   <li class="heading">Logistics</li> 
                                                    <li>@item.ModeName</li> 
                                   </ul>  
                           </div> 
                     </div> 
                     }
                   }  
                  }
             }    
    <div class="rightdiv"> 
        <div class="details"> 
            <ul> 
                <li class="heading">Voucher</li>
                @if(Checkout.DiscountVoucherApplied){
                    <li><span>@Checkout.Currency @Checkout.TotalDiscount</span></li>
                }else{
                    <li>Not used, no discounts</li>
                }
            </ul>  
        </div> 
    </div> 
    <a class="editlink" href="javascript:void(0);"  onclick="objHandleExpressCheckout.Step3Change();">Make changes</a>  
</div>
}
Elements - Single page Checkout V1 Step 3
PlaceholderPlaceholder TypeDescription
Checkout.FailedValidations.CountConditionIt will get count of the Failed Validations
Checkout.FailedValidations.ContainsKeyConditionCheck for specific Keys to show the validation message.
@Checkout.IsStorePickupOrderConditionTo check the order type is a Store Pickup order
@Checkout.Location.LocationNameVariableIf 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.PinVariableLocation Address1, Address2,City,State,Country,Pin code
@Checkout.CartItems.CountCondition and VariableTo get the Cart items count and condition is true bind the value to the variable
@Checkout.DisplayShippingTabCondition and VariableTo check to Display the Shipping tab and condition is true bind the value to the variable
@Checkout.DisplayTaxTabCondition and VariableTo check to Display the Tax tab and condition is true bind the value to the variable
@Checkout.DisplaySavedPriceTabCondition and VariableTo check to Display the Saved Price tab and condition is true bind the value to the variable. The same can be bind to item level as well.
Checkout.CartItemsListIt will give all the cart items
@item.IsShippableConditionFrom the above list to loop through each item and show the item if it is ready for shipping
@item.TitleVariableItem Title
@item.PhysicalStoreNameVariableItem physical store name
@item.QuantityVariableItem Quantity
@item.WebPriceVariableItem price after discount
@Checkout.DisplayShippingTabConditionTo check Display shipping tab
@item.ShippingCostVariableIf above condition is true to bind the shipping cost
@item.ModeNameVariableShipping mode name
@Checkout.DeliverySlotsConditionTo get all the Delivery slots
@Checkout.DeliverySlots.SelectedDeliverySlotVariableSelected delivery slot from the available slots
Checkout.DiscountVoucherAppliedConditionTo check is discount voucher applied?
Checkout.IsValidDiscountVoucherConditionTo check is discount voucher valid?
@Checkout.CartTotalVariableCart total value
@Checkout.TotalShippingCostVariableTotal Shipping Cost
@Checkout.TotalRewardDiscountVariableTotal Reward Discount
@Checkout.TotalDiscountVariableTotal Discount
@Checkout.TaxVariableTax value
@Checkout.BuildTotalVariableTotal payable amount