Show list of all Posts on Home page using API

12 Comments

  • Devan - Community Manager
    Zendesk Community Team

    Hello Ifra,

    This is a really great tip! Appreciate the fantastic information you posted.

    0
  • Ifra Saqlain
    Community Moderator

    Thank You :)

    0
  • Robbie Carew

    How would you modify this code, Ifra, to show not the posts, but the community topics, on the home page?

     

    I am having difficulty with this, so any help is much appreciated.

    0
  • Ifra Saqlain
    Community Moderator

    Hey Robble,

    Please add this code in your script file

      $.getJSON('/api/v2/community/topics.json', function (data) {
    var topicList = '';
    $.each(data.topics, function (idx, itm) {
    topicList += '<li>';
    topicList += '<a href="' + itm.html_url + '" id="' + itm.id + '">'
    + itm.name + '</a>';
    topicList += '</li>';
    });
    $('ul.topic-list').html(topicList);
    var topicLength = $('ul.topic-list > li').length;
    if (topicLength) {
    $('.topic-list').show();

    }
    });

     

    and add this code on your homepage:

    <div class="topic_list">
    <h3>Topic List</h3>
    <ul class="topic-list">
    </ul>
    </div>

     

    Result:

     

     

     

     

    If you need any help let me know.

    Enjoy :)

     

    Team

    1
  • Robbie Carew

    Hello Ifra,

    thank you for helping me with that code - a really big help :)

     

     

    0
  • Ifra Saqlain
    Community Moderator

    :)

    0
  • Mia Jonson

    Hi!

    Is it possible to have one list with FAQ and one with Announcements?

    We have added a list on our home page for end users that shows both but we would like to have two, one for each.

     

    0
  • Ifra Saqlain
    Community Moderator

    Hey Mia,

     

    You need to add this Zendesk component to show the article list for each section.

    Copy the given code and paste it on your homepage.

    {{category_tree_with_article}}

     

     

    After adding the code you need hide the category name so also add this code on your stylesheet at the bottom:

    .category-tree-with-article .category > h2{
    display:none;
    }

     

    NOTE: This component supports Templating API v1:





    and not supports Templating API v2:

     

     

    See in the given image, I removed the category blocks code from line no. 21 to 41:


     

     

    and add that component :

     

     

    Now see the result, Showing both sections with their all articles.

     

     

     

    If any query or issue or confusion then let me know :)

     

    Thank You

    Team

     

    1
  • Mia Jonson

    Thank you so much!

    Unfortunately we got a third one, General, that we do not know where it came from and that we did not want so our solution will be to add two different buttons that lounges the FAQ or Announcements views.

    That will be good enough for us for now.

    Further on maybe we would like to show only the Announcements in a list on the home page side.

    Do you know if that is possible to sort out only the Announcements in a list?

    Thanks!

    // Mia

     

    0
  • Ifra Saqlain
    Community Moderator

    Hey,

    If you want to show the only Announcement with all their article list so please copy this code and paste on your home_page.hbs and remove that whatever I told before. 

     

    I imported the new Copenhagen theme and just modify the small code snippet. See in the given images.

     {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    {{#is id 360007760951}} //Here you need to update ID. Remove this given ID and add your Announcement section ID.
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">
    {{name}}
    </span>
    {{#if articles}}
    <ul>
    {{#each articles}}
    <li>
    {{title}}
    </li>
    {{/each}}
    </ul>
    {{/if}}
    </a>
    </li>
    {{/is}}
    {{/each}}
    {{/if}}
    {{/each}}

     

     

    Before modifying the code:

     

    After modifying the code, I add the Announcement section ID and add code for article list:

     

    Let me know if any issue :)

     

    Thank You

    Team

    0
  • ranjit puri

    Hi, This is a great post and really helpful. 

    One questions:

    What modification do we need in the script so to be able to have the posts lists according to a particular topic. I understand that we have a specific API call 

    GET /api/v2/community/topics/{id}/posts.json

    To get the data related to a particular topic. Just looking to call it in the script dynamically so to be able to lists the recent posts for each topic in a table.

    Basically looking to have recent posts for each topic in the table on community_topic_list page template. 

    1
  • Kay
    Community Moderator

    ranjit puri you can simply replace the URL from the initial script by Ifra. That should work.

    0

Please sign in to leave a comment.

Powered by Zendesk