Wix eCommerce: Order Page
The eCommerce Order page has 4 plugin slots: 2 dashboard, and 2 dashboard menu. Slots are the placeholders in the UI for plugins. The slot ID is the value for the required extends field when configuring the plugin in the App Dashboard.
Location in dashboard
Sales > Orders > Order page
To test your plugin on a site, do the following:
- Install any Wix app that integrates with the Wix eCommerce platform. For example, Wix Stores.
- Add a new order manually, or let a customer generate the order (for example, by purchasing a product).
Dashboard plugin slots
The Order page features 2 dashboard plugin slots.
Slot 1: Order page
The order page dashboard plugin slot is positioned on the right side of the page, under the Order info (customer details) card.
Sample use case
Add a plugin to the Order page that allows the site owner to display a map with the delivery courier's location for the order.
Configuration
Use the following slot ID for the extends property in your dashboard plugin's configuration in your app's dashboard:
slot ID: cb16162e-42aa-41bd-a644-dc570328c6cc
For example:
Important: The hosting platform must be "BUSINESS_MANAGER".
Interaction between the dashboard page and your plugin
Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to interact with and retrieve parameters from the dashboard page.
This slot passes the following parameters:
| Name | Type | Description |
|---|---|---|
orderId | String | Order ID. |
onOrderUpdate() | ()=>Promise<void> | Callback that notifies the host page about an order update, prompting a UI refresh. It returns a promise indicating when the UI update on the host page is complete. |
Slot 2: Pre-collect payment modal
The Collect Payment menu has items that open a modal when selected. This dashboard menu plugin slot displays a custom modal after the site owner selects a menu item and before the default modal appears. The slot is rendered in the modal's overlay.
Sample use case
Add a modal overlay that allows site owners to add things to an order, such as additional items, notes, or extra fees like delivery charges.
Configuration
Use the following slot ID for the extends property in your dashboard plugin's configuration in your app's dashboard:
slot ID: b92f0e25-535f-4bef-b130-8e5abc85b2fe
For example:
Important: The hosting platform must be "BUSINESS_MANAGER".
Interaction between the dashboard page and your plugin
Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to interact with and retrieve parameters from the dashboard page.
This slot passes the following parameters:
| Name | Type | Description |
|---|---|---|
orderId | String | Order ID. |
onSuccess() | ()=>Promise<void> | Callback to progress to the next modal (default or plugin modal) after a successful order update. Returns a promise indicating when the host UI update is complete. |
onCancel() | ()=>void | Callback to progress to the next modal (default or plugin modal) without any changes. |
menuOption | Object | The menu item that was selected. |
menuOption.key | String | Key of the menu item that was selected. Supported values: CHARGE_WITH_CREDIT_CARD, RECORD_ORDER_MANUAL_PAYMENT, CHARGE_WITH_INVOICE, EXTENSION |
menuOption.componentId | String | Component ID of the extension that was clicked. Only applies when the EXTENSION menu item key is implemented by another slot. |
Multiple plugins in the same slot
These plugin slots can host multiple plugins as follows:
- The Order Page plugins are displayed vertically and ordered by creation date, with the most recent plugin at the bottom.
- The Pre-collect payment modal plugins are displayed sequentially, one modal after the other, before the default modal appears.
Dashboard menu plugin slots
The Order page features 2 dashboard menu plugin slots.
Slot 3: Collect Payment menu
This dashboard menu plugin slot is located in the Collect Payment menu.
Sample use case
Add a menu item enabling site owners to accept your custom payment method for orders. This allows site owners to charge their clients through your app.
Configuration
Use the following slot ID for the extends property in your dashboard menu plugin's configuration in your app's dashboard:
slot ID: bb4aa225-86d8-47fe-87d1-f519b1b93473
For example:
Important: The hosting platform must be "BUSINESS_MANAGER".
Interaction between the dashboard page and your plugin
Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to interact with and retrieve parameters from the dashboard page.
This slot passes the following parameters:
| Name | Type | Description |
|---|---|---|
orderId | String | Order ID. |
onSuccess() | ()=>Promise<void> | Callback to notify the host when you are done handling the flow associated with new menu item. |
Slot 4: More Actions menu
This dashboard menu plugin slot is located in the More Actions menu at the top of the Order page.
Sample use case
Add a menu item that initiates the return process for an order using a third party provider.
Configuration
Use the following slot ID for the extends property in your dashboard menu plugin's configuration in your app's dashboard:
slot ID: 7c82ce37-3890-4613-9364-03a363c92ebe
For example:
Important:
- The hosting platform must be "BUSINESS_MANAGER".
- Each slot must include an icon to comply with Wix's style requirements. Provide the icon's name as the value for
"iconKey".
Interaction between the dashboard page and your plugin
Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to interact with and retrieve parameters from the dashboard page.
This slot passes the following parameters:
| Name | Type | Description |
|---|---|---|
orderId | String | Order ID. |
onSuccess() | ()=>Promise<void> | Callback to notify the host when you are done handling the flow associated with new menu item. |
Multiple plugins in the same slot
These menu plugin slots can host multiple plugins.
The menu plugins are displayed vertically and ordered by date created, with the most recently created plugin displayed at the bottom.
Wix APIs
You can implement logic in your plugin using the Wix eCommerce Orders API:
Slot IDs
| Slot | ID | Parameters |
|---|---|---|
| Order page | cb16162e-42aa-41bd-a644-dc570328c6cc | orderId, onOrderUpdate() |
| Pre-collect payment modal | b92f0e25-535f-4bef-b130-8e5abc85b2fe | orderId, onSuccess(), onCancel(), menuOption, menuOption.key, menuOption.componentId |
| Collect Payment menu | bb4aa225-86d8-47fe-87d1-f519b1b93473 | orderId, onSuccess() |
| More Actions menu | 7c82ce37-3890-4613-9364-03a363c92ebe | orderId, onSuccess() |