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

[Bert Hiddink [BENDOO e-work solutions]]

Hello Loek!

Thanks for your suggestion! I'll test it and let you know if it worked!

Thanks again!
Bert

On 15/09/16 15:45, Loek Hilgersom wrote:
> 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