pdaleramirez / category-tree
Builds a category tree structure for your menu and links.
Installs: 602
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 4
Forks: 2
Open Issues: 0
Type:craft-plugin
Requires
- craftcms/cms: ^3.2.0
README
Builds a Category tree structure for your menu and links.
Installation
To install Category Tree, follow these steps:
- Download & unzip the file and place the
category-treedirectory into yourcraft/pluginsdirectory - -OR- do a
git clone https://github.com/pdaleramirez/category-tree.gitdirectly into yourcraft/pluginsfolder.
You can then update it withgit pull - -OR- install with Composer via
composer require pdaleramirez/category-tree - Install plugin in the Craft Control Panel under Settings > Plugins
- The plugin folder should be named
category-treefor 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.
Category Tree
You can use this plugin to fetch craft recursive categories tree in your control panel.
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.
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.
Example Implementation
{% set categories = craft.categorytree.getTree() %}
{% for category in categories %}
<ul>
<li>{{ category.model.slug }}</li>
{% if category.children is defined %}
<ul>
{% for category in category.children %}
<li>{{ category.model.slug }}</li>
{% endfor %}
</ul>
{% endif %}
</ul>
{% endfor %}
Display Category List
Use the function below to display html category list.
First parameter is the base url link.
Second parameter is the attribute key of the category model and this will get display at the end of your base url.
Third parameter is the css class of the "ul" html element.
{{ 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