1. Extending Oracle CX Commerce Agent Console
  2. Work with Customer Information Widgets
  3. Work with customer profile details

Work with customer profile details

This widget allows an agent to view in-depth details of the shopper.

The agent can use the interface provided by this widget to view the customer information, loyalty details, storefront roles, store credit, and email references. The agent can also use this interface to resend the password, create an order or view the cart link, as well as launch the store on behalf of the shopper.

You could customize this widget to display addresses in a different format, display the customer’s order history, display orders pending approval or display scheduled orders.

For information on working with customer profiles in the agent console, see View order results.

Widget Name: customerProfileDetails

Display Name: Customer Profile Details - Agent

Supported Page Types: agentProfilePageType

Layouts: Customer Details Layout - Agent

Elements: To understand how these elements are used, refer to the widget’s code view:

  • agent-notes
  • customer-details
  • customer-loyalty-programs
  • customer-pending-orders
  • customer-profile-reset-password
  • customer-profile-save-cancel
  • customer-profile-status
  • customer-store-credit-balance
  • customer-store-roles
  • dynamic-property
  • launch-store-as-customer

Note: The Customer Profile page does not have a back navigation button by default. To create one, you must update the widget with a custom property.

Display saved credit cards

You can modify the Customer Profile Details widget to display saved credit cards on the profile details page. This allows a customer to save their credit card information and reuse it whenever they want. The following is an overview of the steps you would take to display stored credit cards.

For detailed information on working with and creating saved credit cards widgets, see Support stored credit cards.

  1. Use the REST API to initiate the listCreditCards endpoint for a shopper profile.
  2. This returns the customer’s credit card information. Each item in the results displays card information. Save the results.
  3. Create a new instance of the CreditCard view model.
  4. Use the populateData method to add the information returned in the response.
  5. 5. The shopper’s card information is stored in the allCreditCards observable array, in the Customer Profile Details widget.
  6. Modify the Customer Profile Details widget to display the card details in the UI.