Missing sub-categories with my template

alfazaz

Hello !

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

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)
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 ?

alfazaz

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 ?

alfazaz

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...).

????

PitaJ

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

alfazaz

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

Now, everything is ok !!! Thanks again !