2

I have been told to add a cookie to a site. The site doesn't retain any user information other than the amount of visits the site gets.

I therefore do not have any user data to assign the cookie to so cannot tell if the user has already accepted.

Keeping the answer as quick to implement as possible and using simple code is it possible to only show the cookie to users that haven't already acknowledged it?

Heres where I am at. 'a basic cookie policy that will show on every page load'. Please help me make it only show once per user.

 $(document).ready(function(){
  if(getCookie("HideCookie") != "true") {
   $("#cookie-consent").css('display','block');
  }
 });

 function SetCookieAndHideDiv(){
  setCookie('HideCookie','true',1);
  $("#cookie-consent").css('display','none');
 }

 function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');

  for(var i=0; i<ca.length; i++) {
   var c = ca[i];
   while (c.charAt(0)==' ') c = c.substring(1);
   if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }

  return "";
 }

 function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
 }
 /* COOKIE */
 #cookie-consent {
        display: none;

  width:100%;
  height: 100%;

  position:fixed;
  bottom:0px;

  background-color: rgba(0,0,0,0.8);

  z-index: 100000;
 }

  .cookie-consent-inner {
   width:100%;

   padding: 20px;

   position:fixed;
   bottom:0px;

   background-color: rgba(0,74,119,1);
   color: rgba(255,209,0,1);
  }

   .cookie {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;

    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
   }

    .cookie-msg {
     width: calc(100% - 120px);
     margin-right: 20px;
     float: left;
    }
    .cookie-accept {
     width: 100px;
     float: right;
    }
     .cookie-button {
      font-size: 16px;
      line-height: 40px;
      padding: 0px;
      color: #FFD100;
      width: 100px;
      background-color: #337ab7;
      cursor: pointer;
      border: 1px solid white!important;
      -o-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -webkit-transition: all 0.4s linear;
      transition: all 0.4s linear;
      text-align: center;
     }
      .cookie-button:hover {
       background-color: #0072AE;
      }
 /* END COOKIE */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="cookie-consent" class="cookie-consent">
 <div class="cookie-consent-inner">
  <div class="cookie">

   <div class="cookie-msg">We use cookies to track visits to our website, we store no personal details. By staying on the site you consent to our cookie policy.</div>
   <div class="cookie-accept">
    <button id="cookie" class="cookie-button" onclick='SetCookieAndHideDiv();'>OK</button>
   </div>
   
  </div>
 </div>
</section>

I know this is very basic, but it has basic needs.

Jason Is My Name
  • 929
  • 2
  • 14
  • 38
  • 2
    The cookie isn't related to the user, but to the browser. Just set the cookie when the OK button is clicked. – Rory McCrossan Nov 23 '18 at 12:10
  • Cookies are stored client-side, in the browser. If a/the cookie exists, the user has already accepted (no need for you to show the consent dialog). – brombeer Nov 23 '18 at 12:14
  • I appreciate you probably know what you're talking about. But these don't make any sense. @RoryMcCrossan – Jason Is My Name Nov 23 '18 at 12:22
  • @kerbholz - tag – Jason Is My Name Nov 23 '18 at 12:22
  • "Is it possible to only show the cookie to users that haven't already acknowledged it?" - not unless you implement a login and user-tracking mechanism. The best you'll be able to do is to set a persistent cookie that tracks whether the current browser has acknowledged the consent message, which you can do simply by setting a cookie on the 'OK' button and suppressing the banner if the cookie isn't set. – peeebeee Nov 23 '18 at 12:26
  • Oh yeah - I see what you're saying now. I will give that a go. Do you have a snippet at hand you don't mind sharing with the community? - @peeebeee – Jason Is My Name Nov 23 '18 at 12:28
  • Not sure what "_I appreciate you probably know what you're talking about. But these don't make any sense._" or "_- tag_" should mean. We basically said what peeebeeee was saying – brombeer Nov 23 '18 at 12:36
  • Correction to my comment above - "... suppressing the banner if the cookie *is* set" – peeebeee Nov 23 '18 at 12:40
  • @kerbholz - I just tagged you back in so you had a notification. the quote is me saying I know you know what you're talking about - but I do not! – Jason Is My Name Nov 23 '18 at 13:41
  • @peeebeee - I know what you're getting at. Please would you be able to provide a bit of help in achieving this? – Jason Is My Name Nov 23 '18 at 13:43
  • 1
    This is almost the same thing - https://stackoverflow.com/questions/21587098/jquery-cookie-hide-show-div – peeebeee Nov 23 '18 at 13:50
  • @peeebeee - thanks for your persistent support - I have amended my question with my current code. Have you any idea as to why this doesnt work? – Jason Is My Name Nov 23 '18 at 14:33

1 Answers1

0

Thanks for all the comments - glad it got a bit of traction.

Please up-vote the question so others can get this code.

Working Code:

    $(document).ready(function(){
  if(getCookie("HideCookie") != "true") {
   $("#cookie-consent").css('display','block');
  }
 });

 function SetCookieAndHideDiv(){
  setCookie('HideCookie','true',1);
  $("#cookie-consent").css('display','none');
 }

 function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');

  for(var i=0; i<ca.length; i++) {
   var c = ca[i];
   while (c.charAt(0)==' ') c = c.substring(1);
   if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }

  return "";
 }

 function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
 }
 /* COOKIE */
 #cookie-consent {
        display: none;

  width:100%;
  height: 100%;

  position:fixed;
  bottom:0px;

  background-color: rgba(0,0,0,0.8);

  z-index: 100000;
 }

  .cookie-consent-inner {
   width:100%;

   padding: 20px;

   position:fixed;
   bottom:0px;

   background-color: rgba(0,74,119,1);
   color: rgba(255,209,0,1);
  }

   .cookie {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;

    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
   }

    .cookie-msg {
     width: calc(100% - 120px);
     margin-right: 20px;
     float: left;
    }
    .cookie-accept {
     width: 100px;
     float: right;
    }
     .cookie-button {
      font-size: 16px;
      line-height: 40px;
      padding: 0px;
      color: #FFD100;
      width: 100px;
      background-color: #337ab7;
      cursor: pointer;
      border: 1px solid white!important;
      -o-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -webkit-transition: all 0.4s linear;
      transition: all 0.4s linear;
      text-align: center;
     }
      .cookie-button:hover {
       background-color: #0072AE;
      }
 /* END COOKIE */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="cookie-consent" class="cookie-consent">
 <div class="cookie-consent-inner">
  <div class="cookie">

   <div class="cookie-msg">We use cookies to track visits to our website, we store no personal details. By staying on the site you consent to our cookie policy.</div>
   <div class="cookie-accept">
    <button id="cookie" class="cookie-button" onclick='SetCookieAndHideDiv();'>OK</button>
   </div>
   
  </div>
 </div>
</section>
Jason Is My Name
  • 929
  • 2
  • 14
  • 38