Streaming live at 10am (PST)

Referencing CMS field in custom code - Error

Hey everyone,

I’m using a custom timer, and instead of the static data used in the quotations below, I wanted to use a CMS field, which also stores data in the exact same format.

However, when I add the field, it doesn’t seem to work :confused: am I referencing the CMS field correctly? I’ve tried with and without quotations. (Apologies I don’t know Javascript and this is the only custom code I needed for my site!

Custom code

Custom code + CMS field

Many thanks!
Josh

Please share a published URI to a example collection item page so the code can be inspected.

Thanks so much

Link to site:
https://dopelivestreams.webflow.io/

Link to the collection field I’m trying to reference
https://dopelivestreams.webflow.io/livestream-list/test

Apologies for the scrappyness. This is very much a WIP so i can get the custom code working, It’s a countdown timer, which will display to users when a new DJ set livestream will be available. You can see the countdown timer at the top of the page.

This is the custom countdown code
https://www.w3schools.com/howto/howto_js_countdown.asp

That link throws a 404.

Hey, sorry about that, i think i have misunderstood how this is all set up.

On my main page, I’m styling the collection list itself as the setup of this site is quite a minimal product, and don’t have a template for a ‘DJ set card’ which you can see in the basic form here

This is an example of the collection page values, with the Date/Time at the bottom. When I look at the URL of this, it’s empty (As I imagine I haven’t got a template?) So I may have misunderstood your request apologies :sweat_smile:

I believed that I’d be able to reference the ‘Date/Time of stream’ field in the basic custom code at the top of this thread but really unsure why it doesn’t work as it’s super simple.

Really appreciate your help!

Since custom code isn’t available on a page until it is rendered, I was hoping to view the published page you were having an issue with and work back from that.

Oh apologies for the confusion.

The custom code is available here on the main page:
https://dopelivestreams.webflow.io/

The site is really basic so it’s easy to find. The problem is with the timer at the top of the page ‘Streaming in 4d 2h 3m’

Many thanks

Now I can see the code on the published site but also need to see the read-only link to the project.

Sure thing - here you go
https://preview.webflow.com/preview/dopelivestreams?utm_medium=preview_link&utm_source=designer&utm_content=dopelivestreams&preview=e991494ff044d85962ee8d8aba1d0961&mode=preview

Really appreciate it!

We want to see the value that is rendered from the collection field. Add this to your embed so it can be seen while testing, then publish.

Sure thing - I made this change and published. You can see that ‘Value - Apr 15, 2020’ gets displayed but replaced by the timer after a second. Here’s a screenshot.

It seems that the value displayed ‘Apr 15, 2020’ is different from the value in the CMS field, which includes the time. Do you know why that may be different? or why the time isn’t displaying?

Undo that, place the bind field in the code as follows.

Hmm that’s weird it seems to be working now!

However, it still doesn’t seem to carry the time over… it count’s down to the date (In the CMS this is set to tomorrow, which for me is in 9 hours in the UK).

Do you know why webflow may not be displaying the time? Really appreciate all this.

The JavaScript Date object supports a number of UTC (universal) methods, as well as local time methods. UTC, also known as Greenwich Mean Time (GMT), refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed.

If you are wanting to show the countdown to a time in a specific timezone then you will need to leverage something like Moment Timezone as part of your calculation. https://momentjs.com/timezone/docs/

You could simply leverage this simple jQuery countdown plugin and include Moment Timezone as in this example -> http://hilios.github.io/jQuery.countdown/examples/timezone-aware.html

I’m all booked up today but this should get you what you need.

1 Like

You have gone above and beyond. Thank you SO much for your help!

Even though this looks simple, I’m still unsure of how to add the custom code and then add the CMS field inside. Would I be able to book your services to help at a time when you’re free? :slight_smile:

Many thanks!

Sure thing. Nice to meet you on our call.