Variation Code FAQ

What's the difference between the 'code editor' and the 'custom javascript' editors? What does one do that the other does not?

The “Code Editor” lets you edit the code generated by the editor when you do changes using the right-click contextual menu options. In there you can also write code but it has to follow the guidelines explained at:

https://convert.zendesk.com/hc/en-us/articles/205152825-Advanced-Writing-Custom-Variation-Code-using-Code-Editor-

That code is executed multiple times until each line returned at least one DOM element or DOM ready is hit.

On the other hand, inside Custom JS you can add any standard JS code. That will run once, at the moment when the experiment is fired, which is usually somewhere in the head section of the page

Do you have examples that use the custom JS editor?

Any JS could go into there… But, if the code manipulates DOM elements, it has to be wrapped in a Dom ready call:

convert.$(document).ready(function() {
   //code here
});

Does Custom JS have anything special from what standard JS developers write?

No there aren't any. Only that this code is written in English (UTF-8) and included on the page when the variation is shown.

But will I see any differences if I run my code via one or the other? I always wrap my code in convert.$( document.... ) etc - also when using the code editor

In that case, you will not see any difference...and you need to place the code inside the Custom JS area for best performance. But, in some cases, you might see some differences. For instance, if you have this line that changes an element

$("selector").text("new text");

if you write it in Code editor, will be:

convert._$("selector").text("new text")

and inside Custom JS would be

convert.$(document).ready(function() {
   convert.$("selector").text("new text")
});

In the first case, when the experiment is presented, you will not see the text found initially in that block before the change is applied

In the second case, it's possible that for a short time you see the original text before it's changed by the code.  

But inside Code editor, all code should be of the form in the first case:

convert._$("selector").action

Can i pass convert.$ as an argument like in the following?

convert.$(document).ready(function() {

   //code here

});

does that make any difference?

Yes, sure you can. However, it does make a difference. In the first case, you use convert bundled jquery

When using the convert version of jQuery, do I need document ready?

Yes, you need DOM ready.

In both cases?

Yes.. in both cases. In the second case, you need to make sure that the jQuery is loaded on the page before Convert…

Usually, people use the on-page version when they have certain plugins attached to that like for instance a lightbox.

Why do I need a DOM-ready wrapper when my code is executed every 50 ms until there's nothing left inside the code that seems to need processing? It seems to be running before DOM ready.

That is the case only with code placed inside Code Editor, but code inside Code Editor has to use convert._$ and only that.

Why not use one code editor for all cases?

Mainly, the code inside the code editor is executed multiple times, until all convert._$ code lines inside will return at least one element. But if there's no convert._$ inside, then it will execute just once…

What if want to run some code only once inside the Code Editor?

You can do the following:

if(convert._$('selector').length>0) {
   convert.$(selector1).action
}

And in this case, it will poll until the selector is found and then will look for selector1, but if that is not found it won't loop to look for it.

You can also do IF statements for nodes deep in the DOM that, when loaded, will ensure other nodes before they were already loaded and can be safely used in code.

Why do you use two libraries to achieve the same goal?

Because you cannot use:

if(convert._$('selector').length>0) {
   convert._$(selector1).action
};

Since, if when the selector is found, selector1 will not be found. The code will loop but the second-time selector would not be found anymore as the code considers it already handled.

So, convert._$( document ).ready() is not really a document ready as I know it?

It is a modified jQuery, but in this statement will have the same effect.

convert.$(document).ready(function() {
(function($){
// do the magic
   })(convert.$)
});

Or this if you do not want to rely on the jQuery loaded on the page.

So convert._$ designed to execute the code without DOM ready?
Yes, convert._$ is designed to work without DOM ready,

But only on simple instructions like:

convert._$(selector).action