Solved

How to read a regular customer metafield value from checkout ui extension

DeeDee-TDY
Shopify Partner
46 4 3

I have tried the following code to read a customer metafield value. The check for a defined or undefined metafield is successful, but I don't know how to read the metafield value (metafield?.value is undefined)

 

const metafield = useAppMetafields({type: "customer", namespace: "details", key: "pook",});

if (typeof metafield === 'undefined') {
console.error('DEBUG: metafield from useAppMetafields is undefined.');
}
else{
console.error('DEBUG: metafield value: ' + metafield?.value);    //metafield?.value is undefined
}

Accepted Solution (1)
DeeDee-TDY
Shopify Partner
46 4 3

This is an accepted solution.

In my case, I had multiple extension targets and multiple metafields defined in the toml file. I reviewed new guidance at https://shopify.dev/docs/apps/app-extensions/configuration .
What fixed the problem for my app was modification to the toml file to:

a) use [[extensions.targeting.metafields]] instead of [[extensions.metafields]] and

b) place each metafield block under the associated target block.

Example: 

[[extensions.targeting]]
module = "./src/Checkout1.jsx"
target = "purchase.checkout.shipping-option-list.render-before"

[[extensions.targeting.metafields]]
key = "key1"
namespace = "custom"

[[extensions.targeting]]
module = "./src/Checkout2.jsx"
target = "purchase.checkout.shipping-option-list.render-after"

[[extensions.targeting.metafields]]
key = "key2"
namespace = "custom"

 

View solution in original post

Replies 5 (5)

LouiseEH
Shopify Partner
33 3 4

Did you configure which metafields the app has access to in the extension toml, and restartede afterwards e.g.:

[[extensions.targeting.metafields]]
namespace = "details"
key = "pook"

I expect the result of "metafield" to be an array of metafields, but currently I have not found a way to make it work either. 

DeeDee-TDY
Shopify Partner
46 4 3

Thank you for your suggestion. Yes, I configured the metafield in the toml file, and also added useAppMetafields hook to the import section of the source code. I believe I am just not referencing the value properly.

DeeDee-TDY
Shopify Partner
46 4 3

I do see the response is an array, but I can't get any of these to work either:

    metafield[0].value
or  
    metafield.forEach(element => {
      console.error('DEBUG element.value: ' + element.value);
    });
.forEach(element => {
      console.error('DEBUG element.index: ' + element.index);
    });
LouiseEH
Shopify Partner
33 3 4

I got mine working now, e.g.:

  1. Configure a defined product metafield via the admin, e.g. namespace = 'custom', key = 'test'
  2. Set a value in the metafield on a product
  3. Configure the metafield in the toml file

 

[[extensions.metafields]]
namespace = "custom"
key = "test"​

 

I placed it right after the [[extensions]] variables, probably not important though

  • Restart the server
  • Ensure the product in the cart has a value in the metafield
  • Use the hook in the jsx file:

 

const appMetafields = useAppMetafields()
console.log('appMetafields', appMetafields)​

 

  • I though it would be necessary to enable storefront read access on the defined metafield, but I can access the metafield value in the browser console log when the setting is disabled.


  • See the browser console log - the appMetafields is a list of metafield values, so you should be able to access the value via 

 

appMetafields[0].metafield.value​

 

DeeDee-TDY
Shopify Partner
46 4 3

This is an accepted solution.

In my case, I had multiple extension targets and multiple metafields defined in the toml file. I reviewed new guidance at https://shopify.dev/docs/apps/app-extensions/configuration .
What fixed the problem for my app was modification to the toml file to:

a) use [[extensions.targeting.metafields]] instead of [[extensions.metafields]] and

b) place each metafield block under the associated target block.

Example: 

[[extensions.targeting]]
module = "./src/Checkout1.jsx"
target = "purchase.checkout.shipping-option-list.render-before"

[[extensions.targeting.metafields]]
key = "key1"
namespace = "custom"

[[extensions.targeting]]
module = "./src/Checkout2.jsx"
target = "purchase.checkout.shipping-option-list.render-after"

[[extensions.targeting.metafields]]
key = "key2"
namespace = "custom"