topic Re: Countdown on Landing Page (Marketing Starter) in CMS Development

Countdown on Landing Page (Marketing Starter)

CarolinKranz — Thu, 27 Feb 2020 11:39:51 GMT

We want to integrate a Countdown on a Landing Page. While we are not able to implement JavaScript in the Drag and Drop Editor in this License, has anybody a creative solution how we are able to implement a Countdown in the maketing starter version?

Thanks.

Carolin

Re: Countdown on Landing Page (Marketing Starter)

DanielSanchez — Thu, 27 Feb 2020 12:28:12 GMT

Hi @CarolinKranz

U can create one module in Design Tools (Design Manager) to be avaliable to insert in your landing pages templates.

Is easy to create if you have knowledge for insert one JS code how you mention in your question.

Look this free course in HubSpot, when teaches how create modules and templates: https://academy.hubspot.com/courses/cms-for-developers

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

Re: Countdown on Landing Page (Marketing Starter)

CarolinKranz — Thu, 27 Feb 2020 13:35:22 GMT

But in marketing starter version I have no access to the design manager. Thats the problem.

Re: Countdown on Landing Page (Marketing Starter)

SSN — Thu, 27 Feb 2020 17:24:01 GMT

You need also "Hubspot CRM" to create modules layouts etc.

Let me know if you have query

feel free to contact me https://www.linkedin.com/in/subhash-negi-0b4527106/

Re: Countdown on Landing Page (Marketing Starter)

DanielSanchez — Thu, 27 Feb 2020 17:31:32 GMT

Hi @CarolinKranz

Unfortunately you you need upgrade plan for create modules and templates.

I dont know if you can use marketplace to buy and download templates, but in Marketplace, have templates with countdown. Look: https://app.hubspot.com/marketplace/407592/products?searchTerm=countdown

If dont have access, you need upgrade plan for this too.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

Re: Countdown on Landing Page (Marketing Starter)

DevenD — Sat, 20 Apr 2024 20:49:44 GMT

I know this is years later, but just for the sake of anyone searching for the fix on a similar issue, you can actually use hubl and unixtimestamps to solve this. For example:

{# The values here are not specific, so you can use non-abbreviated,translated or whatever #}
{% set allDaysOfWeek = ["Sun", "Mon","Tues","Wed","Thur","Fri","Sat"] %}

Next, we basically we convert the date to a unix timestamp (# of milliseconds since January 1st 1970 when the standard was established), and convert it into days which we then mod by 7 (days in the week). "%" aka "mod", gives the remainder after diving by the number it's given (i.e. 10%3 == 1). The resulting value is the number of weekdays past that initial day: Jan 1st 1970, which was a Thursday (thus the + 4 before modding, Thursday being 4 days after Sunday, the first element in the daysOfWeek array).

{% set dayOfWeek = allDaysOfWeek[((((module.date|unixtimestamp)|int|float|divide(1000)|divide(60)|divide(60)|divide(24) )|round|int + 4)%7)] %}

The result:

<p>{{ module.date|format_date('long') }} is a {{ dayOfWeek }}</p>

Renders: February 1, 2024 is a Thursday

But that's based on the assumption that you're usung hubspots date-picker.
What if you don't have your date in that format or instead want to find the time between two dates?

Then first you'll need to convert both dates to unix timestamps before you subtract the earlier from the later date. For instance, how about a 'Days til election voting' counter? (static of course, you'll need a bit of javascript if you want an animated one. Not much though)

{# Converting date with hubl filters so it can be 'math-i-fied'. For instance, days til election day: #}
{% set currentDate = local_dt|unixtimestamp %}

{# Future Date - example of formating date to unix timestamp #}
{% set electionDay = ("2024-11-05T00:00:00+0530")|strtotime("yyyy-MM-dd'T'HH:mm:ssZ")|unixtimestamp %}
{# The "2024-11-05T00:00:00+0530" here is being converted using the |strtotime filter by passing it the format that your input date is using
In this case ("yyyy-MM-dd'T'HH:mm:ssZ") #}

{% set timeDiff = ((electionDay - currentDate)|int|float|divide(1000)|divide(60)|divide(60)|divide(24))|round|int %}

*You can find a list of all the time patterns here or use an converter if your unsure what to pass the filter: https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html

The result:

<p>{{ timeDiff }} Days til Voting!</p>

Renders: 198 Days til Voting!

Adding hours/minute/seconds is as easy as simply stripping off the conversions from right to left --> |divide(24) [hours in a day]--> |divide(60) [minutes in an hour] --> |divide(60) [seconds in a minute] --> |divide(1000) [milliseconds in a second]. Do note (as previously mentioned) that these will be static numbers only updated when refreshing the page.