Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Checkout Extensibility & Checkout UI Extension issue to load js script instead of additional script

viru
Shopify Partner
24 0 10

Hello All,

We have one functionality called "Google Customer Reviews" we have added block of javascript code including js file in shopify store setting "Shopify Store Admin => Settings => Checkout => Order Status Page => A  dditional scripts".

Whenever thank you page run after successfully order placed there is popup display using that script via Google's JS literary

Its working fine in Additional scripts section.

If any store owner enable Checkout Extensibility option than in that case Additional scripts section will be disable & how can we achieve the same via customer events or checkout UI extension?

Code is not working in checkout UI extension as well as in customer events with Custom pixel.


To be clear about code.
1. Additional scripts: It loads code directly without iframe in shopify store front.
2. Checkout UI Extension & Customer Events -> Custom Pixel: This load code in iframe in both section.

NOTE: Because of iframe code is not working from Checkout UI Extension as well as from Customer Events -> Custom Pixel

 


 Regards,
Viral Mandaliya

Regards,
Viral
Replies 7 (7)

Liam
Shopify Staff
2669 288 729

Hi Viral,

 

It sounds like the checkout UI extension may not be implemented correctly - can you even get a console.log message appearing in the code that you've added to the extension? Here's a great tutorial that walks you through how to set up a checkout UI extension on the thank you page - I'd advise following this format and adjusting to suit your use-case. 

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

viru
Shopify Partner
24 0 10

Hi Liam,

Thanks for your response.

We have tried to include JS file in Checkout UI Extension but we are getting below error.

Error:
document.createElement is not a function

We can not load third party JS file via javascript code.

please check attached images.

 

image_2023_12_19T09_42_11_747Z.png

image_2023_12_19T09_40_29_582Z.png

image_2023_12_19T09_39_44_217Z.png

Thanks in advance.

Regards,
Viral
viru
Shopify Partner
24 0 10

Hi Liam,

May I know if you check previous reply where we face issue?

Regards,
Viral
Liam
Shopify Staff
2669 288 729

Sure - is the JS file stored within your app project?

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

viru
Shopify Partner
24 0 10

Hi Liam,

It is a third party JS file as you can see in 2nd image which attached in previous reply.

Regards,
Viral
Liam
Shopify Staff
2669 288 729

That does seem to be the issue then - third-party hosted scripts can't be added into the checkout via checkout extensions. You'll need to look into how to build out this functionality using UI extensions which can be contained within JSX files, where you can add your own Javascript. There's an example tutorial of how this could work in our docs

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

viru
Shopify Partner
24 0 10

Hi Liam,

We have tried with JSX files also but could not succeeded.

 

Please let us know if any other way to implement the flow which we are looking for.

 

 

 

image_2024_02_08T12_27_29_075Z.png

image_2024_02_08T12_27_56_514Z.png


Regards
Viral Mandaliya

Regards,
Viral