Rich-text Reply

Unable to open magnific popup modal?

xaisoft 06-06-16
Accepted Solution

Unable to open magnific popup modal?

[ Edited ]

I have the following script in my variation code:

 

$(document).ready(function () {

  
  
		// check for cookie
			visited = Cookies.get('visited');
			// if no cookie present create cookie
			if (visited === undefined || visited === null){
				Cookies.set('visited', 1, {expires:30}); // visited = 0
				visited = 1;
			}

			if (visited == 3) {
        console.log(visited);
				// open fancybox after 3 secs on 4th visit or further on the same day
				setTimeout(function () {
					$.magnificPopup.open({
					items: {
						src: 'div.newsletter-signup'
					}
				}, 0);
					$('#newsletter_signup_modal').show();
				}, 3000);

				visited++; // increase counter of visits
					Cookies.set('visited', visited, {
					expires: 45 // expires after one day
				});
			} else {
				visited++; // increase counter of visits
				// set new cookie value to match visits
				Cookies.set('visited', visited, {
					expires: 45 // expires after one day
				});
				return false;
			}
		});

It uses two external javascript libraries, magnific popup and js.cookie.  Both of these are on my page already, but when I  run the variation, I can see the cookie being created but when it gets to number 3, it throws an error as if it can't find magnific popup.  It throws the following error:

 

Uncaught TypeError: Cannot read property 'open' of undefined at the following line:

 

$.magnificPopup.open
Level 2

AllisonR 06-07-16
 

Re: Unable to open magnific popup modal?

Hi there,

 

The reason you'll see an error when trying to access elements on your site from within your variation code is because of the scope. All of your variation code is running in the scope of Optimizely, whereas the magnificPopup code exists in the scope of your site. To get around this, you can scope your variation code to the window level using the window. prefix like so: 

 

window.$.magnificPopup.open({ ... });

 

Does this help? 

 

Best,

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely
xaisoft 06-07-16
 

Re: Unable to open magnific popup modal?

Hi Allison,

That seemed to work for the magnific popup error. I also prefix this line:

window.$('#newsletter_signup_modal').show();

Now I don't get any console errors, but it is like the modal popups up, but it says "Content Not Found" on the screen.
Level 2
xaisoft 06-07-16
 

Re: Unable to open magnific popup modal?

Allison,

Ignore this last one...I was missing the html duh. I do have one other question, if I make a change to the variation, does the the js number for my optimizely variation change every time? For example, this number: <script src="https://cdn.optimizely.com/js/5196853909.js"></script>
Level 2
AllisonR 06-08-16
 

Re: Unable to open magnific popup modal?

Glad you were able to get this working! To answer your question: no, your Optimizely snippet will never change. It automatically updates to run any test you create in the Optimizely Editor. Please see our support article on implementing the snippet for reference. 

 

Hope this is helpful!

 

Best,

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely