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


 Order Feedback for Mobile Site

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
PlaceholderPlaceholder TypeDescription
@Martjack.CurrentLocation.NameVariableDisplays order location name
@Martjack.User.CurrentOrderCollection[0].OrderIDVariableDisplays the Order ID
@Martjack.User.CurrentOrderCollection[0].OrderItems.CountVariableDisplays the count of order items
@Martjack.User.CurrentOrderCollection[0].OrderDate.ToString(“d MMMM, yyyy hh:mm tt”)VariableDisplays the order date
ratingCSS ClassHTML div contains rating buttons
txtCommentTextarea IDText area used for giving comment on order
btnSubmitFeedbackID of (anchor tag)Button for submitting rating and comment