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.
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'>×</a>
<h2>Pop</h2>
</div>
<a href='/' class='close-exit-intent'></a>
";} else {
echo "";
}?>
The answer is already posted in the snippet. Thanks to the @CBroe.