List all articles for each section(s) on the same category page

Posted Feb 16, 2016

Hi there,

Zendesk Component Reference: Category with section and article list.

Background: On category page when we have more articles (more than 6) for each section/sections, then there exist a "See all link" that would take you to the main section page in order to list/show all its articles.

We have used existing Zendesk component and add a capability (JS) through which we can pull/list all the article for the section on the same category page. (without redirecting users to the main section page). Whenever user click "See all link", the next set of the articles would appear.

How to do it:

Add below JS to the JS section of HC:

$(document).ready(function(){

/**
@add your hc domain here
@for eg: var hc_url = 'https://testcompany.com'
*/
var hc_url = 'Your_HC_URL'

var _allarticles = [], 
_sorted = [],
_artHtml = '',
_id, 
_url;

var _articles = function(article){
 $.ajax({
 url: _url,
 type: 'GET',
 dataType: 'json',
 success: article
 });
};

// function for see all articles button in category
$('.see-all-articles').click(function(e){
 e.preventDefault();
 _id = $(e.target).attr('href').split('/sections/')[1].split('-')[0];

 if(typeof HelpCenter.user.locale == 'undefined') {
 HelpCenter.user.locale = window.location.pathname.replace('/', '').replace('?', '/').split('/')[1];
 }

 _url = hc_url+'/api/v2/help_center/'+HelpCenter.user.locale+'/sections/'+_id+'/articles.json';
 _articles(function(data){
 _allarticles = data.articles;

 if(data.count>30){
 for(var i = 1; i<data.page_count; i++){
 _url = data.next_page;
 _articles(function(data){
 _allarticles = _allarticles.concat(data.articles);
 _arthtml = '';
 $(_allarticles).each(function(idx, itm){
 if(itm.draft==true){
 } else {
 _arthtml = _arthtml + '<li class="'+(itm.promoted==true?'article-promoted':'')+'"><span data-title="Promoted article" style="'+(itm.promoted==false?'display:none':'')+'">★</span><a href="'+itm.html_url+'">'+itm.title+'</a></li>';
 }
 });
 $(e.target).parent().find('ul.article-list').html(_arthtml);
 $(e.target).hide();
 })
 }
 } else {
 _arthtml = '';
 $(data.articles).each(function(idx, itm){
 if(itm.draft==true){
 } else {
 _arthtml = _arthtml + '<li class="'+(itm.promoted==true?'article-promoted':'')+'"><span data-title="Promoted article" style="'+(itm.promoted==false?'display:none':'')+'">★</span><a href="'+itm.html_url+'">'+itm.title+'</a></li>';
 }
 });
 $(e.target).parent().find('ul.article-list').html(_arthtml);
 $(e.target).hide();
 }

 });
});
// function for see all articles button in category ends here

});