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

[Loek Hilgersom]

I saw a mistake already, first call should be something like this:
<f:render partial="CategoryLevel" arguments="{parent:0, ulClasses:'mainLevel}"/>

If you need complicated markup you might do a different rendering for each level 
(instead of the recursion), but it does get more ugly of course.

I'm curious to hear your results.

Loek


On 16-09-16 12:45, Bert Hiddink [BENDOO e-work solutions] wrote:
> 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
>