Shopify Time difference

Question

I am newbie to shopify, I have to display a time counter up-to 9 PM everyday. The logic includes to deduct current time from specified time and the difference time will display as counter(remaining time).

I am able to retrieve current timestamp in shopify using the code below

{% assign timestamp = 'now' | date %}

Now I have a date "21-03-2016 21:00:00" and wants to convert in timestamp but not able to get the solution.

Let me know if any one can help me in this. Thank You.

JavaScript will show local time I need to use UTC time zone that is why I am trying to use server date. — Nikhil, Mar 23 '16 at 15:51
You'd want to check this - http://stackoverflow.com/questions/8047616/get-a-utc-timestamp-in-javascript — HymnZzy, Mar 23 '16 at 16:02

score 1 · Answer 1 · answered Jan 10 '19 at 14:05

1

Note that the value will be the current time of when the page was last generated from the template, not when the page is presented to a user if caching or static site generation is involved.

http://shopify.github.io/liquid/filters/date/

answered Jan 10 '19 at 14:05

Maxim Zasorin

176
1
2
7

score 1 · Answer 2 · answered Jan 10 '19 at 17:03

This is probably best done using Javascript, not pure-Liquid. You generally want your pages to be as cache-able as possible for Shopify's servers to keep loading times as lean as possible.

You will want to use Liquid to compensate for timezones, however. You can get the store's configured timezone and drop that into a Javascript variable:

var timezone = {{ 1 | date: '%z' | json }};

The above liquid statement takes some arbitrary input, runs it through the date filter and outputs only the timezone component configured for that store (using '%z'), then runs that through the json filter to ensure that whatever the output will always be javascript-legal.

Now that you know your timezone offset, you can assemble your timer logic in Javascript using all your normal date/time tricks. For example:

var now = new Date();
var nowStr = now.toISOString();  // Output format: '2019-01-01T00:00'

// Chop off the time portion, then append your desired time & store timezone
var closingTimeStr = nowStr.split('T')[0] + 'T21:00' + timezone;

// We make a new date using today's date/time string
var closingTime = new Date(closingTimeStr);

// And now we can do math based on the difference
var difference_ms = closingTime - now;


if(difference_ms > 0){
  // Parse the difference into hours, minutes and seconds if a positive amount of time remains.  Writing a better parsing function is left as an exercise for the reader. 

  var hours = parseInt(difference_ms / (60 * 60 * 1000) );
  difference_ms %= (60 * 60 * 1000);

  var minutes = parseInt(difference_ms / (60 * 1000) );
  difference_ms %= (60 * 1000);

  var seconds = parseInt(difference_ms / (1000) );

  console.log('Hurry down! Closing in ' + hours + ' hours, ' + minutes + ' minutes, and ' + seconds + ' seconds!');
} else {
  // Show appropriate message if we're out-of-bounds
  console.log('Closed for today - try again tomorrow!');
}

You should probably use the `'now'` feature in the timezone. i.e: ```var timezone = {{ 'now' | date: '%z' | json }};```. Otherwise, you won't get accurate current timezone info with respect to daylight savings time. Using `'now'` will give you the current time zone. For example, EST vs EDT (Eastern Standard Time vs Eastern Daylight Time). — furnaceX, Jun 18 '20 at 16:30

Shopify Time difference

2 Answers2