Rich-text Reply

Can't destroy a carousel image via optimizely

phjohnson08 11-07-16
Accepted Solution

Can't destroy a carousel image via optimizely

We're using the Slick Carousel library to run our product image carousels on our website.

 

I'm running an experiment where we include a video as the first slide for one of our products (www.everlywell.com/products/inflammation).

 

For the variation I want to remove it. The only way to do this is by calling a slick method to remove the slide: 

 

$('#slider-container').slick('slickRemove', 0 );
$('.product-thumb').remove();

 

This works fine in the console, but unfortunately I get an error that the slick function is undefined in optimizely.

 

Because it was presumably a scope issue, I tried appending our head with a CDN reference to the slick library which fixed the slick error. But now, I'm getting the following:

 

Error evaluating variation javascript:
TypeError: d.ajax is not a function (in function HTMLScriptElement, line 32, col 423)

Anyone have advice on how best to accomplish the above? 

 

JasonDahlin 11-07-16
 

Re: Can't destroy a carousel image via optimizely

Hi @phjohnson08,

As you discovered, you cannot use a method that has not loaded on the page yet.

However, the method you are using seems to be using the .ajax method which is not included in the version of jQuery that you are loading with Optimizely and since you are loading slick before your site's version of jQuery, that method call is failing.

 

Perhaps a simpler solution is to change your jQuery references to window scoping so that they will wait for your page's code to run before they try to run.  However, this delay may cause flashing that is visible to the user:

window.$('#slider-container').slick('slickRemove', 0 );
window.$('.product-thumb').remove();
--Jason Dahlin
Analytics and Testing Guru Smiley Happy
phjohnson08 11-07-16
 

Re: Can't destroy a carousel image via optimizely

Yeah, unfortunately still getting the same ajax error when using window.

Do I need to load the full jQuery vs the trimmed?
JasonDahlin 11-07-16
 

Re: Can't destroy a carousel image via optimizely

If you are getting that error still, it means you are trying to run the moethod before a version of jQuery that supports that method has loaded.

 

Here is a bookmarklet you can use to see which methods exist in your page's version of jQuery that are not in the version you are loading with Optimizely (these need to be "window" scoped):

javascript&colon;l%20=%20Object.getPrototypeOf(optimizely.$("body"));%20var%20optimizely_functions%20=%20[];%20for(var%20g%20in%20l){%20%20%20optimizely_functions.push(g);%20}%20%20%20l%20=%20Object.getPrototypeOf($("body"));%20var%20jquery_functions%20=%20[];%20for(var%20g%20in%20l){%20%20%20jquery_functions.push(g);%20}%20Array.prototype.diff%20=%20function(a)%20{%20%20%20%20%20return%20this.filter(function(i)%20{return%20a.indexOf(i)%20<%200;});%20};%20alert(jquery_functions.diff(optimizely_functions).sort().toString().replace(/,/g,'\n'));

Here is a bookmarklet you can use to see which methods exist in the version of jQuery you are loading with Optimizely (these do not need to be "window" scoped):

javascript&colon;l%20=%20Object.getPrototypeOf(optimizely.$("body"));var%20optimizely_functions%20=%20[];for(var%20g%20in%20l){optimizely_functions.push(g);}alert(optimizely_functions.sort().toString().replace(/,/g,'\n'));

 

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
robertchan 11-08-16
 

Re: Can't destroy a carousel image via optimizely

You should use the full version of jQuery unless your dev team is anal about load time. And how are you appending the script? Seems what you've added has not been appended in time.
Robert Chan

phjohnson08 11-08-16
 

Re: Can't destroy a carousel image via optimizely

Hey Robert - OK will go ahead and switch to the non-trimmed version. Doesn't seem to make a big difference. 

 

This is how I was currently try to do things: 

 

 

function check() {
  return window.$('#slider-container').slick('slickRemove', 0 );
}

$(document).ready(function() {
  $('head').append('<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>');
  check();
  $('.product-thumb').remove();
});

 

Still getting ajax errors : (

 

robertchan 11-08-16
 

Re: Can't destroy a carousel image via optimizely

I would try this approach:

 

var appendJS = function(callback){

  var builtHeadScript = function(sourceLink) {

    var fileRef = document.createElement('script');
    fileRef.setAttribute('type','text/javascript');
    fileRef.setAttribute('src',sourceLink);
    document.head.appendChild(fileRef);

  };

  builtHeadScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js');
  callback();

};

var takeAction = function() {
    appendJS(function(){
        var check = function() {
            return window.$('#slider-container').slick('slickRemove', 0 );
        }
        check();
        $('.product-thumb').remove();
    });
};

takeAction();

Optimizely didn't like document ready when I using it as you have so what I suggested might work.

Robert Chan

phjohnson08 11-08-16
 

Re: Can't destroy a carousel image via optimizely

Wow, thanks for writing all that JS! 

 

So just tried it and now getting this again: 

 

Error evaluating variation javascript&colon;
TypeError: Cannot read property 'slickRemove' of undefined (in function ot, line 9, col 17814)
robertchan 11-08-16
 

Re: Can't destroy a carousel image via optimizely

Try wrapping the code with a window onload:

 

window.onload = function () {

  var appendJS = function(callback){

    var builtHeadScript = function(sourceLink) {

      var fileRef = document.createElement('script');
      fileRef.setAttribute('type','text/javascript');
      fileRef.setAttribute('src',sourceLink);
      document.head.appendChild(fileRef);

    };

    builtHeadScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js');
    callback();

  };

  var takeAction = function() {
      appendJS(function(){
          var check = function() {
              return window.$('#slider-container').slick('slickRemove', 0 );
          };
          check();
          $('.product-thumb').remove();
      });
  };

  takeAction();
      
};

Now, do a force parameter preview, are you seeing the change? The window on load should at least get rid of the error because it looks like jQuery is required for Slick to work. What's happening is that when you're trying to use the Slick method, we've appended the Slick script before jQuery's been loaded.

Robert Chan

phjohnson08 11-08-16
 

Re: Can't destroy a carousel image via optimizely

Thanks Robert! This works - seriously thank you for your help!

Will use this model to help solve other scope / order of operation type issues.
robertchan 11-08-16
 

Re: Can't destroy a carousel image via optimizely

Anytime, and glad to be of help!
Robert Chan