Order Status
The Order Status component renders an order and all of its details, including shipping status, list of purchased products and more. This component is intended for building an order overview page on your website, which customers can visit at any time to track the status of their purchase.
Examples
- Adding a basic Order Status component to a page: Demo | Source Code
How to Embed
To embed this component on your website, include the reflow library and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="order-status"></div>
Notice that we don't specify an order id here. This is because Order Status looks for the order id in the query string of the page URL. When Reflow sends a purchase confirmation email to your customers, this parameter will be included in the URL automatically, so that they see the correct order.
After adding Order Status to your website, remember to set Order Status Page in your store's settings. If set, this will include a link to your page in the purchase emails that customers receive. Reflow will add the appropriate order_id parameters automatically.
Connecting with Shopping Cart
As an option, the Order Status component can also be placed on your success page which customers are redirected to after completing their purchase. It will automatically obtain the order id from the page URL as it is passed by the Shopping Cart component. Here is an example:
<div
data-reflow-type="shopping-cart"
data-reflow-success-url="https://example.com/thankyou.html"
></div>
Will redirect to:
https://example.com/thankyou.html?order_id=1234567890&secure_hash=1a2b3c4d5e
This way, if you choose to add an Order Status component in the success redirect page, the customer's order will be automatically displayed.
Displaying Test Data
To make testing your website while you're designing it easier, you can add magic query parameters to the page URL which will force the order status component to display test data:
?order_id=testing&secure_hash=testing
You can see a live example here.
Supported Attributes
You can configure the order and change the way it's rendered by specifying additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | order-status | Must always be set. |
| data-reflow-show | customer, billing, shipping, line-items | (optional) Comma separated list of sections to display. The sections not in the list will be hidden. If not set everything is shown (default). Example: data-reflow-show="billing,shipping,line-items" |