๐ง For Shopify stores
Make sure the Customers Accounts permission is enabled. Check Shopify documentation for more details.
Used in this Section:
Customers may not have an account to log into. Let's create a Section that will allow your customers to create an account.
To create a Section:
On your local environment, create a new folder inside
src/sections
and name it asRegisterForm
.Create an
index.js
file inside theRegisterForm
folder.Create a
styles.module.css
file inside theRegisterForm
folder.
import * as React from 'react'
import { useCustomerActions } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'
const RegisterForm = () => {
const [disabled, setDisabled] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(false)
const [registerErrors, setRegisterErrors] = React.useState()
const [registerData, setRegisterData] = React.useState({
firstName: '',
lastName: '',
email: '',
password: '',
})
const { register } = useCustomerActions()
const router = useRouter()
React.useEffect(() => {
setDisabled(registerData.email === '' || registerData.password === '')
}, [registerData.email, registerData.password])
const handleSubmit = async event => {
event.preventDefault()
setRegisterErrors(null)
setIsLoading(true)
const { errors } = await register(registerData)
setIsLoading(false)
if (errors) {
setRegisterErrors(errors)
return
}
router.push('/account/login')
}
return (
<section>
<h1>Register</h1>
<AuthGuard allowedAuthStatus="unauthenticated" redirectUrl="/account">
<form onSubmit={handleSubmit}>
<label>
First name{' '}
<span>
(optional)
</span>
<input
type="text"
value={registerData.firstName}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
firstName: event.target.value,
}))
}
/>
</label>
<label>
Last name{' '}
<span>
(optional)
</span>
<input type="text" value={registerData.lastName} onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
lastName: event.target.value,
}))
}
/>
</label>
<label>
<input placeholder="email@example.com" type="email" value={registerData.email}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
email: event.target.value,
}))
}
required
/>
</label>
<label>
Password
<input placeholder="Enter your password" type="password" value={registerData.password}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
password: event.target.value,
}))
}
required
/>
</label>
<button disabled={disabled} type="submit">
Register
</button>
{registerErrors && (
{/* Loop through the array of validation errors if needed */}
)}
<hr />
<p>
Already have an account?{' '}
<Link href="/account/login">
Login
</Link>
</p>
</form>
</AuthGuard>
</section>
)
}
export default RegisterForm
Register page
With the RegisterForm
Section ready, we need to create a register page:
Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Register.
Enter the PAGE PATH:
account/register
.If desired, you can select a Frame from the Frame dropdown.
Click ADD PAGE.
Now, add the RegisterForm
section to your Register page (if you are already on the Register page, skip to step 4):
Click on the Pages icon from the sidebar.
Search for "Register".
Open the "Register" 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 selectRegisterForm
.Click
SAVE
.
Register page example