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

williamsdgla
Shopify Partner
3 0 0

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

 

 

Replies 3 (3)

Liam
Shopify Staff
2731 302 782

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!

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

williamsdgla
Shopify Partner
3 0 0

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).

Untitled.png

 

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
Shopify Partner
11 0 4

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