Jump to content

Javascript cookie pop up


Theo van der Heijdt

Recommended Posts

Hi all,

 

i am struggling with a javascript setting. In this Corona period i want to inform my site visitors about what changed in our company (For instance when to visit us again) and i want to give that pop-up in a weekly base, with the code i have put under this text  the popup checks daily and pop-up daily, how can i set the text to pop-up in a weekly base.

Is someone able to help please?

 

My text and code are based like this;

<div class="demomelding" style="display: none">
<h5>Beste Klant,</h5>
<p>De maatregelen rondom de bestrijding van het Covid-19 virus treffen ook de dienstverlening van Hexis.<br /><br />Wij zijn open, met de volgende aanpassingen: <br /><br />- Voorkom wachttijden. Bestel vooraf via webshop, mail of telefoon. <br />- Bestellingen kun je tussen 9 en 17 u afhalen. Kom alleen. <br />- We laten max. 3 personen tegelijk binnen. <br />- Hou je aan de route zoals die op de vloer is aangegeven.&nbsp;<br /><br />- Onze bezorgdienst voor de regio rijdt weer, <br />&nbsp;&nbsp; je bestelling van vandaag wordt weer de volgende dag bezorgd. <br /><br />Dank voor je medewerking.<br />#staysafe </p>
<div onclick="CloseDemoPopup();" class="exit-questions exittext">Klik hier om verder te gaan.</div></div>
<div class="demobg" style="display: none"></div>
<script>
function InitJquery(){if(botCheck()==false)
{
   CheckDemoPopup();
}
}


function CheckDemoPopup() {
    var localStorageDateTime = new Date(localStorage.getItem("Next-DemoPopup"));

    //Check of er al een cookie is gezet
    var currentDateTime = new Date(); //get the current time.

    var currentDate = currentDateTime.getDate();
    var localStorageDate = localStorageDateTime.getDate();

    if (localStorageDate == currentDate) {
        //Er is al op akkoord geklikt
    }
    else {
        setTimeout(DisplayDemoPopUp, 60);
    }
}

function DisplayDemoPopUp() {
    $('.demomelding').fadeIn(50);
    $('.demobg').fadeIn(100);
    $('body').css('overflow', 'hidden');
}

function CloseDemoPopup() {
    $('.demomelding').fadeOut(100);
    $('.demobg').fadeOut(100);
    $('body').css('overflow', 'auto');

    localStorage.setItem("Next-DemoPopup", new Date());
    //createCookie('Next-DemoPopup', "PopupShowed", 1);
}


</script>

<style>

.demomelding {
    width: 600px;
    height: 500px;
}
 </style>

Link to comment
Share on other sites

You can count whether seven days have passed by comparing the timestamps. The getTime() method converts each date into a number measured in seconds.

var SEVEN_DAYS = 7 * 24 * 60 * 60; // How many seconds in 7 days
if(localStorageDate.getTime() - currentDate.getTime() > SEVEN_DAYS) {
  // Popup code here
}

 

Link to comment
Share on other sites

Thank you, i am really new to it so it now looks like this, do you agree ?

 

<div class="demomelding" style="display: none">
<h5>Beste Klant,</h5>
<p>De maatregelen rondom de bestrijding van het Covid-19 virus treffen ook de dienstverlening van Hexis.<br /><br />Wij zijn open, met de volgende aanpassingen: <br /><br />- Voorkom wachttijden. Bestel vooraf via webshop, mail of telefoon. <br />- Bestellingen kun je tussen 9 en 17 u afhalen. Kom alleen. <br />- We laten max. 3 personen tegelijk binnen. <br />- Hou je aan de route zoals die op de vloer is aangegeven.&nbsp;<br /><br />- Onze bezorgdienst voor de regio rijdt weer, <br />&nbsp;&nbsp; je bestelling van vandaag wordt weer de volgende dag bezorgd. <br /><br />Dank voor je medewerking.<br />#staysafe </p>
<div onclick="CloseDemoPopup();" class="exit-questions exittext">Klik hier om verder te gaan.</div></div>
<div class="demobg" style="display: none"></div>
<script>
function InitJquery(){if(botCheck()==false)
{
   CheckDemoPopup();
}
}


function CheckDemoPopup() {
    var localStorageDateTime = new Date(localStorage.getItem("Next-DemoPopup"));

    //Check of er al een cookie is gezet
    var currentDateTime = new Date(); //get the current time.

    var currentDate = currentDateTime.getDate();
    var localStorageDate = localStorageDateTime.getDate();

    if (localStorageDate == currentDate) {
        //Er is al op akkoord geklikt
    }
    else {
       var SEVEN_DAYS = 7 * 24 * 60 * 60; // How many seconds in 7 days
if(localStorageDate.getTime() - currentDate.getTime() > SEVEN_DAYS) {
  // Popup code here
    }
}

function DisplayDemoPopUp() {
    $('.demomelding').fadeIn(50);
    $('.demobg').fadeIn(100);
    $('body').css('overflow', 'hidden');
}

function CloseDemoPopup() {
    $('.demomelding').fadeOut(100);
    $('.demobg').fadeOut(100);
    $('body').css('overflow', 'auto');

    localStorage.setItem("Next-DemoPopup", new Date());
    //createCookie('Next-DemoPopup', "PopupShowed", 1);
}


</script>

<style>

.demomelding {
    width: 600px;
    height: 500px;
}
 </style>

Link to comment
Share on other sites

That code won't work. The code that opens the popup is gone.

Of course, you need to replace the "// Popup code here" comment with the actual code that makes the popup appear. The "if (localStorageDate == currentDate)" block would need to be removed since that is the part that was checking for the current day before.

It seems like you are not familiar enough with Javascript yet. You should make an effort to understand what each line of code is doing. If there is a line of code that you don't understand, ask about it and I can explain it to you.

Link to comment
Share on other sites

Thanks for all your help, yes i am new to this and learning, but this is for my office, it is a message how we changed our policy in this corona time.

if you see my text above the script and the text of my button, my boss would like to change that it pop ups once a week. could you put the whole script here so i can copy paste it so that it works here, i am learning and learning, but this is still to difficult for me to understand, doing an online training but i am still a newbie, you would be of great help if you put the right message for me complete.

 

Thanks in advance

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...