Access order metafields from Customer Account UI extension

Extensions
1

I have an Order metafield created from Shopify Admin UI named ‘custom.estimated_ship_date’. I’ve ensured that the ‘Customer accounts access’ was set to Read in the admin UI.

I want to show the value of this metafield in the Order Status page. To do so, I created a new UI extension with these details:

  • shopify.extension.toml
...
[[extensions.targeting]]
module = "./src/OrderStatusBlock.js"
target = "customer-account.order-status.unfulfilled-items.render-after"

[extensions.capabilities]
api_access = true
# network_access = true

[[extensions.metafields]]
namespace = "order.metafields.custom"
key = "estimated_ship_date"
  • src/OrderStatusBlock.js
import { extension, Banner, BlockStack, TextBlock } from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.order-status.unfulfilled-items.render-after', (root, api) => {
  const { i18n, order } = api;

  console.log("API metafield", api.metafields.current);
  console.log("API appMetafields", api.appMetafields.current);

  const banner = root.createComponent(
    Banner,
    {}
  );

  const block = root.createComponent(
    BlockStack,
    {inlineAlignment: "center"}
  );

  const text = root.createComponent(
    TextBlock,
    {},
    "testing"
  );

  block.append(text);
  banner.append(block);
  root.append(banner);
});

I can see the “testing” componenet being rendered, but both the api.metafields and api.appMetafields are empty arrays. How can I access the order metafield from the UI extension code?

I expect the order metafield to be easily accessible, considering the code is serving Order status page. Did I miss something in my code setup?

2

Hey , did you find any solution ?

3

Hey, you can query metafields using the customer account api: Order - Customer API

More context here: Building metafield writes into extensions

4

To add to Robin’s answer, your method for querying metafields is fine on order status page targets, but what’s happening here is that your name space is wrong, it should be just custom and not order.metafields.custom.

1 Like