For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
I have created shopify app with checkout-ui extension.
In extension toml config file i see this by default:
[extensions.settings] [[extensions.settings.fields]] key = "banner_title" type = "single_line_text_field" name = "Banner title" description = "Enter a title for the banner"
Hi Dixor,
It looks like the Checkout UI Extensions API does not support setting the value of a field in the extension settings via API. These settings are primarily designed to be configured by a merchant directly in the Shopify admin.
The metafields that you define in the extension configuration toml file are not meant to be via an API call, they're meant to used from within the extension's code to read/write data related to the checkout.
If you want to share data between your app and your extension, you may need to set up your own backend service to store this data and make it accessible to both your app and your extension.
You can the fetch
function in your extension to read data from your backend service.
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
Thanks Liam! Appreciate your reply and trying to help me.
As I use remix app builder which runs on node server, i already have prisma db client with custom model to save app related custom data. But i am not sure if i have able to retrieve data from db inside checkout UI extension. How i could achieve it?
Also may be there are other ways is to create meta field definition? Or meta object? So via admin API in app i can set value and inside extension receive it?
Or may be one other way is to use some cart attributes?
I was able to create meta field via admin api with ownerId = shop Global ID And i see in checkout UI the value of it. The problem that this value is old. I set this value on webhook CHECKOUTS_CREATE so may be that why the value is old.
In checkout-ui i have this
export default extension("purchase.checkout.delivery-address.render-before", async (root,{ appMetafields }) => {
console.log(appMetafields);
...
But how i can get the fresh value? If there some other webhook like before CHECKOUTS_CREATE so checkout-ui will get fresh appMetafields object?
As the original questions was answered, i decide to create new questions to help rise community and help other devs.
Any help please?
Unfortunately, the extension's settings could not be set by us. However, I was able to set it up at the metafield.
You would need to call the admin graphql set metafield, update your toml file and then you should be able to call it at your extension.
For more detail (incl example codes), I wrote a blog post on it: https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension