Account Section | Shogun Frontend Documentation

After your customers create their accounts and log in using their credentials, they will land at their account dashboard. The Account Section will be used within the /account page to give your authenticated customers access to their orders, address, and more. Before we create the /account page, let's create the Account Section.

On your local environment, create a new folder inside src/sections and name it as Account.
Create an index.js file inside the Account folder.
Create a styles.module.css file inside the Account folder.

Shopify

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

const Account = () => {
  const { getAllAddresses, logout, updateDefaultAddress } = useCustomerActions()
  const customerState = useCustomerState()

  const { addresses, defaultAddress, email, displayName, firstName, isLoggedIn, lastName, status } =
    customerState

  React.useEffect(() => {
    if (isLoggedIn) getAllAddresses()
  }, [isLoggedIn, getAllAddresses])

  return (
    <section>
      <h1>Your account</h1>
      {isLoggedIn && (
        <button onClick={logout}>Sign Out</button>
      )}

      <AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
        <Link href="/account/orders">Orders</Link>

        <div>
          <div>
            <strong>Name:</strong>
            <p>{displayName || [firstName, lastName].join(' ')}</p>
          </div>

          <div>
            <strong>Email:</strong>
            <p>{email}</p>
          </div>

          <div>
            <strong>Password:</strong>
            <p aria-hidden="true">********</p>

            <Link href="/account/reset-password">
              Change password
            </Link>
          </div>

          {addresses && (
            <div>
              <strong>Addresses:</strong>
              {addresses.length > 0
                ? addresses.map(
                    ({ address1, address2, city, country, id, phone, province, zip }) => (
                      <div>
                        <address>
                          <p>{address1}</p>
                          {address2 && <p>{address2}</p>}
                          <p>{city}, {province}, {zip}</p>
                          <p>{country}</p>
                          {phone && <a href={'tel:'+ phone}>{phone}</a>}
                        </address>
                        <div>
                          <Link href={'/account/address?id=' + id}>Edit address</Link>
                          {defaultAddress && defaultAddress.id === id ? (
                            <strong>Default</strong>
                          ) : (
                            <button onClick={() => updateDefaultAddress(id)}>
                              Make default
                            </button>
                          )}
                        </div>
                      </div>
                    )
                  )
                : ' n/a'}
                <Link href={addressUrl}>Add new address</Link>
            </div>
          )}
        </div>
      </AuthGuard>
    </section>
  )
}

export default Account

BigCommerce

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

const Account = () => {
  const { getAllAddresses, logout } = useCustomerActions()
  const customerState = useCustomerState()

  const { addresses, email, firstName, isLoggedIn, lastName, status } = customerState

  React.useEffect(() => {
    if (isLoggedIn) getAllAddresses()
  }, [isLoggedIn, getAllAddresses])

  return (
    <section>
      <h1>Your account</h1>
      {isLoggedIn && (
        <button onClick={logout}>Sign Out</button>
      )}

      <AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
        <Link href="/account/orders">Orders</Link>

        <div>
          <div>
            <strong>Name:</strong>
            <p>{[firstName, lastName].join(' ')}</p>
          </div>

          <div>
            <strong>Email:</strong>
            <p>{email}</p>
          </div>

          <div>
            <strong>Password:</strong>
            <p aria-hidden="true">********</p>

            <Link href="/account/reset-password">Change password</Link>
          </div>

          {addresses && (
            <div>
              <strong>Addresses:</strong>
              {addresses.length > 0
                ? addresses.map(
                    ({ address1, address2, city, country, id, phone, province, zip }) => (
                      <div>
                        <address>
                          <p>{address1}</p>
                          {address2 && <p>{address2}</p>}
                          <p>{city}, {province}, {zip}</p>
                          <p>{country}</p>
                          {phone && <a href={'tel:' + phone}>{phone}</a>}
                        </address>
                        <Link href={'/account/address?id=' + id}>
                          Edit address
                        </Link>
                      </div>
                    ),
                  )
                : ' n/a'}
                <Link href="/account/address">Add new address</Link>
            </div>
          )}
        </div>
      </AuthGuard>
    </section>
  )
}

export default Account

Account page

With the Account Section ready, let's create the /account page:

Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Account.
Enter the PAGE PATH: account.
If you want, you can select a Frame from the Frame dropdown.
Click ADD PAGE.

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

Click on the Pages icon from the sidebar.
Search for "Account".
Open the "Account" page by clicking on its title.
On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
A list with all our Sections will appear, search for and select Account.
Click SAVE.

Cart and Checkout

AccountAddress Section

AccountOrders Section

ForgotPasswordForm Section

ResetPasswordForm Section