Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Only some metafield values are being saved

Only some metafield values are being saved

Turbofan1178
Shopify Partner
57 4 10

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>
  );
}
Founder, WC: Invite To WhatsApp Channel
- Invite customers to join your WhatsApp channel with a single click
- Boost outreach message open rates
- Grow sales with direct outreach on WhatsApp channels
Replies 2 (2)

Liam
Community Manager
3108 344 889

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
57 4 10

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

 




Founder, WC: Invite To WhatsApp Channel
- Invite customers to join your WhatsApp channel with a single click
- Boost outreach message open rates
- Grow sales with direct outreach on WhatsApp channels