Change log

module_tag_list

This module component fetches data relating to Tags allocated to a specific module.

{% component type: "module_tag_list", module: "<Module name/ID>" %}

Only Tags that are assigned to items within the specified module are returned. In other words, Tags with an item count of 0 won't be returned.

Parameters and Options

Parameter
Values
Required
Description
type
module_tag_list

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

module
<Module name/ID>
The module’s entity/alias name or ID that the data is to be sourced from.
parentItemId
<Parent ID>

The module group ID the data is to be sourced from.
layout
<path/to/layout>

Path to file that will contain the Liquid layout content to be parsed.

If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).

sortBy
name
itemsCount

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used based on the item's name.
sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
limit
<number>

Maximum number of Tags to be rendered (unspecified parameter will show ALL items)
object
item
collection (default)

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

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

Liquid Output

The below example shows the system Tags associated with the Blog module. The Liquid data output from this example would look like the following (for example, when using a collectionVariable to create the collection):

{
  "Items": [
    {
      "Name": "sample",
      "UrlSlug": "_blog-post",
      "ItemsCount": 3,
      "ParentId": 0,
      "Url": "/_blog-post?prop_ModuleId=1534&prop_ItemTags=sample"
    },
    {
      "Name": "demo",
      "UrlSlug": "_blog-post",
      "ItemsCount": 2,
      "ParentId": 0,
      "Url": "/_blog-post?prop_ModuleId=1534&prop_ItemTags=demo"
    },
    {
      "Name": "blog posts",
      "UrlSlug": "_blog-post",
      "ItemsCount": 5,
      "ParentId": 0,
      "Url": "/_blog-post?prop_ModuleId=1534&prop_ItemTags=blog%20posts"
    }
  ],
  "Params": {
    "type": "module_tag_list",
    "module": "Blog Post",
    "layout": "",
    "collectionvariable": "tagCollection"
  }
}

The data exposed is explained further in the table below:

Name
Description
name
The name of the Tag.
url

A formatted URL with parameter string that can be used, along with your module component configured with the isSearchResults: "true" parameter, to display all module items using the Tag.

See the 'Liquid Components' documentation for the module you are working with for more info on using the isSearchResults parameter.

The pattern used to format this URL is as follows:
[[parentItemUrl]]?prop_ModuleId=[[moduleId]]&prop_ParentId=[[parentItemId]]&prop_ItemTags=[[tagName (UrlEncoded) ]]

For example, using the component to reference a top level module (let's use the Blog module), ie:
{% component type:"module_tag_list", module:"Blog Post" %}

The URL output would be:
?prop_ModuleId=1534&prop_ItemTags=My%20Tag

Additionally, if using the component to reference a parent group via the parentItemId parameter (let's use a specific Blog within the Blog module), ie:
{% component type:"module_tag_list", module:"Blog Post", parentItemId:"1234" %}
where '1234' is the ID of your specific blog parent/group item.

The URL output would be:
/my-blog?prop_ModuleId=1534&prop_ParentId=1234&prop_ItemTags=My%20Tag

itemsCount

The number of items, within the specified module, that have this Tag assigned.

Virtual Layout

Based on the above example, if not using any custom layout or collection, the default virtual layout will output as a list with name, link and item count:

<ul>
    {% for item in this.items %}
        <li> 
            <a href="{{item.url}}" title="{{item.name}}">{{item.name}} <span>({{item.itemsCount}})</span></a>
        </li>
    {% endfor %}
</ul>

Rendering the list:

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

This data is accessible in two main ways:

1. Using Liquid in a custom defined Layout via the this.items object and a forloop (since the default object type is a collection).

{% component type: "module_tag_list", layout: "/snippets/sample-tag-layout.inc", module: "Blog Post" %}

Example of a forloop in the custom layout file sample-tag-layout.inc

{% for tag in this.items %}
{{tag.name}}<br>
{% endfor %}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component.

An example using collectionVariable with value "tagCollection" for the Blog module:

{% component type: "module_tag_list", collectionVariable: "tagCollection", module: "Blog Post" %}

Using the following forloop directly on the page:

<ul>
    {% for tag in tagCollection.items %}
        <li>{{tag['name']}}</li>
    {% endfor %}
</ul>

Renders all the item names in a list:

  • sample
  • demo
  • blog posts

Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value blog posts

{{tagCollection.items[2]['name']}}


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.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.