module_archive

This module component fetches data according to a yearly and monthly archiving of items from a specific module (based on item Release Dates).

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

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

Parameters and Options

type

module_archive

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.

numberOfMonths

<number>

Maximum number of months to be rendered (unspecified parameter will show ALL months)

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 archive dates 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):

{
  "Years": [
    {
      "Name": "2019",
      "Url": "/demo-custom-blog-2?prop_ModuleId=1534&prop_ReleaseDate_Min=2019-01-01&prop_ReleaseDate_Max=2019-12-31",
      "ItemsCount": 5,
      "Months": [
        {
          "Name": "November",
          "Url": "/demo-custom-blog-2?prop_ModuleId=1534&prop_ReleaseDate_Min=2019-11-01&prop_ReleaseDate_Max=2019-11-30",
          "ItemsCount": 2
        },
        {
          "Name": "October",
          "Url": "/demo-custom-blog-2?prop_ModuleId=1534&prop_ReleaseDate_Min=2019-10-01&prop_ReleaseDate_Max=2019-10-31",
          "ItemsCount": 1
        },
        {
          "Name": "April",
          "Url": "/demo-custom-blog?prop_ModuleId=1534&prop_ReleaseDate_Min=2019-04-01&prop_ReleaseDate_Max=2019-04-30",
          "ItemsCount": 1
        },
        {
          "Name": "January",
          "Url": "/demo-custom-blog?prop_ModuleId=1534&prop_ReleaseDate_Min=2019-01-01&prop_ReleaseDate_Max=2019-01-31",
          "ItemsCount": 1
        }
      ]
    },
    {
      "Name": "2018",
      "Url": "/demo-custom-blog?prop_ModuleId=1534&prop_ReleaseDate_Min=2018-01-01&prop_ReleaseDate_Max=2018-12-31",
      "ItemsCount": 2,
      "Months": [
        {
          "Name": "December",
          "Url": "/demo-custom-blog?prop_ModuleId=1534&prop_ReleaseDate_Min=2018-12-01&prop_ReleaseDate_Max=2018-12-31",
          "ItemsCount": 1
        },
        {
          "Name": "November",
          "Url": "/demo-html-blog?prop_ModuleId=1534&prop_ReleaseDate_Min=2018-11-01&prop_ReleaseDate_Max=2018-11-30",
          "ItemsCount": 1
        }
      ]
    }
  ],
  "Params": {
    "type": "module_archive",
    "module": "Blog Post",
    "layout": "",
    "collectionvariable": "archiveCollection"
  }
}

The data exposed is explained further in the table below:

years.name

The year of the archive.

years.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 archive date.

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_ReleaseDate_Min=[[periodStartDate]]&prop_ReleaseDate_Max=[[periodEndDate]]

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

The URL output would be (for year 2018):
?prop_ModuleId=1534&prop_ReleaseDate_Min=2018-01-01&prop_ReleaseDate_Max=2018-12-31

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_archive", module:"Blog Post", parentItemId:"1234" %}
where '1234' is the ID of your specific blog parent/group item.

The URL output would be (for year 2018):
/my-blog?prop_ModuleId=1534&prop_ParentId=1234&prop_ReleaseDate_Min=2018-01-01&prop_ReleaseDate_Max=2018-12-31

years.itemsCount

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

years.month

An array of months within the given year, that have items assigned.

months.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 archive date.

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

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

The URL output would be (for month of August 2018):
?prop_ModuleId=1534&prop_ReleaseDate_Min=2018-08-01&prop_ReleaseDate_Max=2018-08-31

The URL output would be (for month of August 2018):
/my-blog?prop_ModuleId=1534&prop_ParentId=1234&prop_ReleaseDate_Min=2018-08-01&prop_ReleaseDate_Max=2018-08-31

months.itemsCount

The number of items, within the specified module, that have this archive date 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 month/year, link and item count:

<ul>
    {% for yearData in this.years %}
        {% for month in yearData.months %}
            <li> 
                <a href="{{month.url}}" title="{{yearData.name}}-{{month.name}}">{{month.name}} {{yearData.name}} ({{month.itemsCount}})</a>
            </li>
        {% endfor %}
    {% 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.years object and two forloops (since the default object type is a collection); one to loop through the years and one for the months.

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

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

{% for aYear in this.years %}
    {% for aMonth in aYear.months %}
    {{aMonth.name}} {{aYear.name}}<br>
    {% endfor %}
{% 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 "archiveCollection" for the Blog module:

{% component type: "module_archive", collectionVariable: "archiveCollection", module: "Blog Post" %}

Using the following forloop directly on the page:

<ul>
    {% for aYear in archiveCollection.years %}
        {% for aMonth in aYear.months %}
        <li>{{aMonth.name}} {{aYear.name}}</li>
        {% endfor %}
    {% endfor %}
</ul>

Renders all the item names in a list:

November 2019
October 2019
April 2019
January 2019
December 2018
November 2018

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

{{archiveCollection.years[0].months[2]['name']}}

External Resources

Demo Site Blog

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.

Going Live

Change Log