Specific settings per page
Collect Page
Managing the Display of Orders and Parcels by Item State
You can easily customize how orders and their parcels are displayed in the collect page, based on the state of each item.
By default, the Store App applies the following standard item states “configuration” in the Cancelled section and the Already Collected section :
"cancelled_item_states": ["removed"],
"already_collected_item_states": ["fulfilled"]Visual Appearance
Customizing the Configuration
It is possible to override the default setup. This is often necessary, as projects may include more item states in their workflow than the default configuration provides.
To adjust the display:
Go to Configuration > Store App > Page Settings > Collect > Specific Setting > Option.
In
cancelled_item_states, list all the item states you want to appear in the Cancelled section (red).In
already_collected_item_states, list all the item states you want to appear in the Already Collected section (green).
⚠️ Important: When overriding, be sure to include the standard states as well as your custom ones.
Example
{
"cancelled_item_states": [
"removed_refund_requested",
"removed_refund_failed",
"removed_refunded",
"issue",
"removed"
],
"already_collected_item_states": [
"picked_up",
"fulfilled"
]
}Customer Search
In the Store App, the Customer Search page displays "pill states" (colored badges) to indicate the state of an order, parcel, or item. These badges can point to different data sources depending on the configuration.
Key concepts
Three object levels are involved in rendering the pill states:
Objet | Description | Exemple d'états |
order | The customer's overall order |
|
line_item | A product line in the order |
|
parcel | The physical parcel associated with the line item |
|
Possible badge colors:
Couleur | Thème | Signification |
Green | SUCCESS | Positive, finalized state |
Red | DANGER | Problematic state, alert |
Grey | DEFAULT | Neutral / in-progress state |
Display logic (priority order)
The pillState() function evaluates conditions in the following order. As soon as a condition is true, it applies and the following ones are ignored.
Will return the state to display (line item or parcel state), depending on configuration. Priority order is as described below:
If there is no line item, display the order state
If the line item is in a danger state, display it
If the line item is in a parcel that is in a success state, display it
If the line item is in a success state, display state (useful for dispatched parcel that we don't want to check order type)
By default, display the parcel state if the line item has one; otherwise display the line item state. The default background is grey and will usually be interpreted as in progress.
The order of cases is FIXED in the code. You cannot swap parcel and line_item in the SUCCESS priority without changing the code.
The state_pills_color configuration
The state_pills_color key in the client configuration file defines which states are considered SUCCESS or DANGER for each object type.
Configuration structure
{
"state_pills_color": {
"line_item": {
"success": ["refunded", "collected"],
"danger": ["cancelled"]
},
"parcel": {
"success": ["bagged", "received"],
"danger": ["lost"]
},
"order": {
"success": ["shipped"],
"danger": ["cancelled"]
}
}
}
Only the states listed under success or danger trigger those colors. Any state not listed will be shown as DEFAULT (grey).
Where to configure?
Configuration > Store App > Page settings > Customer Search > Specific settings > Customer area Option
Known limitation
Items purchased as straight fulfilled via OIS cannot appear with a SUCCESS (green) state, even if state_pills_color is correctly configured.
→ Additional development is required to cover this case.