snippet

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

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

Parameters and Options

Parameter Values Required Description
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.

<customParameter> <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.

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.

{
  "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>",
  "Parent": "",
  "Enabled": true,
  "Params": {}
}

Accessing the Data

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>


Related Articles

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

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.