Skip to main content
Version: HTML Toolkit 2.0

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.

Note

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.

AttributePossible ValuesDescription
data-reflow-typeorder-statusMust always be set.
data-reflow-showcustomer, 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"