Add redirection when button is clicked first time then disable it for specific time even after page reload using jQuery

Question

I am trying to implement that the user can only click once on checkout button and when user try to order again after some time then he has to wait until button enable again.

sample picture of shopping cart

What I have done so far:

Until now, I have successfully disabled the button for specific time in js code.

Check this GIF: https://gifyu.com/image/c25b

Things that trying to accomplish

• I am looking for a way if user checkout first time then on first click on checkout button redirect the user to (thankyou.php) page.

• Lets say, now user is trying to order again after some time, this time button will disable for lets say 10 sec...means user has to wait for 10sec before next checkout...but now I am facing some complications...reffer above GIF

You can see in the GIF file that I am trying to reload the page while button is disabled...you can see button enabled again and countdown pause once I hit reload button...

What I looking is disabled the checkout button even page refresh multiple times and countdown still need to continues in the back... no matter on what webpage user is on...

I am really stuck at these steps, I would be very thankful if someone guide me...in my above complications.below is my code...

 $.fn.disableFor = function(mins, secs) { var i = [], play = []; $("#check_out_cart").click(function() { var selector = $("#check_out_cart"), inDex = $(selector).index(), prevText = $("#timer").text(); i[inDex] = 0; //Store seconds var inSeconds = mins * 60 + secs; //Get the previous stored seconds - check local storage var retrievedObject = localStorage.getItem('time'); if (retrievedObject) { inSeconds = retrievedObject; } //Disable button $(selector).prop('disabled', true); play[inDex] = setInterval(function() { if (inSeconds > 60) { localStorage.setItem('time', inSeconds); //Set time again inSeconds = inSeconds - 1; var minutes = Math.floor(inSeconds / 60); var seconds = inSeconds % 60; if (minutes >= 1) { if (seconds.toString().length > 1) { $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + seconds + " minutes left"); } else { $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + "0" + seconds + " minutes left"); } } else { $('#timer').html("<i class='fas fa-clock' ></i> " + seconds + " seconds left"); } } else { localStorage.setItem('time', inSeconds); //Set time again if (inSeconds > 1) { inSeconds = inSeconds - 1; if (inSeconds.toString().length > 1) { $('#timer').html("<i class='fas fa-clock' ></i> " + inSeconds + " seconds left"); } else { $('#timer').html("<i class='fas fa-clock' ></i> " + "0" + inSeconds + " seconds left"); } } else { localStorage.removeItem('time'); $(selector).prop("disabled", false); clearInterval(play[inDex]); $('#timer').html(prevText); } } }, 1000); }); }; $(function() { $("#check_out_cart").disableFor(0, 10); // First parameter stands for minutes and the second for the seconds. });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="popover_content_wrapper"> <span id="cart_details"></span> <div align="right"> <button class="btn btn-success" id="check_out_cart"> <span class="glyphicon glyphicon-shopping-cart"></span> Checkout </button> <button class="btn btn-default" id="clear_cart"> <span class="glyphicon glyphicon-trash"></span> Remove all</button> </div> <div align="right"> <small id="timer">Ready to checkout.</small> </div> </div>

Answer 1

Here is working solution for you (Tested and its working in my browser). You need to add localStorage for each checkout you will perform and in the localStorage you are already saving the seconds

As soon as the timer hits zero the user will be redirected to thankyou.php and in that page you will remove the localStorage which will setted up for this checkout.

If you can come back to checkout again and you press checkout button the timer starts at 10 seconds and if you refresh within that time and you press checkout again the timer will start from the remaining and once that time finished we will redirect user to thankyou.php page where we will remove localStorage again.

This process will go over and over again without any issue no matter how many checkout you complete.

Checkout HTML

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="popover_content_wrapper">
  <span id="cart_details"></span>

  <div align="right">

    <button class="btn btn-success" id="check_out_cart">
                 <span class="glyphicon glyphicon-shopping-cart"></span> 
                Checkout
              </button>

    <button class="btn btn-default" id="clear_cart">
              <span class="glyphicon glyphicon-trash"></span> Remove all</button>
  </div>

  <div align="right">
    <small id="timer">Ready to checkout.</small>
  </div>
</div>

jQuery

As you can see here i have added window.location.href which will used for redirection and i am redirecting it thankyou.php page once the timer hits 0

<script>

//Click event for disabled first time
$("#check_out_cart").click(function() {
  //Set local storage
  var checkFirst = localStorage.hasOwnProperty('firstTime'); 
  if (!checkFirst) {
    localStorage.setItem('firstTime', true); //Set first time entry
  }
  //Disable for 10 seconds if its not a first time.
  disableFor(0, 10)
});

//Disable checkout function
function disableFor(mins = null, secs = null) {

  var checkRevist = localStorage.getItem('firstTime'); 
  if (checkRevist == 'true') {
    window.location.href = 'thankyou.php'; //Redirect to thank you page.
    //Set it to false
    localStorage.setItem('firstTime', false); //Set first time entry
  } else {
    var i = [],
      play = [];
    var selector = $("#check_out_cart"),
      inDex = $(selector).index(),
      prevText = $("#timer").text();
    i[inDex] = 0;

  //Store seconds
  var inSeconds = mins * 60 + secs;

  //Get the previous stored seconds - check local storage
  var retrievedObject = localStorage.getItem('time');
  if (retrievedObject) {
    inSeconds = retrievedObject;
  }

  //Disable button
  $(selector).prop('disabled', true);

  play[inDex] = setInterval(function() {
    if (inSeconds > 60) {
      localStorage.setItem('time', inSeconds); //Set time again
      inSeconds = inSeconds - 1;
      var minutes = Math.floor(inSeconds / 60);
      var seconds = inSeconds % 60;
      if (minutes >= 1) {
        if (seconds.toString().length > 1) {
          $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + seconds + " minutes left");
        } else {
          $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + "0" + seconds + " minutes left");
        }
      } else {
        $('#timer').html("<i class='fas fa-clock' ></i> " + seconds + " seconds left");
      }
    } else {
      localStorage.setItem('time', inSeconds); //Set time again
      if (inSeconds > 1) {
        inSeconds = inSeconds - 1;
        if (inSeconds.toString().length > 1) {
          $('#timer').html("<i class='fas fa-clock' ></i> " + inSeconds + " seconds left");
        } else {
          $('#timer').html("<i class='fas fa-clock' ></i> " + "0" + inSeconds + " seconds left");
        }
      } else {
        window.location.href = 'thankyou.php'; //Redirect to thank you page.
        $(selector).prop("disabled", false);
        clearInterval(play[inDex]);
        $('#timer').html(prevText);
      }
    }
  }, 1000);
  }
}

//Checking on page reload if there is a time left - time > 0
$(function() {
  //Get the previous stored seconds - check local storage
  var retrievedObject = localStorage.getItem('time');
  if (retrievedObject) {
    //Check previous timer - if page reloaded.
    disableFor()
  }
});
</script>

thankyou.php

This will your thank you page php. Here you will remove the localStorage of the time for each checkout .

<?php

?>

<div id="popover_content_wrapper">
 <h1>Thanks you!!!!</h1>
</div>

<script>

//Remove storage
localStorage.removeItem('time');

</script>