jQuery to hide Countdown timer when reaches the end

Technical Q&A
1

I have a Countdown timer in my home page and I am trying to find a way to hide it when it reaches the time.

I had to build the countdown in a section so it can be editable under customise. And now I am struggling to find a way to hide this section at the end of the countdown

Here is my HTML and function for the countdown:

{% assign countdown_time = section.settings.countdown_time %}
{% assign countdown_date = section.settings.countdown_date %}
{% assign countdown_month = section.settings.countdown_month %}
{% assign countdown_year = section.settings.countdown_year %}

I tried to do a function inside the script, but it’s not working.

function hideCountdown(){
      var endTime = new Date( "{{ countdown_date }}" + "{{ countdown_month }}" + "{{ countdown_year }}" + " {{ countdown_time }}" + " GMT+01:00");
      endTime = (Date.parse(endTime) / 1000);
      if endTime == true {
        $("#thecountdown").hide();
      }
 };

My friend told me that I could sort it out with jQuery and the hide() method. However I am not very jQuery experienced and I tried different options but nothing seems to work, I am not sure if I am writing the right syntax.

Can someone help me?

2

Hi @vthelamb ,

Use This code for timer :-


<script type="text/javascript">
function makeTimer() {
var endTime = new Date( "{{ countdown_date }}" + "{{ countdown_month }}" + "{{ countdown_year }}" + " {{ countdown_time }}" + " GMT+01:00");
// var endTime = new Date("29 September 2022 9:56:00 GMT+01:00");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
 if(endTime == true) { $(".home-countdown").hide(); }
$('.js-banner-timer-days').html(days);
$('.js-banner-timer-hours').html(hours);
$('.js-banner-timer-minutes').html(minutes);
$('.js-banner-timer-seconds').html(seconds); 
}
setInterval(function() { makeTimer(); }, 1000);
</script>

Before adding this code to the theme, you should make a backup of the theme.

3

Hi @MandasaTech ! Thanks for your suggestion, unfortunately it did’t work :disappointed_face: The countdown is still showing up and counting -1 day now. That’s why I thought I had to write a function outside the makeTimer function. But I am not sure.

4

Hi @MandasaTech
Following your logic, I changed sightly the code and worked!!!

if(days == "0" && hours == "00" && minutes == "00" && seconds == "00") { $("#thecountdown").hide(); }

And worked!!! The countdown is hid! However, when I refresh the page, it comes back!! So I just need to find a way of the hide() to be absolute. Thanks anyway!! Your suggestion led me to the solution!

5

After some thinking and testing, I managed to get the answer.

Code updated:
6

I’m running the same timer but wanted to see if anyone could tell me how to hide it server side? meaning not use CSS to hide it from the frontend but complete filter it out from rendering on the front end in a liquid filter?