Table of Contents

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: CECLoyaltyPoints 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>
To top