Problems with triggering js/ajax modal
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!
Solved! Go to Solution.
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?
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!
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.
/* _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.
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.