Typo3 list children of a specific system category (news extension)

Question

I have a system category tree in Typo3:

─┬─A─┬─A1
 │   └─A2
 │
 └─B─┬─B1
     ┼─B2
     └─B3

I want to render the children of B tree.

On each child news item I am able to get the categories in a string on every iteration

<f:for each="{news}" as="newsItem" iteration="iterator">
    <!-- render partial="List/ServiceItem" -->
<div
<f:if condition="{newsItem.categories}">
            data-groups="[<f:for each="{newsItem.categories}" as="category" iteration="iteratorCategories">'{category.title}'<f:if condition="{iteratorCategories.isLast}"><f:then></f:then><f:else>,</f:else></f:if></f:for>]"
        </f:if>
>{newsItem.title} & other stuff</div>
</f:for>

I am using Shuffle.js to filter the list and I need all the B - tree children to create the group control I tried this:

<div class="news-list-category"> categories:
  <f:for each="{categories}" as="category" iteration="iteratorCategories">
    <f:if condition="{category.title} == 'B'">
      {category.title}
       <f:debug>{category.children}</f:debug>
       <f:if condition="{category.children}">
            children:
            <f:for each="{category.children}"
                      as="subCategory"
                       iteration="iteratorSubCategories">
                 <span>{subCategory.title}</span>
             </f:for>
          </f:if>
     </f:if>
  </f:for>
</div>

category.children and category.item.children returns null

if condition="{category.title} == 'B' gets to the correct first level item

I used typo3conf/ext/news/Resources/Private/Templates/Styles/Twb/Templates/Category/List.html

as a reference as well

Should I rather do this in typoscript and pass to fluid

 <f:cObject typoscriptObjectPath="lib.myTyposSubCategoryList" />

I'll go and see if I can get Typoscript to render this but would like a fluid solution

Thanks

Hi Jaco, can't you use the provided Category menu in the News extension, and simply select the categories you want to show? — Scopestyle

Scopestyle Scopestyle · Accepted Answer · 2018-07-24T09:28:25

So I propose you do this:

Create a new news module in the T3 backend. And select categories as display module. You can customize the module in the Templates/Category/List.html file in your theme folder to change the structure and make it work with shuffle.js. The module needs to be included on the same page as your list module, make sure you select the site ID where the list module is to be found, and disable the Disable overwriting of plugin settings checkbox in the Settings tab.

In the module you simply select the categories you want to show. I think that might be the easiest way to go about this.

I used the same method to transform my categories menu into a dropdown menu:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="General" />
<!--
    =====================
        Templates/Category/List.html
-->

<f:section name="content">
    <f:if condition="{categories}">
        <f:then>
            <div class="news-cat-view side-news">
                <h3><f:translate key="categories" /></h3>
                <f:render section="categoryTree" arguments="{categories:categories,overwriteDemand:overwriteDemand}" />
            </div>
        </f:then>
        <f:else>
            <f:translate key="list_nocategoriesfound" />
        </f:else>
    </f:if>
</f:section>

<f:section name="categoryTree">
    <ul>
        <f:for each="{categories}" as="category">
            <li>
                <f:if condition="{category.item.uid} == {overwriteDemand.categories}">
                    <f:then>
                        <a href="javascript:;">{category.item.title}</a>
                    </f:then>
                    <f:else>
                        <a href="javascript:;">{category.item.title}</a>
                    </f:else>
                </f:if>

                <f:if condition="{category.children}">
                    <f:render section="categoryTreeSub" arguments="{categories: category.children,overwriteDemand:overwriteDemand}" />
                </f:if>
            </li>
        </f:for>
        <li class="parent reset" style="display: none;"><f:link.page pageUid="22"><f:translate key="back-link" /></f:link.page></li>
    </ul>
</f:section>

<f:section name="categoryTreeSub">
    <ul>
        <f:for each="{categories}" as="category">
            <li>
                <f:if condition="{category.item.uid} == {overwriteDemand.categories}">
                    <f:then>
                        <f:link.page title="{category.item.title}" class="active" pageUid="{settings.listPid}"
                            additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}">{category.item.title}
                        </f:link.page>
                    </f:then>
                    <f:else>
                        <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>
                    </f:else>
                </f:if>
            </li>
        </f:for>
    </ul>
</f:section>

</html>

Typo3 list children of a specific system category (news extension)

1 Answers