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

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

viru
Shopify Partner
24 0 12

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 14 (14)

Liam
Shopify Staff
2873 312 821

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 12

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 12

Hi Liam,

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

Regards,
Viral
Liam
Shopify Staff
2873 312 821

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 12

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
2873 312 821

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 12

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
jarthorn
Shopify Staff
13 1 7

It looks like you are trying to use a script to render a custom badge on the Order Status page. With Checkout Extensibility, you no longer have direct access to the DOM of these pages, so you cannot hack this directly into the page. You can now accomplish this use case using Checkout UI Extensions, which must be built using the APIs and visual components that we provide for you. The advantage of this approach is that you are integrating with the platform using well defined APIs that will remain stable over time, regardless of how the buyer experience evolves. For more details on how to build Checkout UI Extensions, see this documentation.

Jarthorn | 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 the Shopify Help Center or the Shopify Blog

Schmidtc63
Shopify Partner
96 14 25

This is terrible. We have customers that have special pricing -- 50% off retail or whatever. Using liquid, I can check when the email address is changed in checkout and force the customer to login if they have special pricing. Why? Because if we don't, anyone can use an email that they know has special pricing and ship that order to wherever they wish if we didn't validate that they were actually the owner of the account. How are we supposed to do this now if we can't trap when the email address is changed? 

jarthorn
Shopify Staff
13 1 7

Checkout UI Extensions have API that allow them to fetch the Customer record for the current buyer (if any), as well as the current email address. These hooks will run again whenver the customer or email address changes. You can use this information to prompt the customer to login to receive special pricing.

Jarthorn | 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 the Shopify Help Center or the Shopify Blog

Schmidtc63
Shopify Partner
96 14 25

The documentation is woefully inadequate. Had there been complete documentation, I would have figured this out days ago.  I swear, 80% of the questions on these forums would not exist if the documentation was somewhat professional. 

 

For anyone else in this situation, the "subscribe" function handles form changes. In the case of email address change:

		buyerIdentity?.email.subscribe(async (newEmail) => {
			needsLogin = -1;
			console.log(`email address changed: `, newEmail);
			currentEmail = newEmail;
			needsLogin = +(await checkForceLogin(currentEmail));
			console.log(`needs Login: `, needsLogin);
			if (needsLogin > 0) {
				displayErrorBanner(
					root,
					"This email account requires you to log in."
				);
			}
		});
DanCLiu
Shopify Partner
4 0 3

Hey @jarthorn do you have any advice in the case of trying to integrate Google Customer Reviews? @masonmcelvain pretty clearly explains the problem devs are facing

cloder
Shopify Partner
6 0 5

In the same position as @masonmcelvain. So Google Customer Reviews is effectively done for Shopify?

masonmcelvain
Shopify Partner
7 1 7

Hi Liam, my company is also trying to use the Google Customer Reviews opt-in survey in our checkout. I see that there is a nice tutorial on how to build a custom survey in checkout extensions. However, Google Customer Reviews does not have an API for the opt-in survey (as far as I can tell) so developers can't implement their own survey UI and send the response along to Google. The only option is to include the 3rd party script from Google. As a result, merchants like my company can't use the Google Customer Reviews opt-in survey in checkout extensibility.