{{ this }} object
This Liquid object is globally accessible in every liquid template or layout and outputs specific data relating to the item being render.
{{ this }}For example, if {{this}} is placed in a Page content area it will render the liquid data of that page. Likewise if placed in a Module content field, it will render the liquid data available for the specific module item being viewed.
Liquid Output
Below is a live example of the {{this}} output for this very documentation article.
{
"Id": 2324,
"Name": "{{ this }} object",
"Url": "/liquid/this-object",
"Url_List": [
"/liquid/this-object"
],
"UrlSlug": "this-object",
"ParentId": 1881,
"ParentId_List": [
1881
],
"ParentName": "Liquid Objects & Usage",
"ParentUrl": "/liquid",
"TemplateName": "Docs Template",
"Module_Alias": "DocumentationPost",
"Module_ID": 1870,
"Enabled": true,
"ReleaseDate": "2018-08-03T23:00:00",
"ExpiryDate": "2099-11-29T00:00:00",
"SiteSearchKeywords": [],
"Description": "<p>This Liquid object is globally accessible in every liquid template or layout and outputs specific data relating to the item being render.</p>\n\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\n<p>For example, if <code>{{this}}</code> is placed in a Page content area it will render the liquid data of that page. Likewise if placed in a Module content field, it will render the liquid data available for the specific module item being viewed.</p>\n\n{% component type: \"snippet\", alias: \"section_output\" %}\n<p>Below is a live example of the <code>{{this}}</code> output for this very documentation article.</p>\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{this}}\", lang: \"json\" %}\n</section>\n\n\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\n<p>As an example of rendering a desired value to the page you could use the following Liquid:</p>\n\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\n\n<p>This would output the value <code>/liquid/this-object</code> to the page based on the above data.</p>\n\n{% component type: \"snippet\", alias: \"section_viewing_data_while_developing\", object: \"this\", filter: \" | strip_html\" %}\n</section>\n\n\n",
"Weighting": 985,
"DisableForSiteSearch": false,
"CreatedByMemberId": "0",
"ItemCategories": [
"Sample Category"
],
"ItemCategoryIdList": [
1346
],
"ItemTags": [
"Liquid Usage"
],
"Author": 0,
"Author_Name": "",
"Author_Url": "",
"Item_Rating": 0,
"Active": true,
"IgnoreUpdates": true,
"UpdatesLog": "",
"ExternalResources": "",
"AdditionalRelatedArticle": 0,
"AdditionalRelatedArticle2": 0,
"Authors": "2418",
"ShowPageForSearchEngine": true,
"MetaTitle": "",
"SEOTitle": "",
"MetaDescription": "",
"CanonicalLink": "",
"SocialMetaTags": "",
"SeoPriority": 0.0,
"EnableAMP": false,
"AMPContent": "",
"OpenGraphProperties": {
"title": "",
"type": "",
"url": "",
"locale": "",
"image": ""
},
"ExternalId": 0,
"Params": {
"type": "snippet",
"alias": "section_output",
"data": "this",
"lang": "liquid",
"name": "SECTION Output",
"content": "<section id=\"secOutput\">\n <h2>Liquid Output</h2>",
"enabled": true,
"object": "this",
"filter": " | strip_html"
}
}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:
{{ this.url }}
This would output the value /liquid/this-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>{{this}}</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({{this | 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.
Related Articles
- Liquid Objects & Usage
Working with Liquid
WebinOne has implemented the full standard Shopify Liquid library. See the External Resources below for... - Liquid Objects & Usage
Liquid Filters
Liquid Filters allow you to modify the output of a Liquid object, whether that's adding something to it, removing something from it, executing a calculation, creating an array, or a wide variety of other powerful functions. - Liquid Objects & Usage
{{ request }} object
This Liquid object is globally accessible in every liquid template or layout and outputs various... - Liquid Objects & Usage
{{ liquidContext }} object
This Liquid object is globally accessible in every liquid template or layout and outputs a... - Liquid Objects & Usage
{{ siteglobals }}
This liquid object will output any custom configure Site Information data (found in the Admin's main menu under 'Settings' > 'Site Information'). - Liquid Objects & Usage
{{ member }} object
This liquid object will output the Member's details of whom submitted a Form. You can... - Liquid Objects & Usage
{{ workflow }} object
This liquid object will output the Workflow details of a submitted Form. You can use... - Learning Liquid
Part 1: Introduction to Liquid
This free online course covers every aspect of using the Liquid templating language in WebinOne - from the very basics right through to advanced implementations.
You’re welcome. - Learning Liquid
Part 2: Liquid in WebinOne
In this part of the course we’ll explore how Liquid is implemented in treepl CMS and the overall concepts on using it to harness your website data. - Learning Liquid
Part 3: Using Liquid Filters
In this part of the course we’ll explore using Liquid Filters to transform and manipulate the display of your WebinOne website data. - Learning Liquid
Part 4: Advanced Liquid Tags - Liquid Components
domain_settings
This module component retrieves settings associated with the current domain, or optionally from another specified domain configured in the site instance. - Liquid Components
json
This component parses JSON data for use in Liquid, either from a remote source, a local file, or string. - Extras
Migrating from Liquid 2.0 to 3.0
This article describes differences and possible required actions for migrating from the Liquid rendering engine v2.0 to v3.0.
External Resources
There are currently no external resources available.
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.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@webinone.com and we will consult you as soon as possible.