How to add a gender field to the registration page on Hydrogen

[AlexBoy]

hi team,

Currently we are working on Hydrogen.
We're having a problem with the registration page.
We want to add a gender field to the registration page.
However we test storefront API does not support metafield.

Is there any solution for this problem?

[oscprofessional]

@AlexBoy 

Usually we use radio option for gender field.

In hydrogen create field.

Refer this code. 

<OptionRadio name={name} values={values} /> 

And also function for this radio option,

function OptionRadio({ values, name }) {
const { selectedOptions, setSelectedOption } = useProductOptions();

return (
<>
{values.map((value) => {
const checked = selectedOptions[name] === value;
const id = `option-${name}-${value}`;

return (
<label key={id} htmlFor={id}>
<input
className="sr-only"
type="radio"
id={id}
name={`option[${name}]`}
value={value}
checked={checked}
onChange={() => setSelectedOption(name, value)}
/>
<div
className={`leading-none border-b-[2px] py-1 cursor-pointer transition-all duration-200 ${
checked ? 'border-gray-500' : 'border-neutral-50'
}`}
>
{value}
</div>
</label>
);
})}
</>
);
}

 You can also refer this link.
https://shopify.engineering/rapid-development-hydrogen-building-product-page

Apply this and let me share your further query.

[AlexBoy]

for the gender field on the registration page. How do you save it?

[oscprofessional]

@AlexBoy ,

Can you share the screenshot where you are doing this ?

Try to implement this code if you face any issues with this code let me know. 

[AlexBoy]

hi @oscprofessional,

We want to save the gender information to the customer's metafile when the user successfully registers for an account. But we can't find any stoerfront API that can do that

[Hibimaru]

@AlexBoy 

Hi, I had the same problem, but I solved it with the following method.

1. add firstName and lastName in the action function with form.get(). This should match the name attribute of the form
2. Add them in the query as well

export const action: ActionFunction = async ({request, context, params}) => {
  const {session, storefront} = context;
  const formData = await request.formData();

  const email = formData.get('email');
  const password = formData.get('password');
  const firstName = formData.get('firstName');
  const lastName = formData.get('lastName');

  if (
    !email ||
    !password ||
    !firstName ||
    !lastName ||
    typeof email !== 'string' ||
    typeof password !== 'string' ||
    typeof firstName !== 'string' ||
    typeof lastName !== 'string'
  ) {
    return badRequest({
      formError: invalidInput,
    });
  }

  try {
    const data = await storefront.mutate<{
      customerCreate: CustomerCreatePayload;
    }>(CUSTOMER_CREATE_MUTATION, {
      variables: {
        input: {email, password, firstName, lastName},
      },
    });
 ...something

Add the gender field in the same way and it should work

[OzanSoft]

you can auto detect with an application 

https://apps.shopify.com/gender-api

Gender API