[英]Add redirection when button is clicked first time then disable it for specific time even after page reload using jQuery
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.到目前为止,我已经成功地在 js 代码中禁用了特定时间的按钮。
Check this GIF: https://gifyu.com/image/c25b检查这个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.我正在寻找一种方法,如果用户第一次结帐然后第一次单击结帐按钮将用户重定向到(thankyou.php)页面。
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可以说,现在用户在一段时间后尝试再次订购,这个时间按钮将禁用让我们说 10 秒......意味着用户必须等待 10 秒才能下一次结帐......但现在我面临一些并发症......参考上面的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...您可以在 GIF 文件中看到我正在尝试在按钮被禁用时重新加载页面...您可以看到按钮再次启用,并且在我点击重新加载按钮后倒计时暂停...
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>
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
您需要为您将执行的每个结帐添加
localStorage
,并且在localStorage
中您已经在节省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.一旦
timer
达到zero
,用户将被重定向到thankyou.php
,并且在该页面中,您将删除为此结帐设置的localStorage
。
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.如果您可以再次返回
checkout
并按下checkout
按钮,则计时器从 10 秒开始,如果您在该时间内刷新并再次按下结帐,计时器将从剩余时间开始,一旦该时间结束,我们会将用户重定向到thankyou.php
页面,我们将再次删除localStorage
。
This process will go over and over again without any issue no matter how many checkout you complete.无论您完成多少次结帐,此过程都会一遍又一遍地 go没有任何问题。
Checkout HTML结帐 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 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正如你在这里看到的,我已经添加了
window.location.href
将用于重定向,我正在重定向它thankyou.php
页面一旦timer
达到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谢谢。php
This will your thank you page php.这将是您的感谢页面 php。 Here you will
remove
the localStorage
of the time for each checkout
.在这里,您将
remove
每次checkout
的时间的localStorage
。
<?php
?>
<div id="popover_content_wrapper">
<h1>Thanks you!!!!</h1>
</div>
<script>
//Remove storage
localStorage.removeItem('time');
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.