I accidentally lost the clip that should go after 14:54. Here are the important steps from that clip: • Replace "Hello from my extension" with {checkoutMessage} so the extension renders the value of the metafield we just fetched. • In shopify.extension.toml uncomment the line that api_access = true so your extension can use Shopify's API, otherwise you'll receive an error when querying the API. Sorry for the inconvenience!
Thank you for the useful video. Could you make a video how to get product information in Checkout UI Extensions using Unauthenticated scopes? For example totalInventory.
Thank you for the useful video. I have 1 question, can we create extra fields in customer account extension for customer information. like gender and D.O.B
thanks, it is very informative and really helpful. How do we proceed if we want to add multiple extension elements on same page. example - thank you page has an element for coupon code, survey, date of birth etc.
Very similar to what is being shown in this part of the video ruclips.net/video/ZCSdUEMIa8g/видео.html, you just need to create the tsx file with the appropriate component and render target and then add it to your shopify.extension.toml
Thank you for the video! I have a question, I made an app with an extension for the thank you and order status page and is working but the store and partners account are of the same owner, how can I made a custom distribution to another store? I made another app for another store and the block is not showing in the customize part, do you know why? is something about custom pixels?
If you deploy it as a new app you should be able to set it for custom distribution to another store. Also make sure the second store has Checkout Extensibility enabled for the Thank You page.
@@stackingcontext thank you for your answer, the scripts we used for order and thank you page (they have an with another page qr) are going to be deprecated in shopify so we needed another alternative, the app has not the possibility to add an , but with a QR code I think I solved it. Is an interesting topic if you want to make a video.
Hey @all When I upgrade the checkout extension, then the entire script under the checkout.liquid file is where to add, and these run perfectly. Please guide me. This is the urgent task after 13-august. My entire script is not working.
This won't happen like you simply upgrade to checkout extensionality and run checkout.liquid code as is. You will have to build small Apps, these could be Shopify functions, UI Apps etc, and add similar functionalities in these. You may find many limitations when migrating from checkout.liquid to checkout apps, so you will need alternative approaches through the checkout apps for the functionalities in checkout.liquid file.
Hey @sackingcontext The preview seems to not work anymore. Is it possible that you need to use post-checkout UI (when targeting post-checkout) from now on?
The only way I've found to do that is to grab the order id using the useOrder hook and then sending that to a server that has access to the Admin API, from there you can query the order status and send that information back to the browser.
The video was recorded from a development store with the Checkout Extensibility preview enabled, also when it was recorded the checkout was set to be a three-page checkout instead of one-page checkout.
@@jiachen1078 When you are creating a development store select Create a store to test and build and then in Build Version select the preview you want to enable.
does it require any particular requirements because in my case it is working on checkout page but on thankyou page nothing is render why please help me or suggest something so i can solve this problem??
Ensure your extension has a target in the thank you page, that it is spelled correctly and that it is in your config file as well. Also check the console to see if there are errors or warnings printed that might tell you what is going on. Lastly, try restarting your development server.
i found the solution the problem is on store while creating store there is particular option for checkout extension that have to be checked !@@stackingcontext
I don't see it mentioned in the docs explicitly, but considering Checkout UI Extensions for the other steps are only available in Shopify Plus, I think that's likely to be the case for these ones too.
@@stackingcontext I have tried to use the userOrder() hook however whenever I have used that extension doesnot seems to be working properly. It says "access denied".
@@stackingcontext I have tried the hook however whenever I tried this hook my extension doesnot work andshoe me this error. "Cannot call 'order()' on target 'purchase.thank-you.block.render'."
I accidentally lost the clip that should go after 14:54. Here are the important steps from that clip:
• Replace "Hello from my extension" with {checkoutMessage} so the extension renders the value of the metafield we just fetched.
• In shopify.extension.toml uncomment the line that api_access = true so your extension can use Shopify's API, otherwise you'll receive an error when querying the API.
Sorry for the inconvenience!
Hi, How would I know if the theme has an old thank you page or Thankyou page with an extension?
Thank you for the video! Any idea why my preview link doesn't work?
Thank you for the useful video.
Could you make a video how to get product information in Checkout UI Extensions using Unauthenticated scopes?
For example totalInventory.
Thank you for the useful video.
I have 1 question, can we create extra fields in customer account extension for customer information. like gender and D.O.B
Yes, that information would go into a Customer metafield and through UI Extensions you can read and write metafields, so it should be possible.
thanks, it is very informative and really helpful. How do we proceed if we want to add multiple extension elements on same page. example - thank you page has an element for coupon code, survey, date of birth etc.
Very similar to what is being shown in this part of the video ruclips.net/video/ZCSdUEMIa8g/видео.html, you just need to create the tsx file with the appropriate component and render target and then add it to your shopify.extension.toml
Thank you for the video! I have a question, I made an app with an extension for the thank you and order status page and is working but the store and partners account are of the same owner, how can I made a custom distribution to another store? I made another app for another store and the block is not showing in the customize part, do you know why? is something about custom pixels?
If you deploy it as a new app you should be able to set it for custom distribution to another store. Also make sure the second store has Checkout Extensibility enabled for the Thank You page.
@@stackingcontext thank you for your answer, the scripts we used for order and thank you page (they have an with another page qr) are going to be deprecated in shopify so we needed another alternative, the app has not the possibility to add an , but with a QR code I think I solved it. Is an interesting topic if you want to make a video.
I want to make the ‘Postal Code’ field Select-Option on the checkout page, how can I do this?
Hey @all
When I upgrade the checkout extension, then the entire script under the checkout.liquid file is where to add, and these run perfectly. Please guide me. This is the urgent task after 13-august. My entire script is not working.
This won't happen like you simply upgrade to checkout extensionality and run checkout.liquid code as is.
You will have to build small Apps, these could be Shopify functions, UI Apps etc, and add similar functionalities in these.
You may find many limitations when migrating from checkout.liquid to checkout apps, so you will need alternative approaches through the checkout apps for the functionalities in checkout.liquid file.
@@adreesbasheer3019 Thanks for your response. Can you guide which checkout extension to create to my all script is run like a gtag, clarity, etc.?
Thank you for this.
can you please make video on checkout branding api
This video I uploaded recently covers this ruclips.net/video/_-truuOcRZQ/видео.html, I hope it helps!
Nice, thank you
Hey @sackingcontext
The preview seems to not work anymore. Is it possible that you need to use post-checkout UI (when targeting post-checkout) from now on?
that would really suck, because the post-checkout UI has errors from the moment you initialize it :c
the best work @stacking context
can I get your sourcecode?
are there anyways i can retrieve the order's status on either thank you or order status page ? thank you
The only way I've found to do that is to grab the order id using the useOrder hook and then sending that to a server that has access to the Admin API, from there you can query the order status and send that information back to the browser.
@@stackingcontext thank you for your reply, and oh wow, does shopify makes it hard to retrieve crucial informations.
How are you able to view all the steps in the checkout, do you have a plus account?
The video was recorded from a development store with the Checkout Extensibility preview enabled, also when it was recorded the checkout was set to be a three-page checkout instead of one-page checkout.
@@stackingcontext can i ask how to enable Checkout Extensibility?
@@jiachen1078 When you are creating a development store select Create a store to test and build and then in Build Version select the preview you want to enable.
Hi, how can I add a field for the ID on my checkout page?
I go through how to do something similar in this video ruclips.net/video/NrM_rd6FdtE/видео.html
@@stackingcontext great but its necesary shopify plus?
does it require any particular requirements because in my case it is working on checkout page but on thankyou page nothing is render why please help me or suggest something so i can solve this problem??
Ensure your extension has a target in the thank you page, that it is spelled correctly and that it is in your config file as well. Also check the console to see if there are errors or warnings printed that might tell you what is going on. Lastly, try restarting your development server.
i found the solution the problem is on store while creating store there is particular option for checkout extension that have to be checked !@@stackingcontext
can i remove map on checkout ???? and how can i do
If you have upgraded your Thank You page to Checkout Extensibility I'm not aware of any way to remove the map at the moment.
To embed thankyou page using checkout ui extension, does we need to shopify plus account?
I don't see it mentioned in the docs explicitly, but considering Checkout UI Extensions for the other steps are only available in Shopify Plus, I think that's likely to be the case for these ones too.
Hi. Is there a method to hide this map on the thank you page?
Not that I know of. Checkout Extensions only let you add elements to the page but not remove existing ones.
hey :)
how can i select on which of the dynamic targets i render ?
i mean how to choose one of the "[ORDER_SUMMARY1-4]" ?
Try this shopify.dev/docs/apps/checkout/test-ui-extensions#dynamic-targets
Can anybody tell me how do I can get the Order id on thank you.
Use the useOrder hook
shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/order
@@stackingcontext I have tried to use the userOrder() hook however whenever I have used that extension doesnot seems to be working properly. It says "access denied".
@@stackingcontext I have tried the hook however whenever I tried this hook my extension doesnot work andshoe me this error. "Cannot call 'order()' on target 'purchase.thank-you.block.render'."