Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample JavaScript file added with ScriptTag resource. This sample file is meant to teach best practices. Your app will load jQuery if it's not defined. Your app will load jQuery if jQuery is defined but is too old, e.g. < 1.7.
/* Sample JavaScript file added with ScriptTag resource.
This sample file is meant to teach best practices.
Your app will load jQuery if it's not defined.
Your app will load jQuery if jQuery is defined but is too old, e.g. < 1.7.
Your app does not change the definition of $ or jQuery outside the app.
Example: if a Shopify theme uses jQuery 1.4.2, both of these statements run in the console will still return '1.4.2'
once the app is installed, even if the app uses jQuery 1.9.1:
jQuery.fn.jquery => "1.4.2"
$.fn.jquery -> "1.4.2"
*/
/* Using a self-executing anonymous function - (function(){})(); - so that all variables and functions defined within
aren’t available to the outside world. */
(function(){
/* Load Script function we may need to load jQuery from the Google's CDN */
/* That code is world-reknown. */
/* One source: http://snipplr.com/view/18756/loadscript/ */
var loadScript = function(url, callback){
var script = document.createElement("script");
script.type = "text/javascript";
// If the browser is Internet Explorer.
if (script.readyState){
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
// For any other browser.
} else {
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
};
/* This is my app's JavaScript */
var myAppJavaScript = function($){
// $ in this scope references the jQuery object we'll use.
// Don't use jQuery, or jQuery191, use the dollar sign.
// Do this and do that, using $.
$('body').append('<p>Your app is using jQuery version '+$.fn.jquery+'</p>');
};
/* If jQuery has not yet been loaded or if it has but it's too old for our needs,
we will load jQuery from the Google CDN, and when it's fully loaded, we will run
our app's JavaScript. Set your own limits here, the sample's code below uses 1.7
as the minimum version we are ready to use, and if the jQuery is older, we load 1.9. */
if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function(){
jQuery191 = jQuery.noConflict(true);
myAppJavaScript(jQuery191);
});
} else {
myAppJavaScript(jQuery);
}
})();
@lulessa

This comment has been minimized.

Copy link

lulessa commented Jan 31, 2015

When jQuery version '1.10' or higher is already loaded, parseFloat(jQuery.fn.jquery) will return 1.1, causing another jQuery file to be downloaded unnecessarily.

jQuery.fn.jquery = '1.7.1'; parseFloat(jQuery.fn.jquery) === 1.7;
// higher version returns a lower float
jQuery.fn.jquery = '1.10'; parseFloat(jQuery.fn.jquery) === 1.1;

Workaround (line 58) with minimum version 1.7.1:

if ((typeof jQuery === 'undefined') || (parseInt(jQuery.fn.jquery) === 1 && parseFloat(jQuery.fn.jquery.replace(/^1\./,'')) < 7.1)) {

Forked gist with workaround (updated Apr 7, 2015):
https://gist.github.com/lulessa/a0f112dcb816bf1ccbd6

@pRoy24

This comment has been minimized.

Copy link

pRoy24 commented Aug 26, 2015

How do I also load jQuery UI into this script?

@Modules4U

This comment has been minimized.

Copy link

Modules4U commented Oct 18, 2016

@jordanblink
Not sure if you are still looking but this forked code might work for you:
https://gist.github.com/Modules4U/01de3d24b487583041e9ed7eb422e366

@noahlearner

This comment has been minimized.

Copy link

noahlearner commented Jun 23, 2017

I'm seeing apps load jquery in my theme even though the jQuery version is higher than the version checked and 1.11 instead of 1.7 and the apps are all loading jquery anway (five times on one page...)

What is the fix for fixing my store vs fixing the app code because that is beyond the scope of what I can do? Is my only choice to remove the apps?

@gentochicong

This comment has been minimized.

Copy link

gentochicong commented Aug 21, 2017

Hello! Very appreciate your sample, but can I ask where do i put these code?
I'm developing a Shopify Public Web App and I need show a Grid View on User Page to show some data on my server when they was login. But I don't really know where to write javascript for my app. I was success on create app and installed it. I read document say should use ScriptTag and don't touch liquid template.

@cc1234565

This comment has been minimized.

Copy link

cc1234565 commented Apr 18, 2018

Hello! Very appreciate your sample, but can I ask where do i put these code?
I'm developing a Shopify Public Web App . But I don't really know where to write javascript for my app. I was success on create app and installed it. I read document say should use ScriptTag and don't touch liquid template.

@tom-it

This comment has been minimized.

Copy link

tom-it commented Apr 6, 2019

still works like a charm, thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.