# 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

# 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"

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-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"