[TYPO3-english] Fluid and categories (TYPO3 6.2.x): render a multilevel menu for Bootstrap 3.x

[Loek Hilgersom]

Hi Bert,

It is possible to do this inside fluid, but not very elegant (you'll need to 
loop over all categories and first pick only root categories, and for each 
category you'll have to loop over all again to see if there are any children.... 
not exactly optimal).

But the amount of code is not too bad if you use a recursive partial 
CategoryLevel.html (untested):

<ul class="{ulClasses}">
   <f:for each="{categories}" as="category">
     <f:if condition="{category.parent}=={parent}">
       <li>blabla category markup
         <f:render partial="CategoryLevel" arguments="{parent:category.parent, 
ulClasses:'subLevel}" />
       </li>
     </f:if>
   </f:for each>
</ul>

And first call it like:

<f:render partial="CategoryLevel" arguments="{parent:category.parent, 
ulClasses:'mainLevel}" />

You'll have to fiddle around with it to get your markup, but you'll get the idea.

For a more elegant solution you'll first need to get the categories sorted 
inside a multidimensional array or object, so you'll need a controller (or maybe 
some creative viewhelper).

Loek





On 15-09-16 14:00, Bert Hiddink [BENDOO e-work solutions] wrote:
> Hello,
>
> I need to render a multilevel menu from categories with Fluid, html should be
> something like this:
>
> <div id="MainMenu">
>   <div class="list-group panel">
>     <a href="#demo3" class="list-group-item list-group-item-success"
> data-toggle="collapse" data-parent="#MainMenu">Item 3</a>
>     <div class="collapse" id="demo3">
>       <a href="#SubMenu1" class="list-group-item" data-toggle="collapse"
> data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
>       <div class="collapse list-group-submenu" id="SubMenu1">
>         <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a>
>         <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a>
>         <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse"
> data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
>         <div class="collapse list-group-submenu list-group-submenu-1"
> id="SubSubMenu1">
>           <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub
> item 1</a>
>           <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub
> item 2</a>
>         </div>
>         <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a>
>       </div>
>       <a href="javascript:;" class="list-group-item">Subitem 2</a>
>       <a href="javascript:;" class="list-group-item">Subitem 3</a>
>     </div>
>     <a href="#demo4" class="list-group-item list-group-item-success"
> data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
>     <div class="collapse" id="demo4">
>       <a href="" class="list-group-item">Subitem 1</a>
>       <a href="" class="list-group-item">Subitem 2</a>
>       <a href="" class="list-group-item">Subitem 3</a>
>     </div>
>   </div>
> </div>
>
> However, using the snippet below, how could I distinguish between the different
> menulevels since I need to give a different data-parent for each level. Any ideas?
> <f:section name="categoryTree">
>     <ul>
>         <f:for each="{categories}" as="category">
>             <li>
>                         <f:link.page title="{category.item.title}"
> pageUid="{settings.listPid}"
>
> additionalParams="{tx_news_pi1:{overwriteDemand:{categories:
> category.item.uid}}}">{category.item.title}
>                         </f:link.page>
>             </li>
>         </f:for>
>     </ul>
> </f:section>
>
> Thanks in advance!
>
> Regards,
> -brt