Hidden divs not working after moving them around
Hi there! I hope this is the right place to ask this question.
I'm currently setting up an AB test for a client's checkout process, specifically the first step where you can login, create an account, or continue as a guest. The original version has all the options, links, and create an account form within one centered div in the middle of the page. Within this div are links for 'Log In' and 'Guest Checkout' which, when clicked, show different forms based on the link you clicked.
The variant I'm trying to test is separating the options into 3 columns; create an account form on the left, 'Log In' with the link in the middle, and 'Guest Checkout' with the link on the right. When I move the the links into their own columns the functionality of the hidden form stops working. I kept the links within the same div which I figured would keep the funcitonality working. Do you guys have any advice on how to go about diagnosing this issue and keeping the hidden forms working?
Solved! Go to Solution.
If your site allows force parameters, can you post a link to the page and the Experiment ID? That way we can see how the page behaves with no experiment and than what is going on when we force the experiment to run on that page.
There is nothing inherently wrong with moving things around on the page, but if the validation is using relative positioning to locate the items in the form, this could cause an issue. If you are "detaching" and "reattaching" items, any event listeners may be impacted, as could any "live" event bindings that may be impacted due to the relative position changes.
Analytics and Testing Guru
The link to the 3 column setup is:
You may have to put a piece in your bag and then resubmit the URL to see the variation.
The way I created the variant is by clicking 'edit html' and recreating the divs for each column. I was hoping that the event listeners would listen for the div which is why I kept the same name. Is there a way to use the console to check where the error is occurring?
The error you are seeing is because the forms you are moving around contain an input named "authenticity_token". The value of this form field chages with every page hit. When you created the variation, it is not "rearranging" the elements (which would allow the current value to still exist on the now rearranged page), rather it is replacing the contents of the page with the form values that were on the page when you created the variation.
If you can change the variation code to "move" the items to be all on one row, the authenticity_token issue will go away and the page will behave as you want it to.
This is possible with the WYSIWIG editor, but, alas, I never use the editor - I prefer to do the variations by hand codign the jQuery. Hopefully someone else can let you know how to do this portion.
Analytics and Testing Guru