Date Manipulation in Treepl CMS/Liquid

Advanced Development
1

Is there an easy way to do date comparisons or add/subtract days in Treepl CMS/Liquid?

It was very easy to do in Business Catalyst. See: BC Liquid Filters

I need to be able to list all Items in a Custom Module that were created within the last 14 days. That is 14 days from whenever the page is loaded. I also need to display that date, 14 days ago, whatever it was.

I can find all the Items and list them by converting the current date to ‘seconds since 1970’ & subtracting 14 days (14 * 24 * 60 * 60).

{% assign newStartUnix = 'now' | date: '%s'| minus: 1209600 %}

I can convert the Release Date for each Item to ‘seconds since 1970’:

{% assign thisDateUnix = this['ReleaseDate'] | date: '%s' | plus: 0 %}

That allows the date comparison.

I would like to convert the value in variable newStartUnix back to a date.

I thought something like this might work but it doesn’t:

{% assign newStartDate = newStartUnix | date: '%e-%b-%Y' %}

I’ve tried all sorts of different conversion strings that are supposed to work with Shopify Liquid without success.

The code doesn’t throw an error - it just renders nothing.

This issue is on the public backlog.

Does anyone know of a work around until this is provided?

The ugly solution for me at the moment is to compare the release dates & find the earliest that meets the last 14 days criterion - crude and not particularly exact.

Thanks

2

I think until we get date comparisons in Liquid its probably not possible. But what about using Javascript?
Is newStartUnix simply the date 14 days ago? is that what you want to display?
In this case using JS something like in this article (but minus your 14 days in seconds):


Or for more advanced date stuff, use moment.js if it’s just for display purposes.
But maybe I’ve missed something… working with dates confuses me :slight_smile:

3

Thats exactly what I’m doing at the moment Adam. I have the date comparison working properly in Liquid. Once the date is in seconds it’s just a numeric comparison. The date (2 weeks ago) displayed on the page doesn’t need to be rendered by Liquid. But it should come from the same calculation so any change to the comparison updates the list of Items as well as the heading.

4

Ah, cool.
The JS could still be feed the liquid variable for the 14 days (or whatever it might change to) so it could all still work together from the same calcs I guess.

5

Has date comparisons in liquid been added to the back log? I can only see this in the backlog: https://treepl.co/public-backlog-state/request/update-liquid-to-include-date-time-filters But nothing about comparisons. Can you get this added to this item adam?

6

Hey @James. I’ll flag @Peter-Schmidt in on this for any backlog adjustments.
I’m sure all the Liquid date manipulation stuff is on Treepl’s internal roadmap anyway, but just in case let’s make it super clear we need some better date functionality.

1 Like
7

BC’s Liquid Date Filters allow you to add add or subtract units of time - year, month, days hour, minute, second & millisecond).

BC’s Liquid Date Filters don’t require you to convert to ‘seconds since 1970’ to do any comparisons.

You can handle dates or date+time.

All sorts of conversion/formatting switches for Date & Time too.

Date/time can be compared using the Liquid Mathematical Operators == != > < >= <= with the Logic Tags.

8

@peter.medbury It’s not exactly what you’re looking for but it might be useful in your quest.
I’m using it to calculate the days ago for blog posts http://prntscr.com/mybpup

{% comment %} convert our dates to Number of seconds since 1970-01-01 00:00:00 UTC {% endcomment %} {% assign dateStart = this['ReleaseDate'] | date: '%s' %} {% assign nowTimestamp = 'now' | date: '%s' %} 
{% comment %} difference in seconds {% endcomment %}
{% assign diffSeconds = nowTimestamp | minus: dateStart %}

{% comment %} difference in days {% endcomment %}
{% assign diffDays = diffSeconds | divided_by: 3600 | divided_by: 24 %}
{% assign diffMonths = diffSeconds | divided_by: 3600 | divided_by: 24 | divided_by: 30.42 | round %}

{% if diffDays > 365 %} 
{{ diffMonths | divided_by: 12 | round }}  year{% if diffMonths > 12 %}s{% endif %} ago
{% elsif diffDays > 30.42 %} 
{{ diffMonths }}  month{% if diffMonths > 1 %}s{% endif %} ago
{% else %}
{{ diffDays | round }}  day{% if diffDays > 1 %}s{% endif %} ago {% endif %} <span> {{this['ReleaseDate'] | date: " %b %d, %Y"}}<span> </div>
9

Thanks Alex

I want to list all Items that were created in the last ‘x’ days.

The easiest I could see was:

  1. a snippet to set the number of days - only 1 place to change if the interval changes:

{%assign intervalInDays = 14 %}

  1. code on the page to derive the date then, in seconds:

    {% component type: “snippet”, alias: “intervalindays” %}
    {% assign intervalInSeconds = intervalInDays | times: 86400 %}
    {% assign checkDateInSeconds = ‘now’ | date: ‘%s’ | minus: intervalInSeconds %}

  2. code in the Custom Module List Layout to do the comparison:

    {% assign thenInSeconds = this[‘ReleaseDate’] | date: ‘%s’ | plus: 0 %}
    {% if thenInSeconds > checkDateInSeconds -%}
    Item data to be displayed
    {% endif %}

  3. Javacript to show the date, ‘x’ days ago, that the Item Release Date was checked against:

    function checkdate() {
    var monthNames = [“January”, “February”, “March”, “April”, “May”, “June”,
    “July”, “August”, “September”, “October”, “November”, “December”
    ];
    var d = new Date();
    d.setDate(d.getDate() - {{intervalindays}});
    var e = d.getDate();
    var b = monthNames[d.getMonth()];
    var Y = d.getFullYear();
    if (e < 10) {
    e = ‘0’ + e;
    }
    d = e + ‘-’ + b + ‘-’ + Y;
    document.getElementById(“intervalDaysAgo”).innerHTML = d;
    }

Which produces what I want:

45%20am
Screen Shot 2019-03-16 at 5.39.45 am.jpg1704×934 336 KB

It works but the Liquid Date Filters in BC were easier to implement. In the meantime Date Filters are in the Public Backlog.

1 Like
10

I have added it here: https://treepl.co/public-backlog-state/request/date-manipulation

I have used the wording from @peter.medbury’s post, let me know if we need further details in the request and I will add them asap :slight_smile:

11

Thanks @Peter-Schmidt - much appreciated

12

Hi @peter.medbury.
An update, which was initially missed in the v4.0 release notes, has partially addressed this issue.
I’ve now updated the release notes but the update is:

Now Liquid can convert numbers to date (interpreted as number of seconds from 1st Jan 1970).

For example:
{% assign newStartDateSeconds = ‘now’ | date: ‘%s’ | minus: 1209600 %}
{% assign newStartDate = newStartDateSeconds | date: ‘%e-%b-%Y’ %}

So you should be able to convert your newStartUnix into a date via Liquid now :slight_smile:

1 Like
13

Thanks Adam.

Works exactly as I had hoped.

Much easier to use a single Liquid filter than have to worry about separate JS code.

These guys just keep delivering!

1 Like