Article page - list of all articles in this section

Beantwortet

27 Kommentare

  • Vladan Jovic
    Community Moderator

    Can anybody help? 

    0
  • Jessie Schutz
    Zendesk team member

    Hi Vladan!

    I'm not sure if it's possible to add an article list to an article page. I see several entries in the Community about displaying all articles on the Section page, but nothing about doing so within an Article. 

    I'm going to touch base with some our Help Center gurus to see if they have any insight into whether this is possible!

    0
  • Vladan Jovic
    Community Moderator

    Hi Jessie,

    Thank you for your answer!
    In the meantime I found solution via Zendesk API. I will post code here.

     

     

    0
  • Jessie Schutz
    Zendesk team member

    No problem! And thanks in advance for sharing your solution! :)

    0
  • Vladan Jovic
    Community Moderator

    Tested and works for me. Code should be on the Article page:

    JS

    <script>
    $(document).ready(function() {

    var idsek = $(".breadcrumbs li:nth-child(2) a").attr("href").match(/[0-9]+/);

    $.getJSON("/api/v2/help_center/sections/" + idsek + "/articles.json", function(data) {
    console.log(data);// intialize list
    $("#badges").html('<ol>');
    var output = "";

    for (var i in data.articles) {
    output += "<li>";
    output += "<a href = '" + data.articles[i].html_url + "'>" + data.articles[i].title + "";
    output += "</li>";
    }
    $("#badges ol").append(output); // append li
    $("#badges ol").append('</ol>'); // close list

    });
    });
    </script>

    and little html


    <div id = "badges" class = "badges"></div>

    later you can play with little CSS.

    This $(".breadcrumbs li:nth-child(2) a") can be different on other themes but its easily to find right a tag.

    JS code can be easily upgraded for multilang HCs.

    1
  • Wes Drury

    @Vladan - I was able to get everything working but like you mentioned had to change the breadcrumbs child.  Only suggestion I would make is that it also shows the link to the article that you are currently on.  I would actually hide that article and just show the remaining articles.

    1
  • Vladan Jovic
    Community Moderator

    Hi Wes, I agree totally about your suggestion! Thank you.

    0
  • Jessie Schutz
    Zendesk team member

    Thanks Vladan!

    If you're interested, please feel free to do a formal write up of this solution and add it to our Tips & Tricks section. That'll make it easy for other users to find it, and you'll get swag!

    0
  • Wes Drury

    @Vladan - Looks like you can now do this without any JS.  This code was taken from the new theme so you can find the HTML and CSS there.

    <section class="article-sidebar">
    <section class="section-articles collapsible-sidebar">
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
    <ul>
    {{#each section.articles}}
    <li>
    <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
    {{/if}}
    </section>
    </section>

    0
  • Vladan Jovic
    Community Moderator

    Hey Wes, this looks great! Finally we have native responsive theme. Thank you!

    0
  • Vladan Jovic
    Community Moderator

    Hey Wes, it seems for me that this Copenhagen box have little bug. Could you try how this box works on a mobile device? When I click on first of aticle, it needs to show me drop down list of articles, but it goes to this article page...

    Maybe problem is something here:

     

    // Toggles expanded aria to collapsible elements
      $(".collapsible-nav, .collapsible-sidebar").on("click", function(e) {
        e.stopPropagation();
        var isExpanded = this.getAttribute("aria-expanded") === "true";
        this.setAttribute("aria-expanded", !isExpanded);
      });

     

     

    0
  • Julian Luca

    Hi, I would also like to know how to get rid of the "See more" link from the bottom of the "Articles in this section" sidebar articles list.

    I am talking about the Zendesk "Copenhagen" theme  Article page template.

    Right now only 10 articles are shown on that list and I have more than 10. I don't want to make the user click again to go back to the section page and then click again to the 11 and up articles to view them. He should see them listed on the Article page.

    Can I get rid of it?

    Thank you.

    0
  • Brittany Sigler

    Same question as Iulian ^!! Is there a solution? :)

    0
  • Vladan Jovic
    Community Moderator

    List more than ten articles, yes that can be done with a help of zendesk API.
    You need front end dev for this.

    0
  • Nathan Huebner

    The API definitely fixes this, except for the fact that the API returns the entire article body. 

    This works great if you have 11 articles, and you have 1 sentence in each one, but we have pages that have a lot of information.

    Using the API takes 7 seconds to return data for 20 records.

    ** Request would be to have the ability to select the specific field from the API to return, ie:  Title, URL, etc.

    Thanks

    0
  • Vladan Jovic
    Community Moderator

    Agree with you Nathan, that would be perfect!

    0
  • Ashwini Sukhdeve

    @Wes Is there a similar code for sections in category?

    0
  • Wes Drury

    @Ashwini - Since we discussed a couple of different topics in this article.  What exactly are you trying to do and I'll see if I'm able to help.

    0
  • Ashwini Sukhdeve

    @Wes I am referring to your comment on June 15 2016 that shows the code to do it without JS. Thanks!

    0
  • David Bjorgen

    @Vladan, your Javascript solution works well for me, but it displays only 30 records. If I wanted to create a button that move to the next 30 records, how would I go about that?

    0
  • Vladan Jovic
    Community Moderator

    Hey David, glad it helps! In case you have 30+ articles, the easiest will be to pull more articles (max 99 articles).
    How to achieve that?
    Just replace 

    "/articles.json"
    with
    "/articles.json?per_page=99"

    In case you just want the next btn, that will require a larger upgrade of my initial code. 

    0
  • Kolbe

    I wanted this to better match the style already used in our modified Copenhagen theme, so I made some changes.

    For one thing, the section ID can come from the template rather than having to scrape it from the page. This also adds the theme's styling for the list elements, including the current-article theme.

    $(document).ready(function() {

    $.getJSON("/api/v2/help_center/sections/{{section.id}}/articles.json", function(data) {
    var output = "";

    for (var i in data.articles) {
    output += "<li><a href = '" + data.articles[i].html_url + "' class='sidenav-item ";
    if (data.articles[i].id == {{article.id}}) { output += 'current-article'; }
    output += "'>" + data.articles[i].title + "</a></li>";
    }

    $("#article-list").append(output); // append li
    });
    });

    And I made this change to the body of the page:

              <div class="collapsible-sidebar-body">
    <ul id="article-list"></ul>
    <!-- Commented out because the JS above generates the *full* article list from a JSON API call
    <ul>
    {{#each section.articles}}
    <li>
    <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
    {{/if}}
    -->
    </div>
    0
  • Devan - Community Manager
    Zendesk Community Team

    Hello Kolbe,

    This is great! Would you be willing to share this information with other users in our Tips and Tricks section of the Community? Other users could really benefit from this information. 

    Best regards.

    0
  • Kolbe

    Devan - Community Manager I don't mind if someone else wants to share it there, but Google originally led me to this page, so I'm just going to leave my comment here and assume others will be able to find it easily enough.

    0
  • Roman Gladkiy

    Hello Kolbe!

    Thanks for your solution. The only thing - how did you make the templating in the JS file recognizable?

    The templates, like {{section.id}} in the link, simply aren't rendering. Am I missing something?

    0
  • Kolbe

    Roman Gladkiy I haven't looked at this stuff at all since I first published it, so I don't really remember how it all works. I just checked out deployment and it seems like the thing I hacked together 10 months ago is still working, so there should be hope for you!

    I think the point of confusion is that you're trying to use a "JS file", while I didn't do anything outside of the article_page.hbs file. The $(document).ready(function() { function is right at the top of article_page.hbs

    <link rel="stylesheet" href="{{asset 'highlight.css'}}"/>
    <link rel="stylesheet" href="{{asset 'copy.css'}}"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="{{asset 'copy.js'}}"></script>
    <script>
    /* This is some custom thing Kolbe added so that all articles in a section are shown in the sidebar.
    This is adapted from https://support.zendesk.com/hc/en-us/community/posts/211590607/comments/213756968 */
    $(document).ready(function() {

    $.getJSON("/api/v2/help_center/sections/{{section.id}}/articles.json", function(data) {
    var output = "";

    for (var i in data.articles) {
    output += "<li><a href = '" + data.articles[i].html_url + "' class='sidenav-item ";
    if (data.articles[i].id == {{article.id}}) { output += 'current-article'; }
    output += "'>" + data.articles[i].title + "</a></li>";
    }

    $("#article-list").append(output); // append li
    });
    });
    </script>
    0
  • Roman Gladkiy

    Kolbe

    Thanks so much! Wasn't thinking that way :)

    Take care!

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk