Skip to main content
AccountOrders Section
Updated over a week ago

Similar to the address features, customers will see their order history in their account dashboard. For that, we need a new Section.

  1. On your local environment, create a new folder inside src/sections and name it as AccountOrders.

  2. Create an index.js file inside the AccountOrders folder.

  3. Create a styles.module.css file inside the AccountOrders folder.

import * as React from 'react'
import { useCustomerActions, useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import AuthGuard from 'Components/AuthGuard'

const AccountOrders = () => {
const { isLoggedIn, orders } = useCustomerState()
const { getAllOrders } = useCustomerActions()

const router = useRouter()
const { 'order-id': orderId } = router.query

const order = React.useMemo(
() => (orders && orderId ? orders.find(order => === orderId) : undefined),
[orders, orderId],

React.useEffect(() => {
if (isLoggedIn && !orders) {
}, [isLoggedIn, orders, getAllOrders])

return (
{order ? 'Order details' : 'Orders'}

<AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
{order ? (
{/* Here you can show the order details */}
) : (
{/* Here you can display a list of orders */}

export default AccountOrders

Orders page

Let's create our /account/orders page:

  1. Click on the Pages icon from the sidebar.

  2. Click ADD PAGE on the top right corner.

  3. Enter the PAGE NAME: Orders.

  4. Enter the PAGE PATH: account/orders.

  5. If you want, you can select a Frame from the Frame dropdown.

  6. Click ADD PAGE.

Now, add the AccountOrders section to your Orders page (if you are already on the Orders page, skip to step 4):

  1. Click on the Pages icon from the sidebar.

  2. Search for "Orders".

  3. Open the "Orders" page by clicking on its title.

  4. On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".

  5. A list with all our Sections will appear; search for and select AccountOrders.

  6. Click SAVE.

That concludes the password-protected pages. Let's move to the final pieces; recovering and resetting passwords.

Did this answer your question?