How do I fetch product details from a checkout ui extension?

[aej11a]

I'm building a Shopify Checkout UI extension, but I need more data about products than the lines extension field provides.

What's the best way to fetch a product from a Checkout UI extension? I tried using the Storefront API but I need an access token and can't figure out where that should come from.

Thanks

[Alan]

Hi @aej11a - thanks for getting in touch! This is a great question. I hope I can shed some light on why the data doesn't appear through the Checkout Extension fields you mentioned.

Generally, we try to separate checkout from other components like the Storefront and Admin API. This helps limit the amount of data that is shared between Shopify and external checkout-related apps. This could be why the extra data you need isn't surfaceable through the "lines" field

That said, you could try creating a Storefront Access token using the storefrontAccessTokenCreate mutation. This will allow you to then use the Storefront API to query more product data. The storefront API is often used by Sales Channels for reasons like this, and my understanding is that it also integrates into UI extensions.

Let us know if we can clarify anything further on our end. If you do need extra help here - just let us know what product data you need and we'd be happy to see if we can find a solution. Hope this helps provide some next steps!

[aej11a · Accepted solution]

Hey @Alan - thanks for the explanation!

What I was looking for was the other variants of the products in the user's cart.

I solved this problem by adding an API endpoint to my app's backend (not in the extension, in the web folder)

Then I used a simple data-fetching hook to checkout UI extension to request from that endpoint, but the fetch request was weirdly not working.

Eventually I realized I needed to enable network access on the UI extension by adding the capabilities field shown here to my extension config (make sure to add it at the bottom of the file) and then activate network access by following these steps 

After following those steps, everything finally worked.

[Alan]

Hey @aej11a - no worries! Glad to hear you were able to solve this on your end, this info will be super helpful for folks in the future. 😀

[dani_sanomads]

Thanks for the information. I have a question. Can we render custom components like calender or date_picker on the checkout? If not then is there any way to trigger our custom components on Checkout through a JS observer or event.Is it even possible? 
Secondly, can we get the object of Delivery options to display components dynamically?

[codyb13]

Hi! I've enabed network_access on the app and also added the network_access = true to the toml file -- but the console is still throwing a NetworkAccessDenied error. Did you have to do anything else to get network access working? I'm wondering if it's because it's a developer preview. 

Thanks!

[LunarLander]

Hi @aej11a,
I know some time has passed by, but since I did the same thing as you (added an api endpoint in my app's backend), didn't you get any CORS issues?
I just can't get my endpoint to work. Tried to set up proper headers on the express server both manually and by using the 'cors' npm package.

[jamalali81]

I am looking to do something similar. Do have more details as to how you setup the API endpoint in the app? And how did you then call that in the Checkout? Any help is much appreciated.

[radpinkdream]

Hello! I've also enabed network_access on the app and also added the network_access = true to the toml file but I'm receiving a 403 on my network request to the Shopify API at 

`<storefrontUrl>/api/2022-10/graphql.json`. I've turned on all the scopes in my app installation request.

[radpinkdream]

Hmm I might be misunderstanding but I don't think the storefront API integrates well with UI extensions, at least not when it can no longer be turned into a Sales Channel (after being installed once on a development store). 

[KevSig]

Hi Alan, I appreciate the response - but I seem to be having trouble using the storefront api on the client  @Shopify/shopify-api  given its for node. Am I understanding you correctly?