dalewpdevph/category-tree

Builds a category tree structure for your menu and links.

Category Tree plugin for Craft CMS 3.x

Builds a Category tree structure for your menu and links., _(*1)

Installation

To install Category Tree, follow these steps:, _(*2)

1. Download & unzip the file and place the category-tree directory into your craft/plugins directory
2. -OR- do a git clone https://github.com/pdaleramirez/category-tree.git directly into your craft/plugins folder.
   You can then update it with git pull
3. -OR- install with Composer via composer require pdaleramirez/category-tree
4. Install plugin in the Craft Control Panel under Settings > Plugins
5. The plugin folder should be named category-tree for Craft to see it. GitHub recently started appending -master (the branch name) to the name of the folder for zip file downloads.

Category Tree works on Craft 3.x., _(*3)

Category Tree

You can use this plugin to fetch craft recursive categories tree in your control panel., _(*4)

Fetch Category Tree

Use {{ craft.categorytree.getTree(1) }} in you template to you fetch the category tree structure from your category control panel with "groupId" as your first parameter., _(*5)

Example output:

[
    0 => [
        'id' => '14'
        'parentId' => 0
        'title' => 'Dropdown 1'
        'model' => 'craft\\elements\\Category'
        'children' => [
            0 => [
                'id' => '15'
                'parentId' => '14'
                'title' => 'Dropdown 1.1'
                'model' => 'craft\\elements\\Category'
                'children' => [
                    0 => [
                        'id' => '22'
                        'parentId' => '15'
                        'title' => 'Dropdown 1.1.1'
                        'model' => 'craft\\elements\\Category'
                    ]
                    1 => [
                        'id' => '23'
                        'parentId' => '15'
                        'title' => 'Dropdown 1.1.2'
                        'model' => 'craft\\elements\\Category'
                    ]
                    2 => [
                        'id' => '24'
                        'parentId' => '15'
                        'title' => 'Dropdown 1.1.3'
                        'model' => 'craft\\elements\\Category'
                    ]
                ]
            ]
            1 => [
                'id' => '13'
                'parentId' => '14'
                'title' => 'Dropdown 1.2'
                'model' => 'craft\\elements\\Category'
            ]
            2 => [
                'id' => '11'
                'parentId' => '14'
                'title' => 'Dropdown 1.3'
                'model' => 'craft\\elements\\Category'
            ]
        ]
    ]
    1 => [
        'id' => '17'
        'parentId' => 0
        'title' => 'Dropdown 2'
        'model' => 'craft\\elements\\Category'
        'children' => [
            0 => [
                'id' => '25'
                'parentId' => '17'
                'title' => 'Dropdown 2.1'
                'model' => 'craft\\elements\\Category'
                'children' => [
                    0 => [
                        'id' => '27'
                        'parentId' => '25'
                        'title' => 'Dropdown 2.1.1'
                        'model' => 'craft\\elements\\Category'
                    ]
                    1 => [
                        'id' => '30'
                        'parentId' => '25'
                        'title' => 'Dropdown 2.1.2'
                        'model' => 'craft\\elements\\Category'
                    ]
                ]
            ]
            1 => [
                'id' => '28'
                'parentId' => '17'
                'title' => 'Dropdown 2.2'
                'model' => 'craft\\elements\\Category'
            ]
            2 => [
                'id' => '26'
                'parentId' => '17'
                'title' => 'Dropdown 2.3'
                'model' => 'craft\\elements\\Category'
            ]
        ]
    ]
    2 => [
        'id' => '12'
        'parentId' => 0
        'title' => 'Dropdown 3'
        'model' => 'craft\\elements\\Category'
        'children' => [
            0 => [
                'id' => '16'
                'parentId' => '12'
                'title' => 'Dropdown 3.1'
                'model' => 'craft\\elements\\Category'
            ]
            1 => [
                'id' => '29'
                'parentId' => '12'
                'title' => 'Dropdown 3.2'
                'model' => 'craft\\elements\\Category'
            ]
        ]
    ]
]

The model index returns the Category object., _(*6)

Example Implementation

{% set categories = craft.categorytree.getTree() %}

{% for category in categories %}

• {{ category.model.slug }}
{% if category.children is defined %}
{% for category in category.children %}
• {{ category.model.slug }}
{% endfor %}
{% endif %}

Display Category List

Use the function below to display html category list., _(*7)

First parameter is the base url link., _(*8)

Second parameter is the attribute key of the category model and this will get display at the end of your base url., _(*9)

Third parameter is the css class of the "ul" html element., _(*10)

{{ craft.categorytree.getList(1,{'base': '/category/',
                                  'attribute': 'slug',
                                  'class': 'category-tree'
                                  }) }}

HTML Output:

<ul class="category-tree category-tree-menu" id="category-tree-menu">
   <li>
      <a class="menulink" href="/category/dropdown1">Dropdown 1</a>
      <ul class="category-tree category-tree-menu">
         <li>
            <a class="menulink" href="/category/dropdown1-1">Dropdown 1.1</a>
            <ul class="category-tree category-tree-menu">
               <li><a href="/category/dropdown-1-1-1">Dropdown 1.1.1</a></li>
               <li><a href="/category/dropdown-1-1-2">Dropdown 1.1.2</a></li>
               <li><a href="/category/dropdown-1-1-3">Dropdown 1.1.3</a></li>
            </ul>
         </li>
         <li><a href="/category/dropdown1-2">Dropdown 1.2</a></li>
         <li><a href="/category/dropdown1-3">Dropdown 1.3</a></li>
      </ul>
   </li>
   <li>
      <a class="menulink" href="/category/dropdown2">Dropdown 2</a>
      <ul class="category-tree category-tree-menu">
         <li>
            <a class="menulink" href="/category/dropdown-2-1">Dropdown 2.1</a>
            <ul class="category-tree category-tree-menu">
               <li><a href="/category/dropdown-2-1-1">Dropdown 2.1.1</a></li>
               <li><a href="/category/dropdown-2-1-2">Dropdown 2.1.2</a></li>
            </ul>
         </li>
         <li><a href="/category/dropdown-2-2">Dropdown 2.2</a></li>
         <li><a href="/category/dropdown-2-3">Dropdown 2.3</a></li>
      </ul>
   </li>
   <li>
      <a class="menulink" href="/category/dropdown3">Dropdown 3</a>
      <ul class="category-tree category-tree-menu">
         <li><a href="/category/dropdown-3-1">Dropdown 3.1</a></li>
         <li><a href="/category/dropdown-3-2">Dropdown 3.2</a></li>
      </ul>
   </li>
</ul>

Display JavaScript dropdown menu

{{ craft.categorytree.getMenu(1,{'base': '/category/',
                                  'attribute': 'slug',
                                  'class': 'category-tree'
                                  }) }}

Brought to you by Precious Dale Ramirez, _(*11)