Categories provide an excellent method for grouping your WebApp and Module items. Once you have categorised items to a category, you can use it to call specific items within a WebApp or Module onto a page. Alternatively, you can output all items that have been categorised to a specific category and it’s subcategories.

Basic Categories

Static Pages (non-WebApp layouts):

{{context.exports.categories.data}} - Outputs all categories globally.

{{context.exports.categories.data[“1234”]}} - Outputs a specific category, replace “1234” with the desired Category ID.

WebApp Layouts:

The following code snippet will output all categories the current WebApp Item is categorised too:

{% for category_id in this.category_array -%} {{context.exports.categories.data[category_id].name}} {% endfor -%}

If you'd like to customise how the categories are displayed, you can add a div with a class or ID within this for loop and then write your custom CSS.

If the WebApp item is categorised to more than one category, you can do the following to only output a particular category:

{{context.exports.categories.data[this.category_array[0]].name}}

If you want to make sure the category item in the array you are calling exists first, then you should do the following:

First category in the array:

{% if this.category_array[0] != bank %} {{context.exports.categories.data[this.category_array[0]].name}} {% endif %}

Second category in the array (and so on):

{% if this.category_array[1] != bank %} {{context.exports.categories.data[this.category_array[1]].name}} {% endif %}

Advanced Categories

Once you have enabled a detail page for a category page, you can output any of the following on your detail layout:

{%- include 'category_breadcrumbs', layout: 'breadcrumb' -%} - outputs breadcrumb of categories to the current category page using the defined layout

{%- include 'category_parent', layout: 'parent' -%} - outputs parent categories using the defined layout

{%- include 'category_children', layout: 'children' -%} - outputs child categories using the defined layout

{%- include 'category_items', layout: 'items' -%} - outputs all items categorised to the current category page using the defined layout

Default Fields

The following tags are available within the advanced category layouts:

Folder Structure

Category layouts are stored in the following folder structure, which you can view via Code Editor: layouts/categories/

Within this folder you will find the following:

• detail/ - detail layouts contain the code displayed on category pages

• default.liquid - the default detail layout for categories

• list/ - list layouts allow you to customise how categories are displayed on category detail pages

• breadcrumb.liquid - allows you to customise how categories are displayed within breadcrumbs on the current category detail page

  children.liquid - allows you to customise how child categories are displayed on the current category detail page

  items.liquid - allows you to customise how items that are categorised to the current category are displayed

  parent.liquid - allows you to customise how parent categories are displayed on the current category detail page