Search code examples
javascriptphphtmlcssexit-intent

Exit intent popup with php cookie


Goal: To implement into my exit intent popup code a php cookie for 1 day.

I have found a working way for the popup, and a possible solution for the php cookie. I am very new in php though and having a hard time to piece everything together. I don't use dependencies like jQuery but embrace some lines of javascript.

  1. Is the below the right way for the cookie?
  2. Is there a way for a SLIMMER code (js, css, php) with the same result?

const show = () => {
  const element = document.querySelector("#exit-intent");
  if (element) {
    element.style.visibility = "visible";
    element.style.opacity = "1";
    //element.style.transform = "scale(1)";
    //element.style.transition = "0.01s, opacity 0.01s";
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("mouseout", (event) => {
    if (!event.toElement && !event.relatedTarget) {
      setTimeout(() => {
        show();
      }, 20);
    }
  });
});
.exit-intent {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(300%) blur(7px);
  backdrop-filter: saturate(300%) blur(7px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.exit-intent:target {
  visibility: visible;
  opacity: 1;
}

.exit-intent-close {
  position: absolute;
  max-width: 500px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.exit-intent .close {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  color: #000;
  line-height: 0.6em;
}

.exit-intent .close:hover {
  color: #999;
}

.close-exit-intent {
  background: rgba(0, 0, 0, 0.7);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}

.exit-intent:target+.close-exit-intent {
  opacity: 1;
  visibility: visible;
}
<?php
$cookie_name = "TSBCookie";
$cookie_value = "TSB";
setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); // 86400 = 1 day

if(!isset($_COOKIE[$cookie_name])) {
echo "

<div id='exit-intent' class='exit-intent'>

<a href='/' class='close'>&times;</a>

<h2>Pop</h2>

</div>

<a href='/' class='close-exit-intent'></a>

";} else {
echo "";
}?>


Solution

  • The answer is already posted in the snippet. Thanks to the @CBroe.