Only some metafield values are being saved

Only some metafield values are being saved

Turbofan1178
Shopify Partner
51 4 8

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>
  );
}
DK
Replies 2 (2)

Liam
Shopify Staff
2862 313 816

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
51 4 8

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>
  );
}

 




DK