Customer Experience Center - Loyalty
The Customer Experience Center - Loyalty Points app is a paragraph app for rendering loyalty point transactions in frontend.
When you add this app to a paragraph it has the following settings: Basically, you:
- Use the Display-settings to set the:
- Cards per page
- Sort by field
- Sort direction
- Select the Templates used to render the app output
- List - this template is used to render the list of credit cards
- Details - this template is used to render details about each loyalty point transaction
Templates
The List-template should inherit the LoyaltyPointListViewModel which gives access to the list of transactions related to the logged in user:
@inherits ViewModelTemplate<LoyaltyPointListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend.LoyaltyPoints
<div>List of loyalty point transactions:</div>
<table>
<tr>
<th>ID</th>
<th>Date</th>
<th>Points</th>
<th>Link</th>
</tr>
@foreach (var loyaltypointtransaction in @Model.LoyaltyPointList)
{
<tr>
<td>@loyaltypointtransaction.Id</td>
<td>@loyaltypointtransaction.TransactionDate</td>
<td>@loyaltypointtransaction.Points</td>
<td><a href="?transactionid=@loyaltypointtransaction.Id">See more</a></td>
</tr>
}
</table>
The Details-template is loaded when the query string contains a transactionid-parameter and an appropriate ID. It should inherit the LoyaltyPointViewModel:
@inherits ViewModelTemplate<LoyaltyPointViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend.LoyaltyPoints
<div>
<h2>Loyalty Point Transaction @Model.Id</h2>
<ul>
<li><b>Points:</b> @Model.Points</li>
<li><b>Total Points:</b> @Model.TotalPoints</li>
<li><b>TransactionDate:</b> @Model.TransactionDate</li>
<li><b>ExpirationDate:</b> @Model.ExpirationDate</li>
<li><b>Comment:</b> @Model.Comment</li>
@if (Model.Order != null)
{
<li><b>Order: @Model.Order.Id</b></li>
<ul>
<li><b>ShopID:</b> @Model.Order.ShopId</li>
<li><b>Price:</b> @Model.Order.Price.PriceFormatted</li>
</ul>
}
</ul>
</div>