Edit

Build an order view page

This article is part of the Storefront UI Development Guide.

• Previous Task: Build a checkout page
• Next Task: Add ability to log in

After you successfully place an order at the end of a checkout flow, you'll typically want to display that final order to the shopper as a sort of confirmation page. We recommend building this as a generic "order view" page, which can serve as a confirmation/thank you page as well as a page to link to from order emails, where the shopper can view the current order, shipment tracking information, order status, and more.

If you're following along creating your storefront UI in the recommended order, then you haven't added the ability to log in yet. Just as with carts, when you create an anonymous order (any order that is placed without authentication in the request header) you get back a token that you'll need to access that order again in the future. It isn't always necessary to store that token anywhere, but you can keep it in temporary or persistent application state if you need to.

For our purposes, we'll assume that upon successfully creating an order, you will redirect to your order view page with both the order referenceId and the token in the URL. When loading the page, you'll use the orderByReferenceId GraphQL query to get the order data.

query orderByReferenceId($id: ID!, $shopId: ID!, $token: String) {
  order: orderByReferenceId(id: $id, shopId: $shopId, token: $token) {
    _id
    account {
      _id
    }
    email
    fulfillmentGroups {
      _id
      data {
        ... on ShippingOrderFulfillmentGroupData {
          shippingAddress {
            address1
            address2
            city
            company
            country
            fullName
            isCommercial
            phone
            postal
            region
          }
        }
      }
      items {
        nodes {
          _id
          imageURLs {
            thumbnail
          }
          isTaxable
          optionTitle
          parcel {
            containers
            distanceUnit
            height
            length
            massUnit
            weight
            width
          }
          price {
            displayAmount
          }
          productConfiguration {
            productId
            productVariantId
          }
          productSlug
          productType
          productVendor
          productTags {
            nodes {
              name
            }
          }
          quantity
          subtotal {
            displayAmount
          }
          title
          variantTitle
        }
      }
      selectedFulfillmentOption {
        fulfillmentMethod {
          displayName
        }
        handlingPrice {
          displayAmount
        }
        price {
          displayAmount
        }
      }
      summary {
        fulfillmentTotal {
          displayAmount
        }
        itemTotal {
          displayAmount
        }
        surchargeTotal {
          displayAmount
        }
        taxTotal {
          displayAmount
        }
        total {
          displayAmount
        }
      }
      type
    }
    payments {
      _id
      amount {
        displayAmount
      }
      billingAddress {
        address1
        address2
        city
        company
        country
        fullName
        isCommercial
        phone
        postal
        region
      }
      displayName
      method {
        name
      }
    }
    referenceId
    totalItemQuantity
  }
}

Next Task: Add ability to log in