RegisterForm Section | Shogun Frontend Documentation

🚧 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 as RegisterForm.
Create an index.js file inside the RegisterForm folder.
Create a styles.module.css file inside the RegisterForm 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>
            Email
            <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 select RegisterForm.
Click SAVE.

LoginForm Section

AccountAddress Section

AccountOrders Section

ForgotPasswordForm Section

ResetPasswordForm Section