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

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

AlexBoy
Shopify Partner
27 0 8

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?

Replies 5 (5)

oscprofessional
Shopify Partner
15938 2383 3092

@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.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
AlexBoy
Shopify Partner
27 0 8

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

oscprofessional
Shopify Partner
15938 2383 3092

@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. 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
AlexBoy
Shopify Partner
27 0 8

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
Shopify Partner
1 0 0

@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