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