Show list of all Posts on Home page using API

10 Commentaires

  • Devan
    Actions pour les commentaires Permalien

    Hello Ifra,

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

    0
  • Ifra Saqlain
    Actions pour les commentaires Permalien

    Thank You :)

    0
  • Robbie Carew
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    Hello Ifra,

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

     

     

    0
  • Ifra Saqlain
    Actions pour les commentaires Permalien

    :)

    0
  • Mia Jonson
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk