Article page - list of all articles in this section

Can anybody help? 

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!

Hi Jessie,

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

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

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.

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

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

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!

@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>

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

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);
  });

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.

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

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

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

Agree with you Nathan, that would be perfect!

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

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

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

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

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. 

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>

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.

@Devan 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.

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?