2

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.

3
  • Can't use JavaScript for the purpose?
    – HymnZzy
    Commented Mar 22, 2016 at 11:49
  • JavaScript will show local time I need to use UTC time zone that is why I am trying to use server date.
    – Nikhil
    Commented Mar 23, 2016 at 15:51
  • 1
    You'd want to check this - stackoverflow.com/questions/8047616/…
    – HymnZzy
    Commented Mar 23, 2016 at 16:02

2 Answers 2

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/

1

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!');
}
1
  • 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
    Commented Jun 18, 2020 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.