Contributors:

{{ liquidContext }} object

This Liquid object is globally accessible in every liquid template or layout and outputs a combination of the this and request Liquid objects as well as any Liquid variables available to the layout it is placed in.

{{ liquidContext }}

Below is a live example of the {{liquidContext}} output for this very documentation article, where a Liquid variable called sampleVar has been assigned in the content.
You'll notice both the request and this data collections are output along with the sampleVar variable that was included in this articles content.

The main purpose of this Liquid object is to assist with easier access to Liquid data while developing your site. See further below for examples of accessing this data during development.

Liquid Output

{
    "empty": "",
    "blank": "",
    "siteglobals": {},
    "si": {},
    "this": {
        "Id": 2072,
        "Url": "/sample-page",
        "ParentId": -1,
        "LastUpdatedDate": "2020-06-17T00:38:29",
        "Name": "Sample Page",
        "UrlSlug": "sample-page",
        "Enabled": true,
        "ReleaseDate": "2020-06-16T00:00:00",
        "ExpiryDate": "2099-12-11T13:00:00",
        "Weighting": 0,
        "Description": "HTML Page content here...",
        "ItemTags": "",
        "Author_Name": "",
        "Author_Url": "",
        "Author": "",
        "SEOTitle": "",
        "MetaTitle": "",
        "MetaDescription": "",
        "ShowPageForSearchEngine": false,
        "CanonicalLink": "",
        "EnableAMP": false,
        "AMPContent": "",
        "CodeEditor": true,
        "ExternalId": 0,
        "SocialMetaTags": "",
        "OpenGraphProperties": "",
        "SeoPriority": "0.5",
        "DisableForSiteSearch": false,
        "CreatedByMemberId": 0,
        "ItemCategories": "",
        "ItemCategoryIdList": "",
        "SKUCode": "",
        "SiteSearchKeywords": "",
        "FtpFullPath": "Content\\Pages\\sample-page.html",
        "ParentName": "",
        "ParentUrl": "",
        "TemplateName": "Inner Template",
        "IsHome": false
    },
    "request": {
        "request_url": {
            "href": "https://sample-site.webinone.com/sample-page",
            "origin": "https://sample-site.webinone.com",
            "protocol": "https",
            "hostname": "sample-site.webinone.com",
            "path": "/sample-page",
            "params": {}
        },
        "cookies": {
            "asp.net_sessionid": "kzbvu1ka2zce40h4mm1y1dxr",
            "nice": "false",
            "__stripe_mid": "94001d58-a321-4316-aeb6-70c88e7d5f0c",
            "current.user.identifier": "6aea8081-01c2-45a6-89fd-f286c368cb65",
            "_ga": "GA1.2.159221980.1591595259",
            "__zlcmid": "ydjCSxxleWI2oV",
            "_gid": "GA1.2.1413351276.1592270113",
            "cartid": "7a3317e3-b812-4611-b49a-c2907c13852f"
        },
        "request_data": {
            "ip": "111.222.333.444",
            "is_mobile": 0,
            "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36",
            "referrer": ""
        },
        "is_logged": false,
        "currentmember": "",
        "device_type": "Desktop",
        "timezone": {
            "label": "(UTC-06:00) Central Time (US & Canada)",
            "offset": -5.0
            }
        },
        "pagecontent": "--YOUR PAGE CONTENT--",
        "--yourCustomCollection/s--": "--yourCollectionContent--"
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

As an example of rendering a desired value to the page you could use the following Liquid:

{{ liquidContext.this.url }}

This would output the value /liquid/liquidcontext-object to the page based on the above data.

Viewing Data while Developing

It is often desirable to see all the data that is available to you on a page while developing your applications and there are two common techniques for doing this.

1. Rendering JSON to the Page

You can quickly and easily render the full JSON output directly to the page you are working on in order to view all the data and its structure in an easy to read format.
Simply wrap your desired Liquid object in <pre> tags like so; <pre>{{liquidContext}}</pre>

A JSON representation of the available data will be rendered to the page similar to the output examples above.

This of course is a temporary technique as you would not want to leave the JSON data visible on the page.

2. Rendering JSON to the Console

Perhaps a cleaner and more persistent way of viewing this data while in development, is to log the JSON output to your browser's console (in the browser's Developer Tools).

To do this, add some javascript code to your template file (just before the closing </body> tag) like this:

<script>
    console.log({{liquidContext | strip_html}});
</script>

What this will do is output the JSON data into a structured data tree in your browser's Developer Tools console.

You can actually use this method to log any Liquid data to the console, such as a custom collection, for example:

<script>
    console.log({{myCustomCollection | strip_html}});
</script>

You might notice the Liquid filter | strip_html added here. This is optional, however, in some cases the JSON data will contain HTML code and this can break the Javascript, causing a scripting error.
So, keep in mind that, when using this filter, any fields containing HTML code in your JSON will not actually show the HTML in the console, however, the data is still there and accessible via Liquid when rendering to the page.

Remember to remove this code for production as it could pose a data security risk and it is best practice not to leave console logs in your scripts.