- This is a Razor template and it defines how the different elements on Order Feedback popup should be displayed at your mobile site.
- Customization is easy with Razor templates and you will be having complete flexibility during customization.
- For easy understanding, the Source Code and different elements of this template are displayed here.
- You can restructure the template, show/hide elements, modify the static content as per your merchandising requirements.
- Note: Customer places an order for the required products. Order will be delivered to customer in due course. Next time when the customer logs into the site, the order feedback notification will be prompted during checkout process as shown in the screenshot.
Source Code - Order Feedback for Mobile Site:
<div data-role="popup" id="notification-widget" data-theme="e"> <div class="store-rating" style="position:static; width:100%;"> <div class="skip-link"> <a href="#" id="btnSkip">[X]</a> </div> <div class="site-logo"> <img src="humarashop-logo.png" width="159" height="53" /> </div> <div class="left-div"> <div class="store-name">@Martjack.CurrentLocation.Name </div> <div class="order-id">Order ID: @Martjack.User.CurrentOrderCollection[0].OrderID<span>(@Martjack.User.CurrentOrderCollection[0].OrderItems.Count Items)</span></div> <div class="order-date">@Martjack.User.CurrentOrderCollection[0].OrderDate.ToString("d MMMM, yyyy hh:mm tt") </div> </div> <div class="right-div"> <div class="rating"> <a href="#" class="blankrating SelectedRating" id="orderfb1" data-rating="1"></a> <a href="#" class="blankrating SelectedRating" id="orderfb2" data-rating="2"></a> <a href="#" class="blankrating SelectedRating" id="orderfb3" data-rating="3"></a> <a href="#" class="blankrating SelectedRating" id="orderfb4" data-rating="4"></a> <a href="#" class="blankrating SelectedRating" id="orderfb5" data-rating="5"></a> </div> </div> <div class="clear"> <textarea id="txtComment" class="comment-box" placeholder="comment"></textarea> <div class="submit-btn"> <a id="btnSubmitFeedback" href="#">SUBMIT</a> </div> </div> </div> </div>
Elements - Order Feedback for Mobile Site | ||
---|---|---|
Placeholder | Placeholder Type | Description |
@Martjack.CurrentLocation.Name | Variable | Displays order location name |
@Martjack.User.CurrentOrderCollection[0].OrderID | Variable | Displays the Order ID |
@Martjack.User.CurrentOrderCollection[0].OrderItems.Count | Variable | Displays the count of order items |
@Martjack.User.CurrentOrderCollection[0].OrderDate.ToString(“d MMMM, yyyy hh:mm tt”) | Variable | Displays the order date |
rating | CSS Class | HTML div contains rating buttons |
txtComment | Textarea ID | Text area used for giving comment on order |
btnSubmitFeedback | ID of (anchor tag) | Button for submitting rating and comment |