Working with Liquid

Treepl has implemented the full standard Shopify Liquid library. See the External Resources below for relevant links.

Additional Liquid Filters

We may introduce some additional custom filters specific for Treepl, in which case we'll add them here.

String Filters

| titlecase

Converts each word in a string to Title Case (capital initial letter for each word).

For example:

{{ "This is my sentence" | titlecase }}

Result:

This Is My Sentence

Date Filters

| date

As per the standard Liquid documentation (see external resource links below), the date filter converts a timestamp into another date format.

For example; if outputting the site's time using the "now" keyword, the default format is as below:

{{ "now" | date }}

Result:

22-Feb-2020

As well as the date filter being able to recgonize well formatted dates, it will also format 'seconds since 1970' back into a date.

For example; we have calculated a difference between today's date and 14 days ago in seconds (1209600) and now want to display that result as a true date:

{% assign dateDiff = "now" | date: "%s" | minus: 1209600 %}
{{ dateDiff | date: "%v %r" }}

Result:

Saturday, February 8, 2020 10:35:41 PM

| datetime

Add the time component to the site's date:

{{ "now" | datetime }}

Result:

22-Feb-2020 10:35 PM

| date_utc

Converts a date to UTC (assuming that the date is always given in the site’s timezone)

{{ "now" | date_utc }}

Result:

2020-02-23 04:35:41Z

| date_add

Filters a given date time object (or a string convertible to a date time object) and adds (or subtracts) an amount from a defined date part based on the additional arguments passed, for example:

{% assign myDate = "2016-06-15T12:30:30.400" %}
{{ myDate | date_add: 7, "day" }}

Result:

2016-06-22 12:30:30Z


The first argument is the amount - an integer/number or a string convertible to an integer/number representing the amount of date or time units to add (if positive) or to subtract (if negative) from the input date time object

The second argument is the datePart - a string representing the date or time parts to be added or subtracted.
The possible values are:

  • "year"
  • "month"
  • "day"
  • "hour"
  • "minute"
  • "second"
  • "millisecond"

If one of the arguments is of an incompatible type or value, the filter will not alter the input.


Syntax Variations

The default syntax used throughout the system when inserting liquid property tags will use square brackets, single quotes and 'capital camel case' for the property name. See the following example:

{{this['PropertyName']}}

Although, keep in mind that all property names, including custom properties added in Custom Modules, are aliased to a single word all in lowercase (flat case) for the purpose of referencing that data via Liquid.
The 'capital camel case' used above is for readability only as liquid property tags are not case sensitive.
You can choose to use an upper or lowercase syntax here.

Furthermore, as all property names are aliased to a single 'flat case' word, you can optionally use a shorthand method for referencing your property names. Such as the example following:

{{this.PropertyName}} OR {{this.propertyname}}

Notice the removal of the square brackets and single quotes and the addition of the dot (.) separator.
The dot separator is required wherever the square bracket syntax is NOT used.

The square brackets and single quote syntax is part of the liquid syntax for scenarios where property names have spaces included. This is not required in Treepl.

Empty Values (null and nil)

Often scenarios arise where properties will have no value (empty), or are not present in the Liquid output and you may want to check for this condition in your Liquid code.

In Treepl's .NET implementation of Liquid, null is used as a special value when a value is empty or a property is not present - both conditions will resolve to a null result. As opposed to the Shopify's Ruby implementation using nil.

Therefore, a reliable way to check for all empty or not present conditions can be achieved as per the following example, where we are rendering something if the property is NOT equal to (!=) null (or an empty value):

{% if this['PropertyName'] != null %}	
    // Render something here
{% endif %}

For more info on null/nil and empty values, see the External Resources below for relevant links.



Related Articles

  • {{ this }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs specific...
  • {{ request }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs various...
  • {{ liquidContext }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs a...
  • {{ member }} object
    This liquid object will output the Member's details of whom submitted a Form. You can...
  • {{ workflow }} object
    This liquid object will output the Workflow details of a submitted Form. You can use...

External Resources


Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.


Questions?

We are always happy to help with any questions you may have.
Send us a message at support@treepl.co and we will consult you as soon as possible.