Article page - list of all articles in this section | Community
Skip to main content

Article page - list of all articles in this section

  • June 2, 2016
  • 28 replies
  • 0 views

Show first post

28 replies

  • April 12, 2021

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

Roman11
  • April 13, 2021

@Kolbe

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

Take care!


  • June 16, 2021

The above code was very helpful! I've adapted it a little to piggyback off of the out-of-box Copenhagen templating so if there are more than 10 articles in a section, have the below code append to the existing list. 

$(document).ready(function () {
  $.getJSON(
    "/api/v2/help_center/{{help_center.locale}}/sections/{{section.id}}/articles.json",
    function (data) {
      var output = "";
      count = 1;
      for (var i in data.articles) {
        if (count > 10) {
          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>";
          $("#articles-list").append(output);
        }
        count++;
      }
    }
  );
});