Rich-text Reply

How to work with getScript() while "Include full jQuery in project code" setting On?

brushbill 11-10-15

How to work with getScript() while "Include full jQuery in project code" setting On?

Good day,

 

I'm having hard time getting getScript() callback function working. 

Example. This script works via browser console:

 

 

window.optimizely.$.getScript("https://173702e0daafa8c71a48261624d31405f2a60ba7.googledrive.com/host/0B5IB8EJUDiuic3VvaUtDYWN5Tkk").done(function(){
			$(".product-image").zoom();

		});

 

While it doesn't if I put it into Optimizely variation (with or without the "window.optimizely.")

I get "Uncaught TypeError: $(...).zoom is not a function"

 

Thanks in advance!

 

Cheers,

Edgar

brushbill 11-10-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

UPDATE:

I've got similar issue while using loadScript function from developer docs.
http://developers.optimizely.com/javascript/code-samples/index.html#helpers-external-js

Basically, it seems that callback function executes before the script is actually done loading.
JDahlinANF 11-10-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

@brushbill

.zoom() is not in optimizely's jQuery - perhaps you are laoding it in your page's code. 

 

Try changing the scope from

 

$(".product-image").zoom()

to

window.$(".product-image").zoom()

Check this thread for some bookmarklets that are very helpful in identifying these type of scope/timing issues:

https://community.optimizely.com/t5/Developers/Bookmarklets/m-p/13006

brushbill 11-10-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

Hey @nap0leon

 

Could you describe in a bit more detail on the bookmarklets to use from that page for timing / scope problems?

 

.zoom() is from the external script / jQuery pluging I'm loading - it works in browser console.

 

Adding "window." at the beginning makes it use the page's jQuery. This is what I'm trying to avoid by using full Optimizely jQuery

 

JDahlinANF 11-10-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

@brushbill-

 

If your question is "how do I use a bookmarklet", you create a bookmark and then edit the bookmark and paste the bookmarklet code as the address/location.

 

I referenced the bookmarklets that tell you which methods are available in the different versions of jQuery on the page.  If the method you want to use is listed in the "Optimizely jQuery", then you do not need to prefix the call with "window."  If the method you want to use appears in the "not Optimizely jQuery", then you must use the "window." prefix so that Optimizely knows to use the page's version of jQuery instead of the Optimizely version. 

 

For example, if I want to use .hide() or .show(), which do not exist in Optimizely's jQuery, I need to use like:

window.$('#someContent').hide()

If I try to do it without the prefix, nothing happens because the .hide() method does not exist in Optimizely's version of jQuery.

 

Adding "window." does not change the version of jQuery that is loaded on your page (this is contolled in your account settings).  Adding "window." to a command only changes the scope of the command so that it can use the version of jQuery (and any plugins) loaded as part of your page.

brushbill 11-11-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

@nap0leon I use a project javascript setting "full jQuery snippet" and I believe you're wrong - in this mode, it's normal jQuery with all methods. Also if you look at the code I pasted - it references "window.optimizely.$". And I believe all it's methods work in browser console executed directly.
brushbill 11-11-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

After trying those bookmarklets I now see that anything I load via either of these...

 

$.getScript

OR

window.$.getScript

OR 

window.optimizely.$.getScript 

 

... as an external jQuery plugin assings anything referenced in that plugin as $ to window.$ (page's native jQuery).

 

Is it possible, to make it assign it to Optimizely jQuery without editing the plugin code?

JDahlinANF 11-11-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

@brushbill- Looks like you already figured it out, but for the sake of anyone else reading this thread later - the Optimizely version of jQuery are documented nicely in this writeup.  The key takeaway is that Optimizely can deliver either:

1- no jQuery

2- a stripped down version of jQuery 1.6.4

3- the full version of jQuery 1.6.4 (notably, includes .hide() and .show())

 

More recent versions of jQuery (currently 1.11.3) contain additional methods that I use quite often, such as .on().

 

Typical build-cycle for an experiment is to develop code in your browser's console until you see the desired result.  When you place this code into Optimizely, some times the code will not work and you won't know why.  This is where the bookmarklets come in handy. 

 

Since the code works in your console, there may be an issue of scope - any methods that show up in the "not Optimizely jQuery" bookmarklet need to be prefaced with "window." in order to run inside the variation's code block.  All this code does is make the method call work. 

 

Adding this prefix does not alter the version of jQuery that is loaded with your Optimizely library, nor does it alter any other scripts that your page loads (such as a full version of jQuery or plugins).

 

 

As for whether you can extend the optimizely scoped version of jQuery 1.6.4 with your plugin... that's a good question.  Perhaps @Ehsan can shed some light on plugin-integration.  I don't recall seeing that anywhere in the documentation.  Presuming we even can do that, you would need to make sure that the plugin is compatible with version 1.6.4 and test whether it is available in the trimmed version (if not, you would need to switch to the full version of 1.6.4 in your account settings).

 

 

brushbill 11-11-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

@nap0leon Thanks for your answers - all this is very helpful!

 

> All this code does is make the method call work. 

 

I'd mention that "window." actually executes the method using page's native jQuery instead of Optimizely's jQuery - that's why it works.

 

I'm actually trying to come up with a solution on how to relly only on one jQuery (be it Optimizely or page's jQuery) - so it seems that Optimizely jQuery is not enough, and native jQuery needs some strict implementation (right after opening <head>, followed immidietly by Optimizely JS snippet). Otherwise, if native jQuery is somewhere in the footer - it will slow everything down if not break it.

Also, isn't default (native) jQuery async VS Optimizely being sync?

 

Could someone shed some light? 

 

Cheers,

Edgar

 

Ehsan 11-18-15
 

Re: How to work with getScript() while "Include full jQuery in project code" setting On?

[ Edited ]

Hey @brushbill,

 

Engineering has made a trimmed and full version of jQuery 1.11.3 available in the Optimizely project code, check out in your JavaScript tab under Settings.

 

Screen Shot 2015-11-18 at 11.43.31 AM.png

 

We will be updating the article very shortly to reflect the change, hopefully that will allow you to use one jQuery!

 

Also, I think that any script tag can be loaded asynchronously by adding an "asnyc" tag to it, including the Optimizely snippet, although we do not recommend it.

 

@nap0leon

Optimizely