snippet

This component renders the contents of a Snippet (similar to Content Holders in BC).

{% component type: "snippet", alias: "<snippet_alias>" %}

Parameters and Options

type

snippet

This is the name of the entity that needs to be used for the component retrieving function.

alias

<alias_name>

The alias name of the module.

collectionVariable

<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.
If using this parameter, the module will not render its layout.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example is for a Snippet with some content relating to the topic HTML but is otherwise the default data you will get from this Component.

{
  "Parent": {
    "Value": {
      "Id": 1950,
      "ModuleLayoutName": "Detail",
      "Enabled": true,
      "ReleaseDate": "2018-08-04T23:00:00",
      "ExpiryDate": "2099-11-30T00:00:00",
      "Weighting": 1000,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{\"31e8bc20-c904-481a-b47e-95304c4edcdc\": \"\", \"8aa52748-df22-4986-8131-f6a9ab1f048a\": 0, \"a11635f8-fa31-49d5-a0c0-2fb45d52caec\": \"<ul><li><a href=\\\"/demo-cs/snippet-example\\\" rel=\\\"noopener noreferrer\\\" target=\\\"_blank\\\">Basic Snippet Demo</a></li></ul>\", \"b0ce44c2-314b-4ab2-b829-6baeb33b6a0e\": true, \"b2b960ff-e003-4b75-b760-9559e127e0b2\": true, \"cb88f1ea-ee57-498c-8781-a47e753b4c0e\": 0, \"e8ef1eaa-93bd-455d-b0ce-0cb5ea9c35a1\": \"2418\"}",
      "LastUpdatedDate": "2021-06-12T01:53:19",
      "Module_Alias": "DocumentationPost",
      "Module_Id": 1870,
      "ParentName": "Liquid Components",
      "ParentUrl": "/component-types",
      "Name": "snippet",
      "UrlSlug": "snippet",
      "Url": "/component-types/snippet",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2127,
      "Url_List": [
        "/component-types/snippet"
      ],
      "ParentId_List": [
        2127
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": "{\n  \"title\": null,\n  \"type\": null,\n  \"url\": null,\n  \"locale\": null,\n  \"image\": null\n}",
      "SeoPriority": 0.0,
      "Description": "\n<p>This component renders the contents of a Snippet (similar to Content Holders in BC).</p>\n\n\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\n\n{% component type: \"snippet\", alias: \"section_parameters\" %}\n\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\n</section>\n\n{% component type: \"snippet\", alias: \"section_output\" %}\n\n<p>The below example is for a Snippet with some content relating to the topic HTML but is otherwise the default data you will get from this Component.</p>\n{% component type: \"snippet\", alias: \"demo_html_snippet\", collectionVariable: \"data\" %}\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"json\" %}\n</section>\n\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\n<p>You can also directly render this data on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\n\n<p>An example using <code>collectionVariable</code> with value \"snippetExample\" is as follows:</p>\n\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\n\n<p><em>Rendering the collection data to a page:</em></p>\n\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"html\" %}\n</section>\n</section>\n",
      "TemplateName": "Docs Template",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": [
        "Snippets"
      ],
      "SiteSearchKeywords": null,
      "ID": 1950,
      "CreatedByMemberId": "0",
      "IsHome": false,
      "Pagination": null,
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": null,
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711513,
        "TypeId": 1977186194,
        "InstanceId": 89,
        "DbTypeId": 1977186194,
        "DbInstanceId": 89
      },
      "Params": {}
    },
    "Type": 5
  },
  "Name": "DEMO HTML Snippet",
  "Alias": "demo_html_snippet",
  "Content": "<p>The <strong>Hyper Text Markup Language</strong> (HTML) is mainly used for writing web pages.</p>",
  "Enabled": true,
  "Params": {}
}

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

You can also directly render this data on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "snippetExample" is as follows:

{% component type: "snippet", alias: "demo_html_snippet", collectionVariable: "snippetExample" %}

Rendering the collection data to a page:

<p><strong>{{snippetExample['name']}}</strong></p>
<div>{{snippetExample['content']}}</div>

Content Modules
Snippets
Snippets allow the creation of reusable blocks of code or isolated sections of content. This...

External Resources

Basic Snippet Demo

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.

Going Live