Feature request: countdown timer element - evergreen timer

Beta
#1

Provide an evergreen countdown timer option that starts as soon as a user loads the page. Evergreen timers are a great marketing tool.

#2

Does the generic date dynamic content solve this issue for you? You can do things like + 10 minutes or + 1 day. Try with format c.

image
image613×675 21 KB

#3

It’s not quite working. I’m getting some errors while working with the End Date input.

***react-datetime:Invalid date passed to the setViewDate method: NaN

and

moment.min.js:1 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2024-09-05 21:41:16{{ date.generic({"date":"+ 30 minutes","format":"c"}) }}, _f: undefined, _strict: undefined, _locale: [object Object]
Error
    at Function.createFromInputFallback (https://*****/wp-includes/js/dist/vendor/moment.min.js:1:3257)
    at Nt (https://*****/wp-includes/js/dist/vendor/moment.min.js:1:21589)
    at Pt (https://*****/wp-includes/js/dist/vendor/moment.min.js:1:22165)
    at W (https://*****/wp-includes/js/dist/vendor/moment.min.js:1:22248)
    at _ (https://*****/wp-includes/js/dist/vendor/moment.min.js:1:207)
    at ud.render (https://*****/wp-content/themes/pro/cornerstone/assets/js/app.react18.7.5.6.js:27:159644)
    at No (https://*****/wp-includes/js/dist/vendor/react-dom.min.js:2:77413)
    at zo (https://*****/wp-includes/js/dist/vendor/react-dom.min.js:2:77211)
    at xi (https://*****/wp-includes/js/dist/vendor/react-dom.min.js:2:120546)
    at bs (https://*****/wp-includes/js/dist/vendor/react-dom.min.js:2:108749)
#4

Can you send me the Dynamic Content that you are using?

#5

Sure, this is the DC in the End Date control:
{{ date.generic({"date":"+ 12 hours","format":"c"}) }}

There’s something going on with this control, when I enter or delete anything it isn’t immediately reflected. Only when I click out of the input it is updated. It seems to be only visual though because the live preview does update as I type.

I’m also not sure if this is even going to work that nicely because the countdown resets every time you reload the page, that’s unwanted behavior. You basically want the countdown to start when you first land on the page. If you navigate away and later return the timer should not reset.

#6

When I use + 12 hours, the countdown starts from 8 hours. That’s not quite right either :smile:

#7

I gotcha, yes that is just going to reset itself. I understand what you’re asking for now though. You could probably get around this with some fancy Twig cookie setting template. But I think we could get some controls or a prefab for this very thing.

Yes that input seems to work very funky when typing stuff in. I’ll get a fix in for that.

The + 12 hours turning into 8 hours sounds like a timezone issue, but I’m glad you brought that up because we’ll have to keep that in mind for our own solution of this.