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
});
- There is a variable named var_hc, add your Zendesk URL there.
for an e.g: var_hc='https://support.zendesk.com'
- Save and publish the changes.
- Click see all articles link.
Let us know if you face an issue.
Cheers,
Thanks for coming back and letting us know that you got that sorted out and for sharing the solution, Hedda!