[Tech Blog]How to Edit and update the values of meta fields from the Account Page?

Last time I shared with you how to update meta field values from the Signup Page.

[Tech Blog]How to manage the values of the items you add on the Shopify signup page with meta…

This time, Let me introduce How to Edit and update values from the Account Page.

Prerequisite

You can use the below Items and Set up must be completed.

• How to use Cloud Functions
• Shopify Theme Kit for customizing the Account page.
• Already Set Up Shopify GraphQL Admin API customer update

Development Flow

1. Register metafield items which you want to update from the Account page. (I use the previous metafield that I created before.)

2. Create a form for updating
It is possible to create the form with liquid. But it is necessary to specify the form_type. It hasn’t the appropriate type for this case, So I recommend to create a form for updates.

<form class="js-updateForm" name="updateForm">
  <input type="hidden" name="admin_graphql_api_id" value="gid://shopify/Customer/{{ customer.id }}" />
  <div>
    <div>
      <input type="radio" value="Men" name="gender" id="gender_men"/>
      <label for="gender_men">Men</label>
    </div>
    <div>
      <input type="radio" value="Women" name="gender" id="gender_women" />
      <label for="gender_women">Women</label>
    </div>
    <div>
      <input type="radio" value="Others" name="gender" id="gender_others" />
      <label for="gender_others">Others</label>
    </div>
  </div>
  <input type="button" class="js-btn" value="Update" />
</form>

3. Using Admin Api with Cloud function

exports.updateMetafield = functions.https.onRequest(async (req, res) => {
  cors(req, res, async () => {
    const getJson = JSON.stringify(req.body);
    const parseJson = JSON.parse(getJson);
const arrayKeyValue = Object.entries(parseJson);
    let customerId;
    arrayKeyValue.forEach((item) => {
      if (item[0] === "admin_graphql_api_id" && item[1] != "") {
        customerId = item[1];
      }
    })
let customerGender;
    arrayKeyValue.forEach((item) => {
      if (item[0] === "gender") {
        customerGender = item[1];
      }
    })
const userSetMetafields = /* GraphQL */ `
        mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {
            metafieldsSet(metafields: $metafields) {
                metafields {
                    key
                    namespace
                    value
                }
                userErrors {
                    field
                    message
                    code
                }
            }
        }
    `
    const genderSetMetafields = customerGender ? {
      key: 'gender',
      namespace: 'my_fields',
      ownerId: `${customerId}`,
      type: 'single_line_text_field',
      value: `${customerGender}`,
    } : null
if (!customerId) {
      res.status(500).send('Your Request Failed')
    } else {
      await adminApi.request(
        userSetMetafields, {
          metafields: [genderSetMetafields].filter((m) => m),
        });
      await res.status(200).send('ok')
    }
  });
});

4. Write jQuery to post data from Account Page to Cloud Function created

$('.js-btn').on('click', async () => {
  const url = `${CloudFunction_URL}`;
let data = $('.js-updateForm').serializeArray();
  data = parseJson(data);
const postSettings = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    mode: 'cors',
    body: JSON.stringify(data),
  }
try {
    await fetch(url, postSettings);
    window.location.reload();
  } catch (e) {
    return e
  }
});

I have to do things that prepare a form for updating on the Account page and POST the form data to the Admin API. It was surprisingly simple.
Thank you for reading.