[Tech Blog]How to manage the values of the items you add on the Shopify signup page with meta fields?
I recently developed a Shopify meta field to manage customer information.
So Let me share it.
Development requirement
Add gender input item to the sign-up page and manage those values in a meta field instead of a NOTE.
What to develop using
- Cloud Functions
- Shopify Theme Kit for customizing the signup page.
- Shopify Metafields
- Shopify GraphQL Admin API customer update
- Shopify WebHook customers/update
Development Flow
- Adding Items to be managed by meta fields on the signup page.
In this case, I want to append gender to the signup page, so I add the following code.
{% form 'create_customer' %}
~~~
~~~
~~~
<div class="input-row">
<label class="label">Gender Option</label>
<div class="gender-item">
<div class="gender-item-option">
<input
type="radio"
value="men"
name="customer[note[gender]"
id="gender_men"
/>
<label for="gender_men">Men</label>
</div>
<div class="gender-item-option">
<input
type="radio"
value="women"
name="customer[note[gender]"
id="gender_women"
/>
<label for="gender_women">Women</label>
</div>
<div class="gender-item-option">
<input
type="radio"
value="others"
name="customer[note[gender]"
id="gender_others"
/>
<label for="gender_others">Others</label>
</div>
</div>
~~~
~~~
~~~
{% endform %}2. Create those meta fields
After adding an item, prepare a meta field for it.
3. Set up to use Admin Api with Private apps
Next, configure Private Apps to use Admin API
4. Using Admin Api with Cloud function
Create Cloud Function with reference to the following site.
Then, write the following code to send a query to register the meta field value.
exports.addNoteMetafield = functions.https.onRequest(async (req, res) => {
const getJson = JSON.stringify(req.body);
const parseJson = JSON.parse(getJson);
const customerId = parseJson.admin_graphql_api_id;
const splitLineNote = parseJson.note ? parseJson.note.split(/\n/); let arrayKeyValue = new Array();
if (splitLineNote) {
splitLineNote.forEach((element) => {
const value = element.split(/:\s/);
arrayKeyValue.push(value);
});
} let customerGender;
arrayKeyValue.forEach((item) => {
if (item[0] === "gender" && item[1] != "") {
customerGender = item[1];
}
}) const customerMetafields = /* GraphQL */ `
mutation($input: CustomerInput!) {
customerUpdate(input: $input) {
customer {
id
metafields(first: 100) {
edges {
node {
id
namespace
key
value
}
}
}
}
}
}
`
const genderMetafields = {
namespace: 'my_fields',
key: 'gender',
value: `${customerGender}`,
type: 'single_line_text_field',
}adminApi.request(customerMetafields, {
input: {
id: customerId,
metafields: [genderMetafields],
note: "",
},
});
res.status(200).send('ok')
https://shopify.dev/api/admin-rest/2022-01/resources/webhook#top
5. Register a WebHook for CustomerCreate
After deploying the Cloud function, register the URL output in the CLI in the CustomerCreate Webhook in JSON format.
Then the check to Meta field is populated with the values entered during membership registration.
Thank you for reading.
I will write about the updated meta field value the next time.
