CODEWITHSUNDEEP
jqueryjavascriptcookies
contempoinc
contempoinc

Reputation: 25

JS cookie for displaying modal after X pageviews

I'm trying to use JS Cookie to display a login/register modal after in this case 4 page views, but its not firing and I'm not seeing any errors in the console. Any help is greatly appreciated!

Here's the code with conditional added within head (I'll transfer this into a function once its working), and I'm using https://github.com/js-cookie/js-cookie

<?php if(!is_user_logged_in() && is_singular('listings')) ?>
<script>
    jQuery(document).ready(function () {
        // create cookie
        Cookies.set('visited', '0'); // visited = 0

        var VisitedSet = Cookies.get('visited');

        if(VisitedSet == 3) {
            jQuery("p.counter").html("From this point, you will always see the login/register modal on next visit!");
            jQuery(window).load(function() {
                jQuery('#overlay').addClass('open');
                jQuery('html, body').animate({scrollTop : 0},800);
                return false;
            });
        } else {
            VisitedSet++; // increase counter of visits
            jQuery("p.counter span").append(VisitedSet);
            // set new cookie value to match visits
            Cookies.set('visited', VisitedSet, {
                expires: 1 // expires after one day
            });

            console.log('Page Views: ' + VisitedSet);

            return false;
        }
    }); // ready
</script>
<?php } ?>

This is whats showing in the console NaN, although I'm setting the initial value of the cookie to 0

enter image description here

Here's the example I'm trying to pull from but updated to the latest version if JS Cookies http://www.picssel.com/playground/jquery/fancyboxOn4pageView_24jan12.html

Upvotes: 0

Views: 270

Answers (1)

Moshe Harush
Moshe Harush

Reputation: 701

You are set the cookie always to zero...

you need to check before if cookie exist value, only if the cookie not exist you will set the first cookie.

I fix your code here: https://codepen.io/WebStorm-IL/pen/KZPVdY

jQuery(document).ready(function () {
  // Get cookie
  var VisitedSet = Cookies.get('visited');


  if( ! VisitedSet ){
    // create cookie only if already not set
    Cookies.set('visited', '0'); // visited = 0
    VisitedSet = 0;
  }

  // increase counter of visits
  VisitedSet++;

  if(VisitedSet == 3) {
    jQuery("p.counter").html("From this point, you will always see the login/register modal on next visit!");
    jQuery(window).load(function() {
      jQuery('#overlay').addClass('open');
      jQuery('html, body').animate({scrollTop : 0},800);
      return false;
    });
  } else {
    jQuery("p.counter span").append(VisitedSet);
    // set new cookie value to match visits
    Cookies.set('visited', VisitedSet, {
      expires: 1 // expires after one day
    });

    console.log('Page Views: ' + VisitedSet);

    return false;
  }
}); // ready

(function( $ ){
  $("#resetCounter").click(function(){
    Cookies.set('visited', '0');
    location.reload();
  });
})( jQuery );

Upvotes: 1

Related Questions