Table of Contents

Customer Experience Center (Orders)

Let the customer view and interact with commerce-content

The Customer Experience Center is a paragraph app used to display and interact with commerce-related data in frontend, typically in list form and associated with a particular user. It is the successor to the old customer center app but has been simplified and built exclusively for ViewModel templates — template tags are not supported.

This app can list:

  • Orders
  • Carts
  • Quotes
  • Ledger entries
  • Recurring orders (subscriptions)

When you add this app to a paragraph you'll see a list of settings controlling how the app works: CEC-settings

What you get

  • A content module that renders either an order list or a single order detail depending on OrderId in the query string.
  • A search pipeline that builds an OrderSearchFilter from module settings + URL query string.
  • View models OrderListViewModel and OrderViewModel for strongly‑typed Razor rendering.
  • Built‑in customer actions (reorder, accept quote, change cart/quote state, create RMA) triggered from frontend forms.

Installing & placing the module

  1. Deploy the module code and build your solution.
  2. In the page/paragraph where you want the Customer Experience Center:
    • Add the module Customer experience center (eCom_CustomerExperienceCenter).
    • Choose templates:
      • List template (list view)
      • Detail template (single order view)
    • Set Page size, Sort by, Sort order, and Retrieve list based on.

The module automatically decides whether to render a list or a detail view by checking the presence of OrderId in the query string.

Paragraph app settings

  • Order type to show
    • Order (completed orders)
    • Cart (open carts)
    • Quote (open quotes)
    • LedgerEntry
    • Recurringorder
  • Retrieve list based on
    • UseCustomerNumber – fetch by the logged‑in user’s customer number (toggleable via SwitchRetrieveBy=1).
    • UseImpersonationIds – include orders from users the current user can impersonate (and orders made while being impersonated).
    • UseUserAndSecondaryUserIds – include orders where the user is either the customer or the secondary (impersonating) user.
  • Paging & sorting
    • Page size – items per page (0 disables paging).
    • Sort by field – any of: Id, StateId, CreatedAt, Modified, CustomerName, CompletedDate, Weight, Volume, Price, PriceBeforeFees, PaymentFee, ShippingFee, TotalDiscount.
    • Sort order – Asc or Desc.
  • Templates
    • Order list template – Razor file for the list.
    • Detail template – Razor file for a single order.
    • Email template – optional, for email output.

Query string – list view

These parameters are read when building the search filter:

Parameter Example Purpose
PageNum ?PageNum=2 Paging (1‑based).
SortBy ?SortBy=Price Overrides paragraph Sort by field.
SortOrder ?SortOrder=Desc Sort direction.
PageSize ?PageSize=50 Overrides paragraph page size.
FilterOrderStateId ?FilterOrderStateId=OS2 Filter by Order State ID.
FilterFromDate ?FilterFromDate=2025-08-01 Filter by OrderDate >=.
FilterToDate ?FilterToDate=2025-08-30 Filter by OrderDate <=.
FilterOrderId ?FilterOrderId=ORDER123 Exact order id search.
FilterText ?FilterText=abc Free text search.
FilterCustomerNumber ?FilterCustomerNumber=CUST-42 Exact customer number.
FilterCustomerName ?FilterCustomerName=Jane Doe Exact customer name.
FilterProductId ?FilterProductId=PROD1 Orders containing product id.
FilterProductNumber ?FilterProductNumber=SKU-1 Orders containing product number.
FilterProductName ?FilterProductName=Widget Orders containing product name.
FilterPriceAmountFrom ?FilterPriceAmountFrom=100 Minimum total price.
FilterPriceAmountTo ?FilterPriceAmountTo=500 Maximum total price.
FilterOrderCurrencyCode ?FilterOrderCurrencyCode=EUR,USD One or more currency codes.
SwitchRetrieveBy ?SwitchRetrieveBy=1 Toggles UseCustomerNumber.

Implicit filters:

  • Shop is auto‑set from current area (Area.EcomShopId).
  • Completed flag is derived from Order type to show.

Customer Center Commands

A customer center command is a command posted to a customer experience center to perform an action. You can post commands:

  • Via a URL with CustomerCenterCmd and other parameters.
  • Via a form with CustomerCenterCmd as a field.

Reorder – Adds products from a previous order to the current cart:

<a href="?CustomerCenterCmd=Reorder&OrderId=@Model.Id">Add order to cart</a>

AcceptQuote – Allows a user to accept a quote:

<a href="?CustomerCenterCmd=AcceptQuote&QuoteId={QuoteId}">Accept quote</a>

Example of a Bootstrap 5.3 order list template

@inherits ViewModelTemplate<OrderListViewModel>
<div class="container my-4">
  <form class="row g-2 mb-3" method="get">
    <div class="col-auto">
      <input type="text" name="FilterOrderId" class="form-control" placeholder="Order ID" />
    </div>
    <div class="col-auto">
      <select name="FilterOrderStateId" class="form-select" onchange="this.form.submit()">
        <option value="">All States</option>
        @foreach (var state in Dynamicweb.Ecommerce.Services.OrderStates.GetStatesByOrderType(Dynamicweb.Ecommerce.Orders.OrderType.Order))
        {
          <option value="@state.Id">@state.Name</option>
        }
      </select>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </form>

  <table class="table table-striped align-middle">
    <thead>
      <tr>
        <th>Placed</th>
        <th>Order ID</th>
        <th>Customer</th>
        <th class="text-end">Total</th>
        <th class="text-end">State</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @foreach (var order in Model.Orders)
      {
        <tr>
          <td>@order.CreatedAt.ToString("yyyy-MM-dd")</td>
          <td>@order.Id</td>
          <td>@order.CustomerName</td>
          <td class="text-end">@order.Price.PriceFormatted</td>
          <td class="text-end"><span class="badge bg-secondary">@order.StateName</span></td>
          <td class="text-end">
            <form method="post" action="/Default.aspx?ID=@Pageview.ID">
              <input type="hidden" name="CustomerCenterCmd" value="reorder" />
              <input type="hidden" name="OrderId" value="@order.Id" />
              <button class="btn btn-sm btn-outline-primary">Reorder</button>
            </form>
          </td>
        </tr>
      }
    </tbody>
  </table>

  @if (Model.PageCount > 1)
  {
    <nav>
      <ul class="pagination">
        @for (int i = 1; i <= Model.PageCount; i++)
        {
          <li class="page-item @(i == Model.CurrentPage ? "active" : "")">
            <a class="page-link" href="?PageNum=@i">@i</a>
          </li>
        }
      </ul>
    </nav>
  }
</div>

Troubleshooting

  • Blank output: check templates.
  • No orders: confirm user context and settings.
  • Order detail access denied: user may lack rights.
  • Actions do nothing: ensure POST parameters are correct.
Improve this doc
To top