Having difficulty with a JavaScript countdown timer for sales.

Solved
Excursionist
36 5 8

(Repost because I still need help. Thought maybe this board could offer some advice?)

Hi, I have this code I yoinked from w3schools because I'm trying to learn JavaScript, but I'm confused on something.

<p id="countdowntimer"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Feb 25, 2020 12:58:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="countdowntimer"
  document.getElementById("countdowntimer").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdowntimer").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

So, this timer is in a section on the front page and it coincides with a discount we have set on a certain group of products. For example, let's say for one week all pink items are 50% off-- I stick those pink items into a product collection together, set up an automatic discount in the Shopify admin that effects that product collection, and I set it to expire on a certain time. In the Javascript, I am setting that discount expiration time as the countdown time.

 

Here's the problem. The Javascript is only reading from local time, right? In the Chrome devtools I used the geolocation sensor spoof to act like I was somewhere else in the world, and the timer changed. I want the timer to be the same everywhere in the world to reflect when the discount actually ends. No matter where you are, if the discount expires at midnight Pacific Time, the countdown needs to reflect that.

 

How can I get this to work? Please be gentle with me. I know it's a really, REALLY clunky process, but I'm a basic beginner and jack-of-all-trades employee put in charge of the site, and I need it out as soon as possible. I'm planning on finding some way to streamline the output later.

 

Thank you for your help.

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships-- let me know if you need someone to help out with design, product management, social media, marketing, or SEO!
0 Likes
Highlighted

Success.

Shopify Partner
95 19 21

Hey threed,

 

You can try specifying the time zone difference when creating the date.

 

Something like this:

var countDownDate = new Date("Feb 25, 2020 12:58:00 -0800").getTime();

Where -0800 is the PST difference from UTC.

 

Let me know how that goes.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
1 Like
Highlighted
Excursionist
36 5 8

Thanks for the help! I think this is what I'm looking for.

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships-- let me know if you need someone to help out with design, product management, social media, marketing, or SEO!
0 Likes