Skip to main content
AccountAddress Section
Updated over a week ago

Customers may want to manage their addresses through their account dashboard. To address this, let's create a new section that will handle adding, editing, and deleting addresses.

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

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

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

Shopify

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

const AccountAddress = () => {
const { getAllAddresses, createAddress, deleteAddress, updateAddress } = useCustomerActions()
const { addresses, isLoggedIn, status } = useCustomerState()

const router = useRouter()
const { id: addressId } = router.query

const initialFormData = {}
const [formData, setFormData] = React.useState(initialFormData)
const [formErrors, setFormErrors] = React.useState()

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

React.useEffect(() => {
if (!addresses) return

const address = addresses.find(address => address.id === addressId)

if (!address) return

const { id, ...data } = address

setFormData(data)
}, [addressId, addresses])

const handleOnChange = event => {
const { name, value } = event.target

setFormData(prevFormData => ({ ...prevFormData, [name]: value }))
}

const handleSubmit = async event => {
event.preventDefault()

setFormErrors(null)

const { errors } = addressId
? await updateAddress({
id: String(addressId),
formData,
})
: await createAddress(formData)

if (errors) {
setFormErrors(errors)
} else {
router.push('/account')
}
}

const handleDelete = async () => {
const { errors } = await deleteAddress(String(addressId))

if (errors) {
setFormErrors(errors)
} else {
router.push('/account')
}
}

const submissionEnabled = Boolean(Object.keys(formData).length)
const { address1, address2, city, company, country, firstName, lastName, phone, province, zip } =
formData

return (
<section>
<h1>{addressId ? 'Edit address' : 'Create address'}</h1>
<div>
{addressId && (
<button onClick={handleDelete}>
Delete address
</button>
)}
</div>

<AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
<form onSubmit={handleSubmit}>
<div>
<label>
First name
<input name="firstName" value={firstName} onChange={handleOnChange} />
</label>
<label>
Last name
<input name="lastName" value={lastName} onChange={handleOnChange} />
</label>
</div>
<label>
Company
<input name="company" value={company} onChange={handleOnChange} />
</label>
<label>
Address
<input name="address1" value={address1} onChange={handleOnChange} />
</label>
<label>
Apartment, suite, etc.
<input name="address2" value={address2} onChange={handleOnChange} />
</label>
<label>
City
<input name="city" value={city} onChange={handleOnChange} />
</label>
<div>
<label>
Country/Region
<input name="country" value={country} onChange={handleOnChange} />
</label>
<label>
State
<input name="province" value={province} onChange={handleOnChange} />
</label>
<label>
ZIP code
<input name="zip" value={zip} onChange={handleOnChange} />
</label>
</div>
<label>
Phone
<input name="phone" value={phone} onChange={handleOnChange} />
</label>
{formErrors && (
<div>
{formErrors.map(({ message }, index ) => (
<p key={index}>{message}</p>
))}
</div>
)}
<div>
<Link href="/account" aria-label="Go back to account's dashboard">Cancel</Link>
<button type="submit" disabled={!submissionEnabled}>Save</button>
</div>
</form>
</AuthGuard>
</section>
)
}

export default AccountAddress

BigCommerce

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

const AccountAddress = () => {
const { getAllAddresses, createAddress, deleteAddress, updateAddress } = useCustomerActions()
const { addresses, isLoggedIn, status } = useCustomerState()

const router = useRouter()
const { id: addressId } = router.query

const initialFormData = {}
const [formData, setFormData] = React.useState(initialFormData)
const [formErrors, setFormErrors] = React.useState()

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

React.useEffect(() => {
if (!addresses) return

const address = addresses.find(address => address.id === addressId)

if (!address) return

const { id, ...data } = address

setFormData(data)
}, [addressId, addresses])

const handleOnChange = event => {
const { name, value } = event.target

setFormData(prevFormData => ({ ...prevFormData, [name]: value }))
}

const handleSubmit = async event => {
event.preventDefault()

setFormErrors(null)

const { errors } = addressId
? await updateAddress({
id: String(addressId),
formData,
})
: await createAddress(formData)


if (errors) {
setFormErrors(errors)
} else {
router.push('/account')
}
}

const handleDelete = async () => {
const { errors } = await deleteAddress(String(addressId))

if (errors) {
setFormErrors(errors)
} else {
router.push('/account')
}
}

const submissionEnabled = Boolean(Object.keys(formData).length)
const { address1, address2, city, company, country, firstName, lastName, phone, state, postalCode } =
formData

return (
<section>
<h1>{addressId ? 'Edit address' : 'Create address'}</h1>
<div>
{addressId && (
<button onClick={handleDelete}>
Delete address
</button>
)}
</div>

<AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
<form onSubmit={handleSubmit}>
<div>
<label>
First name
<input name="firstName" value={firstName} onChange={handleOnChange} />
</label>
<label>
Last name
<input name="lastName" value={lastName} onChange={handleOnChange} />
</label>
</div>
<label>
Company
<input name="company" value={company} onChange={handleOnChange} />
</label>
<label>
Address
<input name="address1" value={address1} onChange={handleOnChange} />
</label>
<label>
Apartment, suite, etc.
<input name="address2" value={address2} onChange={handleOnChange} />
</label>
<label>
City
<input name="city" value={city} onChange={handleOnChange} />
</label>
<div>
<label>
Country/Region
<input name="country" value={country} onChange={handleOnChange} />
</label>
<label>
State
<input name="province" value={state} onChange={handleOnChange} />
</label>
<label>
ZIP code
<input name="zip" value={postalCode} onChange={handleOnChange} />
</label>
</div>
<label>
Phone
<input name="phone" value={phone} onChange={handleOnChange} />
</label>
{formErrors && (
<div>
{formErrors.map(({ message }, index ) => (
<p key={index}>{message}</p>
))}
</div>
)}
<div>
<Link href={'/account'} aria-label="Go back to account's dashboard">Cancel</Link>
<button type="submit" disabled={!submissionEnabled}>
Save
</button>
</div>
</form>
</AuthGuard>
</section>
)
}

export default AccountAddress

Address page

Create the /account/address page:

  1. Click on the Pages icon from the sidebar.

  2. Click ADD PAGE on the top right corner.

  3. Enter the PAGE NAME: Address.

  4. Enter the PAGE PATH: account/address.

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

  6. Click ADD PAGE.

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

  1. Click on the Pages icon from the sidebar.

  2. Search for "Address".

  3. Open the "Address" 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 AccountAddress.

  6. Click SAVE.

1584
Did this answer your question?