0

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 "";
}?>
NDi
  • 184
  • 1
  • 2
  • 17
  • 1
    The element `#exit-intent` will now exist or not, based on whether that cookie is set. But your JS portion of this still operates under the assumption, that an element with that ID can always be selected. You need to _check_ whether you actually successfully selected such an element, otherwise the following lines that try to change style properties on `element` will fail with an error. – CBroe Jan 26 '21 at 14:30
  • @CBroe I appreciate your reply. Are you saying that I need to create an #exit-intent in css? – NDi Jan 26 '21 at 14:37
  • 1
    No, I am saying you need to check whether `document.querySelector("#exit-intent")` actually returned an element, or just `null`. If `element` is just `null`, because no element with that ID could be found within the document, then trying to access `element.style` in the next line will fail at that point already - because `null` does not have any `style`. – CBroe Jan 26 '21 at 14:40
  • @CBroe I apologize for the lack of knowledge. Indeed there is a style error as you correctly pointing out. It is my understanding though that there is an element with the id #exit-intent (the div). – NDi Jan 26 '21 at 14:46
  • 1
    You have wrapped the creation of that div element into `if(!isset($_COOKIE[$cookie_name]))` in your PHP code - so as soon as that cookie _is_ set, that element will not exist any more in the generated HTML output. – CBroe Jan 26 '21 at 14:48
  • Therefore, should I duplicate the div outside the php, and place it the document? – NDi Jan 26 '21 at 14:53
  • 1
    No, just check if the attempt to select the element in the JavaScript portion actually succeeded, before you try any further operations on the result variable. Element references are always “truthy” in JS, whereas `null` is falsy, so a simple if is sufficient: `const element = document.querySelector("#exit-intent"); if(element) { element.style.visibility = "visible"; … }` – CBroe Jan 26 '21 at 14:59
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227848/discussion-between-nickdimou-and-cbroe). – NDi Jan 26 '21 at 15:05

1 Answers1

0

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

NDi
  • 184
  • 1
  • 2
  • 17