Custom timers only working once per page

Solved
Highlighted
New Member
3 0 0

Hello guys,

 

I just coded custom timers for specific use but I am in front of an issue. My timer text is only showing once per page, on the first timer, although I have 3 timers on the same page (featured products).

 

Here's my script updating the timers (included in theme.liquid for debugging purposes)

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date()
countDown.setHours(23,59,59)
x = setInterval(function() {
  let now = new Date().getTime();
  distance = countDown - now;

  $('#hours').each(function() {
    $(this).text(("0" + Math.floor((distance % (day)) / (hour))).slice(-2));
  })

  $('#minutes').each(function() {
    $(this).text(("0" + Math.floor((distance % (hour)) / (minute))).slice(-2));
  })

  $('#seconds').each(function() {
    $(this).text(("0" + Math.floor((distance % (minute)) / second)).slice(-2));
  })

}, second)

And here the HTML I am including on product-price.liquid:

<div class="container">
  <h5>Sale ends at Midnight!</h5>
  <div class="countdown-timer">
    <span class="time" id="hours"></span><span class="separator">:</span><span class="time" id="minutes"></span><span class="separator">:</span><span class="time" id="seconds"></span>
  </div>
</div>

Theme: Debut

 

Do you guys have any idea on why it is only showing text on the first timer?

0 Likes

Success.

Shopify Partner
555 109 131

Hello 

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date()
countDown.setHours(23,59,59)
x = setInterval(function() {
  let now = new Date().getTime();
  distance = countDown - now;

  $('.hours').each(function() {
    $(this).text(("0" + Math.floor((distance % (day)) / (hour))).slice(-2));
  })

  $('.minutes').each(function() {
    $(this).text(("0" + Math.floor((distance % (hour)) / (minute))).slice(-2));
  })

  $('.seconds').each(function() {
    $(this).text(("0" + Math.floor((distance % (minute)) / second)).slice(-2));
  })

}, second)

<div class="container">
  <h5>Sale ends at Midnight!</h5>
  <div class="countdown-timer">
    <span class="time hours"></span>
    <span class="separator">:</span>
    <span class="time minutes"></span>
    <span class="separator">:</span>
    <span class="time seconds"></span>
  </div> 
</div>
Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
3 0 0

Oh yes it works! Thank you, I knew it was just a detail!

0 Likes