Community Topic List Page template - grouping topics?

回答済み

3 コメント

  • Kasper Sørensen
    Zendesk Product Manager

    Hi Steven Aranaga,

    I believe in this case it is in deed a somewhat static page that has been put into the theme. You could potentially do something slightly more dynamic using Javascript - for instance you could put all the topic data into invisible elements in the DOM and then have your script rearrange the topics into visible elements as per your liking. Then your script could implement whatever grouping logic you would like.

    0
  • Steven Aranaga

    FYI:  I came up with my own solution.  In the example below:

    • I am grabbing the topics list, sorting them by the position set in admin (default grabs them in id order, and there is no way in the API to sort them)
    • Setting variables out of the item
    • Building the list item using a custom code block
    • If the Topic name contains "General" or "Announce" add it into the list
    • Insert it into the ul with the id = general-list

    You can add as many blocks as you want by simply adding more var, if, and .html commands.  What is also nice is, the same topic can be in multiple blocks as long as the string matches in the if...

    Here is the js:

    $.getJSON('/api/v2/community/topics.json', function(data) {
    var generalList = '';

    var sortByProperty = function(property) {
    return function(x, y) {
    return ((x[property] === y[property]) ? 0 : ((x[property] > y[property]) ? 1 : -1));
    };
    };
    var topiclist = data.topics.sort(sortByProperty('position'));

    $.each(topiclist, function(index, item) {

    var topicname = item.name;
    var topichtml_url = item.html_url;
    var topicdesc = item.description;

    var template = '<li class="topics-item">' +
    '<a href="' + topichtml_url + '" class="topics-item-link">' +
    '<span class="topics-item-title">' + topicname + '</span>' +
    '</a>' +
    '<span class="topics-item-description">' + topicdesc + '</span>' +
    '</li>';

    if ((topicname.indexOf("Annouce") >= 0) || (topicname.indexOf("General") >= 0)) {
    generalList += template
    }
    });
    $('ul#general-list').html(generalList);
    });

    Here is the html string (I replaced everything from {{#each topics}} to {{/each}}):

    <div class="topics-block"><h3>General</h3><ul class="topics-list" id="general-list"></ul></div>

    My only issue I had is that post count, although available in the each loop in handlebars, is not in the API result, and I couldn't figure out a method to get a count in the time I had to work on this.  If anyone has a suggestion, I am all ears!

    There is a bit of custom CSS styling, but here is my topic list, pretty much built by the JS script.  In the screenshot, I have images - I tried to include them in the JS, but the handlebars helper object did not translate properly in the javascript append, so it is in the hbs.

    1
  • Brett Bowser
    Zendesk Community Team

    Awesome solution Steven! This would make an awesome community tip under our Users Tips and Tricks topic which I linked for you. If you've got the time, would you be willing to post this solution there as a user tip for others to see?

    Thanks fo much for taking the time to share this :)

    0

サインインしてコメントを残してください。

Powered by Zendesk