How to add customer custom attributes in PWA Magento

Here I am taking custom attribute as Phone Number so you can replace your custom attribute with the Phone Number.

In today’s article, we will guide you about steps to add customer attributes programmatically in Magento 2. Customer attributes help in collecting additional information from customers and offering a personalized experience using that information. First of all, we’ll create a simple module and name it Learn_Magento and use it here.

Let’s follow step by step instructions to create customer attribute in Magento 2

Step 1: Create a module.xml file 

In order to do that, we need to create a module.xml file in the following directory – app/code/Learn/Magento/etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Learn_Magento" schema_version="0.0.1" setup_version="0.0.1">
</module>
</config>

Step 2: Create a registration.php file 

To do this, we need to create a registration.php file in app/code/Learn/Magento and paste the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Learn_Magento',
__DIR__
);

Step 3: Create a schema.graphqls file 

To do this, we need to create a schema.graphqls file in app/code/Learn/Magento/etc and paste the following code:

input CustomerInput {
    custom_attribute: String @doc(description: "The customer's phone number")
}

Note: Please replace custom_attribute with your customer attribute

Let’s follow step by step instructions to add a custom attribute in the Registration form in PWA Venia Concept

Step 1: Add custom attribute field in createAccount.js file 

Goto this path: packages/venia-ui/lib/components/CreateAccount/createAccount.js

Add / Update below code in CreateAccount-form mentioned in above mentioned component file.

<Field
                label={formatMessage({
                    id: 'createAccount.customAttribute',
                    defaultMessage: 'Custom Attribute'
                })}
            >
                <TextInput
                    field="customer.customer_attribute"
                    autoComplete="family-name"
                    validate={isRequired}
                    validateOnBlur
                    mask={value => value && value.trim()}
                    maskOnBlur={true}
                    data-cy="custom-attribute"
                />
            </Field>

Reference Image

Step 2: Add custom attribute code in create account mutation createAccount.gql.js

Goto this path: packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js

Add / Update below code in CREATE_ACCOUNT ggl so currently i am adding full export code so you can just update your custom attribute one.

export const CREATE_ACCOUNT = gql`
    mutation CreateAccount(
        $email: String!
        $firstname: String!
        $lastname: String!
        $custom_attribute: String!
        $password: String!
        $is_subscribed: Boolean!
    ) {
        createCustomer(
            input: {
                email: $email
                firstname: $firstname
                lastname: $lastname
                custom_attribute: $custom_attribute
                password: $password
                is_subscribed: $is_subscribed
            }
        ) {
            # The createCustomer mutation returns a non-nullable CustomerOutput type
            # which requires that at least one of the sub fields be returned.

            # eslint-disable-next-line @graphql-eslint/require-id-when-available
            customer {
                email
            }
        }
    }
`;

Step 3: use and pass custom attribute front-end to server in useCreateAccount.js file

Goto Path: packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js

Add / Update you custom attribute in handleSubmit callback method.

 await createAccount({
                    variables: {
                        email: formValues.customer.email,
                        firstname: formValues.customer.firstname,
                        lastname: formValues.customer.lastname,
                        custom_attribute: formValues.customer.custom_attribute,
                        password: formValues.password,
                        is_subscribed: !!formValues.subscribe
                    }
                });

Note: So please replace custom_attribute to your real customer attribute and if you have any questions or feedback so please feel free to ask in the comments or reach me my email address chelumallap@gmail.com

Thank you so much for reading this blog and keep support me and i will coming with the new blog.