Missing sub-categories with my template

General Discussion
  • Hello !

    I'm trying to put in my navbar each of my categories as dropdowns with their children as items :

    1. Category 1 (parent of the dropdown)
      1.1 Sub-category 1 (first item of the dropdown)
      1.2 Sub-category 2 (second item of the dropdown)
    2. Category 2 (parent of another dropdown)
      2.1 Sub-category 1 (first item of the dropdown)
      2.2 Sub-category 2 (second item of the dropdown)
      2.3 Sub-category 3 (third item of the dropdown)
      ...

    To do it, I've done these things :

    • Created a child theme
    • Created the following "filter:middleware.renderHeader" hook (to get categories and sub-categories in template data) :
    library.onRenderHeader = function (data, callback) {
    // Get all the visible categories.
            Categories.getCategoriesByPrivilege('cid:0:children', data.req.uid, 'find', function(err, categoryData) {
                    if (err) return callback(err);
                    // Put the categories in a tree format.
                    Categories.flattenCategories([], categoryData);
                    // Send the data for use by template...
                    data.templateValues.categories = categoryData;
                    callback(null, data);
            });    
    };
    
    • Copied menu.tpl and changed it to add an import of the personal tpl menu-more-entries-YA.tpl
    • In menu-more-entries-YA.tpl, I put this :
    {{{ each categories }}}
        <ul id="main-nav-extend-YA" class="nav navbar-nav">
            {{{ if !../link }}}
                <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{../name}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    {{{ each children }}}
                        <h1>Success !</h1>
                        {{{ if ../link }}}
                            <li><a href="{../link}" itemprop="url" target="_blank">{../name}</a></li>
                        {{{ else }}}
                            <li><a href="{config.relative_path}/category/{../slug}" itemprop="url">{../name}</a></li> 
                        {{{ end ../link }}}
                    {{{ end children }}}
                    </ul>
                </li>
            {{{ else }}}
                <li><a href="{../link}" itemprop="url" target="_blank">{../name}</a></li>
            {{{ end !../link }}}
        </ul>
    {{{ end categories }}}
    

    With this, I have categories dropdowns in my navbar but they are not populated with any subcategories... I tried many things (old template syntax, paths...) with no success. My page with /api shows the categories object populated with children but the generated page (without /api) has nothing generated corresponding to all things between {{{ each children }}} and {{{ end children }}}...

    What is the good way to show categories children in my dropdowns ? Is it a problem with nested each in my template ?

  • Precision :

    /api shows categories populated with children only when on categories page... When I put a console.log(categoryData); in my library.onRenderHeader last code, it shows categories without children... The problem seems to come from here. But how can I get children ?

  • I changed my function to get children in data.templateValues.categories :

    library.onRenderHeader = function (data, callback) {
        // Get all the visible categories.
        Categories.getCategoriesByPrivilege('categories:cid', data.req.uid, 'find', function (err, categories) {
                if (err) {
                   return callback(err, data);
                }
                categories=Categories.getTree(categories);
                // Send the data for use by template...
                data.templateValues.categories = categories;
                console.log(categories);            
                callback(null, data);
        });
    };
    

    With this, the console.log(categories); command shows that children are populated on server :

    [ { bgColor: '#A1B56C',
        cid: 39,
        class: 'col-md-3 col-xs-6',
        color: '#fff',
        description: '',
        descriptionParsed: '',
        disabled: 0,
        icon: 'fa-graduation-cap',
        imageClass: 'cover',
        link: '',
        name: 'Vie de classe',
        numRecentReplies: 1,
        order: 1,
        parentCid: 0,
        post_count: 0,
        slug: '39/vie-de-classe',
        topic_count: 0,
        isSection: 0,
        totalPostCount: 0,
        totalTopicCount: 0,
        tagWhitelist: [],
        'unread-class': '',
        children: [ [Object], [Object], [Object], [Object] ],
        parent: undefined },
      { bgColor: '#7CAFC2',
        cid: 24,
        class: 'col-md-3 col-xs-6',
        color: '#fff',
        description: '',
        descriptionParsed: '',
        disabled: 0,
        icon: 'fa-cubes',
        imageClass: 'cover',
        link: '',
        name: 'Mathématiques',
        numRecentReplies: 1,
        order: 2,
        parentCid: 0,
        post_count: 0,
        slug: '24/mathématiques',
        topic_count: 0,
        isSection: 0,
        totalPostCount: 3477,
        totalTopicCount: 408,
        tagWhitelist: [],
        'unread-class': '',
        children:
         [ [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object] ],
        parent: undefined },
      { bgColor: '#A16946',
        cid: 11,
        class: 'col-md-3 col-xs-6',
        color: '#fff',
        (cutted here to be short...)
    

    but no success on display on client (no children in dropdowns...).

    ????

  • @alfazaz should be {{{ each ./children }}}

  • Thanks ! I had tried this before but something else was wrong.

    Now, everything is ok !!! Thanks again !


Suggested Topics