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