Создание всплывающего окна после того, как пользователь был на сайте после определенного периода времени

Question

Я создаю всплывающее окно на своем сайте, чтобы попытаться заставить пользователей подписаться на нашу рассылку.

Включив этот файл php во все мои страницы, всплывающее окно появится, когда они будут перемещатьсячерез сайт более минуты.

Однако, если они останавливаются на одной странице и не нажимают на нее, я все равно хочу, чтобы она всплывала без изменения страницы или обновления текущей страницы.

<?php
session_start();

if(isset($_POST['mailing_list_input']) && $_POST['mailing_list_input']!=""){
    $email = $_POST['mailing_list_input'];
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $params = [$email];
        $sql = "INSERT INTO mailing_list(email, date_time) VALUES (?,now())";
        $stmt = DB::run($sql,$params);

        $date = new DateTime();
        unset($_SESSION['timer']);
        $_SESSION['already_asked'] = $date;
    }else{
        $email_warning = "<div id='warning'>Email address is not valid</div>";
    }
}

if(isset($_POST['mailing_list_hide']) && $_POST['mailing_list_hide']=="hide"){
    $date = new DateTime();
    unset($_SESSION['timer']);
    $_SESSION['already_asked'] = $date;
}

if(!isset($_SESSION['timer']) && !isset($_SESSION['already_asked'])){
    $date = new DateTime();
    $date->modify("+1 minutes");
    $_SESSION['timer'] = $date;
}

if(isset($_SESSION['timer']) && !isset($_SESSION['already_asked']) && !isset($_COOKIE["customer_login"])){
    $date = new DateTime();
    if($_SESSION['timer'] <= $date){
        echo "<div id='popup'>";
        echo "<form class='mailing_list_form' method='POST' action='".$_SERVER['PHP_SELF']."'>";
        echo "<input type='hidden' id='mailing_list_hide' name='mailing_list_hide' value='hide'>";
        echo "<button id='mailing_list_close' name='mailing_list_close' onclick='this.form.submit();'>X</button>";
        echo "</form>";
        echo "<h2>SUBSCRIBE FOR LATEST DISCOUNTS & COMPETITIONS</h2>";
        echo "Stay up to date with our latest products";
        echo "<br /><br />";
        echo "<form class='mailing_list_form' method='POST' action='".$_SERVER['PHP_SELF']."'>";
        echo "<input type='text' id='mailing_list_input' name='mailing_list_input' placeholder='Enter your email address here'>";
        echo "<button id='mailing_list_button' name='mailing_list_button' onclick='this.form.submit();'>";
        echo "<img src='media/icons/subscribe_icon.png' alt='subscribe icon' width='15px' height='15px'>";
        echo "</button>";
        echo "</form>";
        if(isset($email_warning)){echo $email_warning;}
        echo "<p>By continuing you agree to the <u><a href='page/Privacy-and-Cookie-Policy'>Privacy and Cookie Policy</a></u>.</p>";
        echo "</div>";
    }
}
?>

Answer 1

Итак, это то, что я придумал в конце.Если они перемещаются по сайту, он получит таймер сеанса, а если остановка на странице, не пройдя по ней, просто использует таймер JS

<script>
    function displayPopup(){
        $("#popup").fadeIn("slow");
    }
    function hidePopup(){
        $("#popup").css("display", "none");
    }
</script>
<?php
if(isset($_POST['mailing_list_input']) && $_POST['mailing_list_input']!=""){
    $email = $_POST['mailing_list_input'];
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $params = [$email];
        $sql = "INSERT INTO mailing_list(email, date_time) VALUES (?,now())";
        $stmt = DB::run($sql,$params);

        $date = new DateTime();
        unset($_SESSION['timer']);
        $_SESSION['already_asked'] = $date;
    }else{
        $email_warning = "<div id='warning'>Email address is not valid</div>";
    }
}
if(isset($_POST['mailing_list_hide']) && $_POST['mailing_list_hide']=="hide"){
    $date = new DateTime();
    unset($_SESSION['timer']);
    $_SESSION['already_asked'] = $date;
}
if(!isset($_SESSION['already_asked'])){
    echo "<script>var popup_timer = setTimeout(displayPopup, 10000);</script>";
}
?>
<div id='popup'>
<form class='mailing_list_form' method='POST' action='<?php echo $_SERVER['REQUEST_URI']; ?>'>
<input type='hidden' id='mailing_list_hide' name='mailing_list_hide' value='hide'>
<button id='mailing_list_close' name='mailing_list_close' onclick='this.form.submit();'>X</button>
</form>
<h2>SUBSCRIBE FOR LATEST DISCOUNTS & COMPETITIONS</h2>
<p>Stay up to date with our latest products</p>
<form class='mailing_list_form' method='POST' action='<?php echo $_SERVER['REQUEST_URI']; ?>'>
<input type='text' id='mailing_list_input' name='mailing_list_input' placeholder='Enter your email address here'>
<button id='mailing_list_button' name='mailing_list_button' onclick='this.form.submit();'>
<img src='media/icons/subscribe_icon.png' alt='subscribe icon' width='15px' height='15px'>
</button>
</form>
<?php if(isset($email_warning)){echo $email_warning;} ?>
<p>By continuing you agree to the <u><a href='page/Privacy-and-Cookie-Policy'>Privacy and Cookie Policy</a></u>.</p>
</div>
<?php
if(!isset($_SESSION['timer']) && !isset($_SESSION['already_asked'])){
    $date = new DateTime();
    $date->modify("+20 seconds");
    $_SESSION['timer'] = $date;
    echo '<script>hidePopup();</script>';
}
if(isset($_SESSION['timer']) && !isset($_SESSION['already_asked']) && !isset($_COOKIE["customer_login"])){
    $date = new DateTime();
    if($_SESSION['timer'] <= $date){
        echo '<script>displayPopup();</script>';
    }else{
        echo '<script>hidePopup();</script>';
    }
}
if(isset($_SESSION['already_asked'])){
    echo '<script>hidePopup();</script>';
}
?>

Answer 2

PHP - это язык на стороне сервера, (in) активность происходит на стороне клиента.Вы должны реализовать свое решение на последнем, с JS, например:

var popupTimer,
TIME_OUT = 60;

function displayPopup() {
    // display the popup
}

popupTimer = setTimeout(displayPopup, TIME_OUT);

$(document).on('click change keypress', function() {
    clearTimeout(popupTimer);

    // Reset
    popupTimer = setTimeout(displayPopup, TIME_OUT);
});