How do I access a shop-level metafield in a checkout extension?

Retired Boards Appdev Extensions
,
1

extension toml:

api_version = "2024-04"

[[extensions]]
type = "ui_extension"
name = "kp-display-usd-summary-ui"
handle = "kp-display-usd-summary-ui"

# this is a dynamic target that is dropped below "Order Summary Subtotal"
[[extensions.targeting]]
module = "./src/DisplayUSDSummary.js"
target = "purchase.checkout.block.render"

[extensions.capabilities]
api_access = true
network_access = true

[[extensions.metafields]]
namespace = "myStore"
key = "testmf"
[[extensions.metafields]]
namespace = "myProduct"
key = "nsf"
[[extensions.metafields]]
namespace = "myProduct"
key = "notforwholesale"

Code:

import {extension, Banner, TextBlock, BlockSpacer} from "@shopify/ui-extensions/checkout";
export default extension(`purchase.checkout.block.render`, (root, api) => {
	const {cost, shippingAddress, query, billingAddress, shop, metafields} = api;
	console.log(`shop and metafields: `, shop, metafields.current);
	metafields.subscribe((newMetaFields) => {
		console.log(`new metafields: `, newMetaFields);
	});
	console.log(`Display USD Summary v15: `, cost, shippingAddress, billingAddress, cost.totalAmount.current, cost.totalShippingAmount?.current, cost.totalTaxAmount.current, metafields.current);
});

And now that I’m looking at this, none of the metafields are populating, shop or products.

Thanks for any feedback,

Chris

2

Hello @Schmidtc63

You can use useAppMetafields hook to retrieve meta fields and specify the type, such as shop or product.

// Get a reference to the metafield this hook returns an array of metafields
  const metafields= useAppMetafields({
    namespace: "namespace",
    key: "Key",
    type:"shop"
  
  });

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

3

Does it look like I’m using React?

4

metafields vs appMetafields:

appMetafields are the “normal” metafields from products, customers, shop, etc. appMetafields are what you use to query existing metafields. “metafields” are order level data that you can added during the checkout. So, for instance, if you want to retrieve existing metafields, you would first define them in the extension .toml file like above. Then:

import {extension, Banner, TextBlock, BlockSpacer} from "@shopify/ui-extensions/checkout";
export default extension(`purchase.checkout.block.render`, (root, api) => {
	const {cost, shippingAddress, query, billingAddress, shop, metafields, appMetafields} = api;
	console.log(`shop and metafields: `, shop, appMetafields.current);
	appMetafields.subscribe((newMetaFields) => {
		console.log(`new metafields: `, newMetaFields);
	});
});

Note that you have to subscribe to the appMetafield object before anything is returned.