Checkout UI useAppMetafields to access multiple metafields with multiple of the same function?

[williamsdgla]

Is it possible for Checkout UI useAppMetafields to access multiple metafields when there are multiple of the same functions?

Example:

1. On admin, set up multiple discount rules for the same function (with different codes)

2. On checkout, the Checkout UI useAppMetafields appears only have access to the latest saved function discount rule. The earlier saved config rules are not visible.

The shopify.ui.extension.toml looks like this:

name = ""
type = "checkout_ui_extension"
api_version = "2023-04"

extension_points = [
'Checkout::Reductions::RenderAfter'
]

[capabilities]
api_access = true

[[metafields]]
namespace = "free-gift"
key = "products"

Within Checkout UI, useAppMetafields only has access to the latest saved discount rule:

const appMetafields = useAppMetafields();

[Liam]

Hi Williamsdgla,

When you define metafields in the shopify.ui.extension.toml configuration file, your extension can access these metafields. However, each pair of namespace and key should be unique. If you define multiple metafields with the same namespace and key, only the latest one will be accessible.

In your case, if you have different discount rules, you could consider using different keys for each of them. For example:

[[metafields]]
namespace = "free-gift"
key = "products-rule1"

[[metafields]]
namespace = "free-gift"
key = "products-rule2"

Then, in your extension, you can access these metafields using their respective keys:

const appMetafields = useAppMetafields();
const rule1 = appMetafields['free-gift.products-rule1'];
const rule2 = appMetafields['free-gift.products-rule2'];

Remember that the fields in the metafields array in the shopify.ui.extension.toml configuration file should correspond to the actual metafields that exist in your Shopify store admin.

Hope this helps!

[williamsdgla]

Hello @Liam ,

To be clear, the issue is with multiple of the SAME discount rule.

This is when an admin goes in and create discount#1 (of function #1), then creates another discount #2 (of the same function #2) with a slightly different condition (like different coupon codes).

They would have the SAME metafield because they're the same function.

The discount itself works properly because there are multiple runtime for each function at checkout.

But the Checkout UI ONLY has accessible to the latest saved one (no multiple runtime).

How should this issue be solved?

Thanks for the help

[jains]

Also have this issue.

Specifically for our use case:

When a customer adds a discount code we want to gift them a free product.
We can add the product with a checkout extension UI component. This is not a problem.
However, we need to be able to access the discount configuration from the function metafield so we know what product to add.

How do we do this?

https://github.com/Shopify/ui-extensions/issues/393