I am trying to hide an element on the front-end and remember the user choice by creating a cookie in PHP.

Here is how I have it set up:

I have some HTML and JS scripts inside an HTML widget on the page on the front-end

<div id="training-banner"> training banner design here </div>
<button onclick="myFunction()" id="close-btn">X</button>

<script>
function myFunction() {
  var element = document.getElementById("training-alert");
  element.classList.add("hidebanner");
}
</script>

Then I have written the cookie function inside the function.php of the child theme:

add_action('init', function() {
    if (!isset($_COOKIE['training_banner_cookie'])) {
        setcookie('training_banner_cookie', 'showbanner', strtotime(' 1 day'));
    }
    
    if (class_exists('hidebanner')){
        ?><style>#training-alert{display:none;}</style> <?php
        setcookie('training_banner_cookie', 'hidebanner', strtotime(' 1 day'));
    }

    $cookieValue = $_COOKIE['training_banner_cookie'];
    if ($cookieValue == "hidebanner"){
        ?><style>#training-alert{display:none;}</style> <?php
    }
});

For some reason, the class_exists() PHP function does not work, any idea how this can be achieved?

CodePudding user response：

https://www.php.net/manual/en/function.class-exists.php

class-exists is not used in your case. It is used to check if a Class exists in your PHP code block.

if (class_exists('MyClass')) {
    $myclass = new MyClass();
}

What you want to do is to save the choice of the users' choice. You can simply use JS to achieve it.

<div id="training-banner"> training banner design here </div>
<button onclick="myFunction()" id="close-btn">X</button>

<script>
function getCookie(cookieName: string, cookie?: string): string {
  const name = cookieName   '='
  const decodedCookie = decodeURIComponent(cookie || document.cookie)
  const ca = decodedCookie.split(';')
  for (let i = 0; i < ca.length; i  ) {
    let 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(
  cookieName,
  value,
  days,
  isSecure = true
): void {
  let expires = ''
  const secure = isSecure ? '; Secure' : ''
  if (days) {
    const date = new Date()
    date.setTime(date.getTime()   days * 86400000)
    expires = ' ;expires='   date.toUTCString()
  }
  document.cookie = cookieName   '='   value   expires   ' ;path=/'   secure
}

function myFunction() {
  var element = document.getElementById("training-alert");
  element.classList.add("hidebanner");
  setCookie('training_banner_cookie_hide', true, 1)
}

function init(){
    var shouldHideBanner = getCookie('training_banner_cookie_hide')
    if(shouldHideBanner){
        var element = document.getElementById("training-alert");
        element.style.display = 'none';
    }
}

init()
</script>

CodePudding user response：

With the help of @WillyLi's answer, I was able to organize my thoughts and modify his code a bit here is what worked for me:

• I modified the getCookie function declaration and simplified it to one parameter cname.
• Then I also modified the setCookie and standardized it according to w3school
• Finally, I wanted the banner to be hidden immediately as the user clicks the button so I added element.style.display = 'none'; to myFunction()

Here is what the final version looks like:

<button onclick="myFunction()" id="close-btn">X</button>

<script>
function getCookie(cname) {
  let name = cname   "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i  ) {
    let 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) {
  const d = new Date();
  d.setTime(d.getTime()   (exdays*24*60*60*1000));
  let expires = "expires="  d.toUTCString();
  document.cookie = cname   "="   cvalue   ";"   expires   ";path=/";
}

function myFunction() {
    var element = document.getElementById("training-alert");
    element.style.display = 'none';
    setCookie('training_banner_cookie_hide', true, 1);
}

function init(){
    var shouldHideBanner = getCookie('training_banner_cookie_hide');
    if(shouldHideBanner){
        var element = document.getElementById("training-alert");
        element.style.display = 'none';
    }
}

init()
</script>