Rich-text Reply

How To Fix Javascript Conflicts

HappyPanda 06-24-14
Accepted Solution

How To Fix Javascript Conflicts

[ Edited ]

I'm doing some Optimizely work on a site which uses lightboxes (a jquery version called fancybox).

 

One of the variations I want to test involves a new image, which when clicked opens a different image in a lightbox.

 

I've been wrestling with it for a while with no luck.

 

The problem seems to be a sequencing problem.

 

My optimizely variation adds the new image (let's call it the button image for clarity). I also add the larger image (lightbox image) and then hide it (just to be sure the image exists and is on the optimizely server).

I add a link around the button image, pointing to the lightbox image, and with the right class that should be handled by the fancybox javascript call.

 

Nothing. Clicking on the buttonimage simply opens the lightbox image in a new page.

 

I've tried manually adding the triggering javascript call in the optimizely code (set as a '$(document).ready(function()...') but the code gives me an undefined error on that (assuming the optimizely code call cannot find the fancybox function at that point.

 

I've also tried inserting a <script> call late in the body of the page via optimizely to manually initialise the fancybox but that failed too. I'm unsure why, unless the document ready was being called before optimizely had finished inserting elements which doesn't match your order of operations (https://help.optimizely.com/hc/en-us/articles/200040335)

 

Has anyone got any suggestions / help?

 

I've seen the http://blog.optimizely.com/2013/09/12/how-to-add-a-lightbox-to-an-experiment/ post, but:

a)  it means I have to add a heap more code for a new version of a lightbox, when I already have one on the site,

b) it doesn't address the key issue of triggering the lightbox

 

 

Aicke 06-24-14
 

Re: javascript conflicts

Just some ideas and questions to narrow it down, otherwise a support member could look into your code if you send them the experiment id.
1. Sounds if the Button already exists and you just change the Image or is this a new functionality on your page?
2. If you add alink which should be handled by the lightbox script, optimizely have to change the link before the lightbox init or you have to init the lightbox again by hand.
3. check the javascript console if there are any errors
4. try to activate the whole jquery code for optimizely (project settings) or remove it alltogether.
Everything is hard, before it is easy.
Level 2
HappyPanda 06-25-14
 

Re: javascript conflicts

Hi Aicke,

 

Thanks for your response:

1. I'm adding the new image. But that's not causing me any problems.

2. This is where the problem is I think, in the order and scope of the javascripts and when / how they get called.

3. No errors are appearing that I can see.

4. I tried this, but disabling it completely stops all the optimizely code working. Activating all of it doesn't seem to help.

Aicke 06-25-14
 

Re: javascript conflicts

If no supporter will help you shortly, you could paste the variants code here!?

Everything is hard, before it is easy.
Level 2
Amanda 06-25-14
 

Re: javascript conflicts

@HappyPanda - you may be running into a scoping issue. Can you send the experiment ID where you have this fancybox variation set up so I can take a look at it? 

Optimizely
HappyPanda 06-26-14
 

Re: javascript conflicts

[ Edited ]

Hi Amanda,
The Experiment ID is: 1298173127 and I put the fancybox code in the global JS
Thanks!

Amanda 07-01-14
 

Re: javascript conflicts

Hey there! Sorry for the delay in response!  A couple pointers:

 

Your 2 last lines of code on Page 1/ Variation 1 can look like this: 

 

$(".cta:eq(0)").replaceWith("<a class=\"expfancybox\" href=\"//cdn.optimizely.com/img/668941824/8dd65036b0db418b9833820b159e90fd.png\"><img src=\"//cdn.optimizely.com/img/668941824/1f9d055e34724c039c4b2486f55c06cf.png\" alt=\"Best Value Shopping Guarantee, Free Shipping, 120 Day Returns\"></a>");
window.jQuery("a.expfancybox").fancybox();

 

You want to avoid putting a document.ready function the the Global JS because this will hold up the rest of the code from exectuing until after document.ready (which could cause flashing). Instead, I recommend just adding the fancybox() call after you add the fancybox element to the page. 

 

When you add do this, be sure to use window.jQuery instead of $. This will ensure that Optimizely uses your own jQuery version rather than the trimmed version in the Optimziely snippet that does not support the .fancybox action.  

 

Can you let me know if this does the trick for you? 

 

 

 

 

Optimizely
HappyPanda 07-01-14
 

Re: javascript conflicts

Hi Amanda,

Thanks for your reply:
using window.jQuery(...); was the key I was missing. I now have it working.

Thanks, much appreciated!