Placing a second Cookie using Colorbox

Hello, I am using the Colorbox code to display a signup form on their first visit utilizing a cookie.
Here is my code in index.html:

 <script src="http://fredgolfrange.com/colorbox/jquery.min.js"></script>
<script src="http://www.fredgolfrange.com/colorbox/jquery.colorbox.js"><script>
<script src="jquery.cookie.js"></script>

<script>
$(document).ready(function () {
        if (document.cookie.indexOf('signupnewsletter=true') == -1) {
            var onehundredeightyDay = 180000 * 60 * 60 * 24 * 1;
            var expires = new Date((new Date()).valueOf() + onehundredeightyDay);
            document.cookie = "signupnewsletter=true;expires=" + expires.toUTCString();
            setTimeout(openColorBox, 1000);
        }
		//Blocks mobile platforms//
function openColorBox(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))       {
return;
}
$.colorbox({iframe:true, width:"85%", height:"85%", href: "http://www.fredgolfrange.com/newsletterhome"});
}
});
</script>

Is there a way to read for the cookie “signupnewsletter” and have the another page show up(ex. Today’s special) if it finds “signupnewsletter” then it displays another page and places a second cookie “todaysspecialcookie”?

Sure.
First off, I would use this library for dealing with cookies (you are using jQuery anyway by the look of it).
Then you can do:

if($.cookie('signupnewsletter')){
  // redirect to new page here
}

Then you can repeat the process on the new page.

Hi Pullo, Thank you for replying!
To be honest jQuery is a little new to me, so I am not sure how to add in and utilize this code. I have read over the library in the past but it didn’t seem very helpful for me. I have tried to add this code in below the first colorbox to read for cookie ‘signupnewsletter’ and then place a new cookie “capitalize”, but it didn’t seem to be working.

	<script>
$(document).ready(function () {
if($.cookie('signupnewsletter')){
        if (document.cookie.indexOf('capitalize=true') == -1) {
            var onehundredeightyDay = 180000 * 60 * 60 * 24 * 1;
            var expires = new Date((new Date()).valueOf() + onehundredeightyDay);
            document.cookie = "capitalize=true;expires=" + expires.toUTCString();
            setTimeout(openColorBox, 1000);
        }
		//Blocks mobile platforms//
function openColorBox2(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return;
}
$.colorbox2({iframe:true, width:"85%", height:"85%", href: "http://www.fredgolfrange.com/contactus/"});
 }
    });
</script>

Could you please give me some guidance on this?

Sure :smile:

First, let’s summarize what we want to do:

  • On page one, check for a cookie “signupnewsletter”
  • If we don’t find it, then we want to show the popup with the signup form
  • If we do find it, then we want to check for the presence of a second cookie “todaysspecial”
  • If the second cookie is not present, then we want to show the today’s special popup
  • If both cookies are present, that means that the user receives the newsletter and has seen today’s special, so we do nothing,

Does this sound correct to you?

Two pop-ups might be a bit much.
Maybe better to use similar logic but only show one?

As I understand it, you will only display one or none: the sign up form, or today’s special or nothing.

FWIW, I agree that popups that aren’t relevant to what I am visiting the site for are very annoying

Yes that is spot on! I also agree that the information in the popup should be relevant to my site.

Ok, well you can lose the $(document).ready() callback, if you place your script at the foot of the page.

Then we should define a function showPopup()

function showPopup(href){
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return;
  }

  $.colorbox2({iframe:true, width:"85%", height:"85%", href: href});
}

Now the logic:

var hasSignedUp = $.cookie('signupnewsletter'),
    hasSeenSpecialOffer = $.cookie('todaysspecial');

if (hasSignedUp){
  if (!hasSeenSpecialOffer){
    showPopup("http://www.fredgolfrange.com/specialoffer/");
    $.cookie('todaysspecial', true, { expires: 1, path: '/' });
  }
} else {
  showPopup("http://www.fredgolfrange.com/contactus/");
  $.cookie('signupnewsletter', true, { expires: 999, path: '/' });
}

This is untested, but should be enough to get you started.
Be sure to check out the plugin’s documentation page: https://github.com/carhartl/jquery-cookie

Is this code get in a way put together with the existing code? Or, Do I start a new below the existing code?

No, this code should replace your existing code.
Also, be aware that what I posted is untested and will probably require some tweaking at your end.