d
Topic
Posts:
7
10 days ago

Why does the scriptTag only support the onload event?

I don't understand this. Shopify's documentation claims that it's ever so easy and dandy to use scripttag to use JS to modify the template output through a shopify App and that protects the templates files from being messed up with for when the end user might uninstall your app.

Now, why isn't document ready not available as an option here? What's the point of using onload so that the DOM just sits there, looking like what it SHOULDN'T look like (to the user) before the DOM modifying scripts take control on onload?

How am I supposed to stop the elements from appearing to the end user BEFORE the JS is able to modify it to the form that I need him to see? 

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
7547
10 days ago

What are the elements you're wanting to hide? That might give more context on steps to take.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
7
10 days ago

Suppose I have an element A. The element A should not appear as element A. It should NOT be visible to the end user until and unless, a scriptTag has modified it to look like (based on some logic and conditions) B or C. So, the end user should either see B or C but never A.

But since the scriptTag does not fire until the onload event has fired. Due to this, the end-user sees A until onload has fired, when, the script changes it to B or C. See my point here?
 

Jason Shopify Expert freakdesign.com.au
Posts:
7547
10 days ago

Why not just add CSS to hide the element if that's important? Adding script that would block the render isn't great for speed so I agree for the reason to not let devs trigger things the moment the doc is ready.

You've not be very clear on what you're wanting to hide. A, B and C could be all manner of different things.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
7
9 days ago

I can't use CSS because, again, that would need the end user to add it to their theme files themselves. That, or I use asset API to put it into their theme. In the latter case, when they uninstall the app, they are left with all the changes done to their assets which is NOT how an app is supposed to work. The app should be able to do its job without modifying or making the end user modify their theme files.
 

And if I, again, use the scriptTag to do this, the same issue arises. It can't insert anything before it actually runs.