Shopify API - ScriptTag dependency management?

Question

I have a Shopify App that adds a ScriptTag via the API right after installation. The script depends on jQuery and the Shopify jQuery AJAX library. I'd like to avoid forcing merchants to edit multiple theme files if possible.

As far as I can tell:

• These dependancies aren't guaranteed to appear on every theme or in the right order.
• There's no direct way for me to reference Shopify CDN or theme scripts from the API (since it's only for remote scripts).
• Consolidating all script tags into a scripts.liquid asset doesn't work since API-added *.liquid assets only have access to the settings object.

I'm reluctantly leaning towards providing a snippet separately and instructions for merchants to paste it before </head>.

Is there a Shopify-intended pattern for using ScriptTag that I'm missing?

Answer 1

You can't really depend on anything being available in a theme, the store owner can customize whatever they want and you have very little control over it. Your options are:

1. Require your customers have or add jQuery to their theme.
2. Write your code in pure javascript without any other library dependancies.
3. Embed the library that you need into your own script. Make sure to wrap it in a closure so that if they already have the library they wont conflict.

I would recommend doing #3 myself, but I would probably choose a lighter weight library that does the minimum that you need (ie if you don't really need traversal jQuerys selector engine is a huge piece of code you can do without). There are lots of them out there if you search around.

Answer 2

I have gone ahead and created this sample file as starting point for you to use with a ScriptTag: http://gist.github.com/carolineschnapp/5397337 It will show you how to load jQuery if jQuery is not defined or too old for your needs, without breaking the shop's theme. You need to use jQuery.noConflict. It can be done easily without colateral damage.

I also wrote the following which is a terrible read, probably the worst thing written in my documentation career, but it is full of wisdom: http://docs.shopify.com/api/tutorials/using-javascript-responsibly I hope it convinces you to stick to using ScripTag.

As far as loading the Shopify jQuery AJAX library, I totally would not. I'd use my own code, with jQuery, to do whatever it is that I need to do. I hate to say it but it's too simple to use your own code, it really is. You don't need the helper file at all, it's unnecessary bloat and by using it you run into possible situations of conflict because the theme may be using it as well. If a theme uses it to ajaxify the cart or load products using Ajax, it is redefining some callback functions defined within the helper file. You'll break all of those callbacks by simply loading the file again. People will add items to the cart and all of a sudden an alert will show up on their page, or instead of a product loaded on the page via Ajax all of a sudden the theme will show an alert saying "We now have all the info you requested about product X" with no product being added to the page. No good has ever come out of any app using jquery.api.js.