# Order Status
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.
- Adding a basic Order Status component to a page: Demo (opens new window) | Source Code (opens new window)
# 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:
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.
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:
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:
You can see a live example here (opens new window).
# Supported Attributes
You can configure the order and change the way it's rendered by specifying additional
|data-reflow-type|| ||Must always be set.|
|data-reflow-show|| ||(optional) Comma separated list of sections to display. The sections not in the list will be hidden. If not set everything is shown (default). |