Rich-text Reply

Problems with triggering js/ajax modal

brandonpindulic 10-12-15
Accepted Solution

Problems with triggering js/ajax modal

Hello,

 

I'm trying to test a particular modal (plan select) that is part of our purchase flow.  The purchase flow uses js/ajax and thus the plan select modal doesn't have a separate url that I can use in Optimizely.

 

So I heard that the trick is to activate interactive mode, trigger the popup, then switch back to editing mode.  But the problem I'm having is that I can't get past the first modal (contact info) to get to the second plan select modal.

 

Peculiar thing is that I was able to successfuly get to and edit the desired modal using our staging site url but when I went to production url I continueally run into this problem:  http://imgur.com/CHF7rjL

 

I've retried multiple times over the past few days and can't get anywhere.

 

Any help on this issue would be great!

 

Best,

Eddison

Re: Problems with triggering js/ajax modal

Hi Eddison,

I'd be happy to take a look. Can you refer me to the URL and maybe attach a few screenshots here detailing the flow so others can follow along? What page are you trying to load?

Best,
Amy Herbertson
Customer Success

Re: Problems with triggering js/ajax modal

Hi Amy,

Thanks so much for your response. See mine below:

*Regarding a purchase funnel for Inman Select Membership

Step 1: Inman.com/select "Join Now" CTA http://imgur.com/0knWhE9
Step 2: Contact Info Modal http://imgur.com/e9tLw1C
Step 3: Plan Select Modal http://imgur.com/fq3FOk5

I am trying to use Optimizely to test Step 3 but am getting blocked at Step 2 (see error message here: http://imgur.com/CHF7rjL) Would love it if you could help me solve this problem!

Best,
Eddison
David_Orr 10-12-15
 

Re: Problems with triggering js/ajax modal

[ Edited ]

Hi brandonpindulic,

 

I took a look at inman.com/select and noticed that each of the steps in the sign-up page already exist on the site. In order to bring the modal up, we will have to find out how to make Step 3 visible. 

 

I discovered that the page's javascript applied new classes to the lightbox and the 1st step(register step) section. After figuring out what classes made the lightbox and steps appear, I wrote 3 lines of jQuery to make the lightbox and Step 3 visible. Then I wrapped the entire code around an Editor Only tag. The editor only tag will make any code within the tags to only apply within the editor. 

 

Here is the code you may use in the "Experiment Javascript" option. I've added notes that explains what each line of code will do:

 

 

/* _optimizely_evaluate=editor_only */
//Applies the classes necessary to bring the lightbox up. $("#ism-membership-light-box").addClass('active visible');
//Removes the classes that is used for active steps. $('.ism-section').removeClass('ism-dispayed ism-visible');
//Adds the classes to make step 3 visible. $("#ism-section-product-selection").addClass('ism-dispayed ism-visible'); /* _optimizely_evaluate=end_editor_only */

 

 

How I discovered how to make a specific step visible:

 

1. Opened up Chrome's Developer Click here for more information on how to use the inspect element tool.

2. Clicked on "Join Today" button. 

3. Noticed that the page's javascript applied new classes to the "#ism-membership-light-box" and "#ism-section-register" elements. 

 

elements

 4. After finding out what classes are added, I simply added the new classes to other steps to see if this would make the other steps visible.

 

Let me know if you have further questions.

 

David

 

Senior Technical Support Engineer
Optimizely

Re: Problems with triggering js/ajax modal

Thank you so much David! You're solution worked perfectly and I appreciate how clearly you laid out the steps & reasons why.

Much obliged!
David_Orr 10-13-15
 

Re: Problems with triggering js/ajax modal

You're welcome Eddison!
Senior Technical Support Engineer
Optimizely