Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Only some metafield values are being saved

Turbofan1178
Shopify Partner
47 4 5

I'm trying to save some values to the order metafield but for some reason, only `FOO_METAFIELD_NAMESPACE` and `FOO_METAFIELD_KEY`  are being saved to the order. The `BAR_METAFIELD_NAMESPACE` and `BAR_METAFIELD_KEY` isn't being saved. Here's what my code looks like:

 

import React from 'react';
import {
  reactExtension,
  TextField,
  useMetafield,
  useApplyMetafieldsChange,
  useExtensionCapability,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.payment-method-list.render-after',
  () => <Extension />,
);

function Extension() {
  const FOO_METAFIELD_NAMESPACE = "FOO_NAMESPACE";
  const FOO_METAFIELD_KEY = "foo_key";
  const BAR_METAFIELD_NAMESPACE = "BAR_NAMESPACE";
  const BAR_METAFIELD_KEY = "bar_key";

  const fooState = useMetafield({
    namespace: FOO_METAFIELD_NAMESPACE,
    key: FOO_METAFIELD_KEY,
  });
  const barState = useMetafield({
    namespace: BAR_METAFIELD_NAMESPACE,
    key: BAR_METAFIELD_KEY,
  });

  const updateMetafield = useApplyMetafieldsChange();
  const canBlockProgress = useExtensionCapability("block_progress");
  const fooLabel = canBlockProgress ? "Foo Label" : "Foo Label (optional)";
  const barLabel = canBlockProgress ? "Bar Label" : "Bar Label (optional)";

  ...

  const handleFooFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: FOO_METAFIELD_NAMESPACE,
      key: FOO_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  };

  const handleBarFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: BAR_METAFIELD_NAMESPACE,
      key: BAR_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  }


  return (
    <BlockStack>
      <TextField label={barLabel} value={barState?.value} name="bar-field" onChange={(value) => handleBarFieldChange(value)} />
      <TextField label={fooLabel} value={fooState?.value} name="foo-field" onChange={(value) => {handleFooFieldChange(value)}} />
    </BlockStack>
  );
}
Replies 2 (2)

Liam
Shopify Staff
2677 288 734

Hi Turbofan1178,

 

Is there any differences between creating the foo and the bar metafields? From the code you shared it looks the same, but just wanted to confirm.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Turbofan1178
Shopify Partner
47 4 5

Hey @Liam ,

I changed the code a bit before posting but this one is more similar to what I've in my app, if you notice both namespaces are both prepended with TEST_APP. I wonder if that has something to do with the bug?

 

import React from 'react';
import {
  reactExtension,
  TextField,
  useMetafield,
  useApplyMetafieldsChange,
  useExtensionCapability,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.payment-method-list.render-after',
  () => <Extension />,
);

function Extension() {
  const FOO_METAFIELD_NAMESPACE = "TEST_APP_FOO_NAMESPACE";
  const FOO_METAFIELD_KEY = "test_app_foo_key";
  const BAR_METAFIELD_NAMESPACE = "TEST_APP_BAR_NAMESPACE";
  const BAR_METAFIELD_KEY = "test_app_bar_key";

  const fooState = useMetafield({
    namespace: FOO_METAFIELD_NAMESPACE,
    key: FOO_METAFIELD_KEY,
  });
  const barState = useMetafield({
    namespace: BAR_METAFIELD_NAMESPACE,
    key: BAR_METAFIELD_KEY,
  });

  const updateMetafield = useApplyMetafieldsChange();
  const canBlockProgress = useExtensionCapability("block_progress");
  const fooLabel = canBlockProgress ? "Foo Label" : "Foo Label (optional)";
  const barLabel = canBlockProgress ? "Bar Label" : "Bar Label (optional)";

  ...

  const handleFooFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: FOO_METAFIELD_NAMESPACE,
      key: FOO_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  };

  const handleBarFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: BAR_METAFIELD_NAMESPACE,
      key: BAR_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  }


  return (
    <BlockStack>
      <TextField label={barLabel} value={barState?.value} name="bar-field" onChange={(value) => handleBarFieldChange(value)} />
      <TextField label={fooLabel} value={fooState?.value} name="foo-field" onChange={(value) => {handleFooFieldChange(value)}} />
    </BlockStack>
  );
}