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