Timer/Countdown that continues with page refresh

Is there a way preferably natively through bubble or alternatively with a plugin to have a countdown that doesn’t restart with page refresh? - I am yet to come across a solution to this challenge,

I’m not entirely sure I understand the question/problem…

A countdown timer simply shows the amount of time left until a specified date/time…

A plugin such as this one will work just fine for that: Countdown Plugin | Bubble

What I mean is this: with all plugins I’ve tested, say the task is set for 5 hours and a countdown begins, when you refresh the page the countdown starts over. I want it that it doesn’t start over but continues counting down from the initial countdown, no matter how many times you refresh the page. Does the plugin you recommended do that?

As this thread mentions, the only thing that comes to mind is to save the timer’s value to the database. If you think the chances of frequent page refreshes are slim, you could count down in a custom state and only save the state’s value to the database every once in a while, and then on page load you could get the last saved value from the database and keep the countdown going.

Anyway, just a thought… and maybe not a good one… but I didn’t think it could hurt to throw it out there.

Best…
Mike

1 Like

Hey Mike its been a while. It sounds promising, ill have a look into this solution. Thank you

1 Like

You need to have a date/time saved in the database…

That’s the time you want to count down to.

So whenever/however you create and set your ‘target’ time, just save that somewhere in the database and refer to it in the timer.

As an alternative, you could always save the target time (as a unix timestamp) in a cookie, and set the timer based on that (if you don’t want to use the database). But ultimately you need to save the time somewhere if you don’t want to lose it every time the page is reloaded.

1 Like

Thanks man. Ill look into these suggestions. Thanks for the fast responses.

You could also just drop the target date into Local Storage. I don’t know if any of the available plugins are any good (I have my own), but surely there’s one sufficient for dropping a single key with a date value into localStorage and retrieving it on page load.

1 Like

Thanks Keith. Will look into this as well.

I did exactly this for a game timer. Once the user clicks to begin the timer I wrote the datetime into the db, and then begin a timer using that datetime value as the basis.

“On page load”, the page first checks the db to see if there is a live timer meant to be running, and if it is it kicks off the javascript timer from the datetime in the db.

So yeah - agreeing with all comments so far - using some form of storage is key.

1 Like

Firstly I am very new to javascript. I have a Shopify store and I am planning to have a countdown timer just like Amazon to each of my product pages. I know there are a lot of plugins I can use for Shopify but none of them matches with the theme and style of my Shopify store so I planned to make one myself.

What I want is if User-1 opens my website and navigates to a product page, he should see a timer counting down to a specific time say 12:00:00 (hh:mm:ss). Suppose User-1 sees ‘Deal ends in 11:20:10’ Now if User-2 opens the same product page at the same time then he should also see ‘Deal ends in 11:20:10’ The whole point is the timer should not refresh back to 12:00:00 every time the browser loads/reloads the page and every user on the website should see the same time remaining on the countdown timer. Basically, also I want to add this type of timer on one of my web pages like cloud erp adoption. So I have checked everything, but unable to get rid of this issue.

I starting with a bit of research and managed to run a timer on my store. It’s not exactly what I want but here’s the code:

    var interval;
    var minutes = 1;
    var seconds = 5;
    window.onload = function() {
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>

And here’s what it looks like:

enter image description here

It does work but has the following problems:

  1. It refreshes with the browser refresh.
  2. It doesn’t have hours.
  3. It does not auto-repeat when the timer reaches zero.
  4. For every user time remaining varies.

As I mentioned I am almost a noob in JavaScript. Can anyone help me build a countdown timer that overcomes the above issues?

@adamhholmes @mikeloc @keith just to inform you that I have succeeded in implementing this. Thank you for all the helpful guidance

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.