English (US)

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

Diziana

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,

Diziana

 

 

49 Comments

  • Nerea Garcia Ramila

    Hi! Thanks for this code and post.

    I was wondering how to maintain the spacing I have in between articles before clicking on 'See All 7 Articles'. Once I click on the link, all hidden article titles appear but they appear with very little space in between. 

    Before clicking:

    After clicking:

    0
  • Andrea

    It doesn't work to me. When I click to "See all articles", nothing happens. 

    Is it because I got a different chunk of code to show the articles? Instead, this chunk of code in question shows articles in a new tab. 

    My support:

    https://support.magicstore.cloud/hc/it/

    And category page which I'm talking about:

    https://support.magicstore.cloud/hc/it/categories/115000039291-MagicStore

    Can you give it an eye or help me in any other way please? 

    Thank you. 

    0
  • Andrea

    P.s.: I also formulate a different question: 

    I'd like that, after clicking on the triangle, would be shown the articles in the subsection. I attach a quick example: 

    The page in question:

    https://support.magicstore.cloud/hc/it/categories/115000039291-MagicStore

    0
  • Trapta Singh
    Community Moderator

    Hi @Nerea Garcia Ramila, Can you please share the URL of your HC so that I can share how to add space between the articles?

    Thanks

    0
  • Trapta Singh
    Community Moderator

    Hi @Andrea Nugnes, can you share the screenshot of the error it is showing to you when you are adding the code and it is not working for you?

    Thanks

    0
  • Angeli Ho

    I still do not see any solutions of how to show all articles on category page without clicking on button.

    0
  • Brooke Luder

    Hi I'm not a coder but I've managed to implement this suggestion and it works great.

    The only thing is if we have articles flagged as internal (visible to agents and managers only) the little lock icons disappear when you expand the list.

    The code on the .hbs page for that is:
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}

    but I'm not sure how to get that working with the example above. I'm assuming it would be somewhere around this part:

    $(_allarticles).each(function(idx, itm){
    if(itm.draft==true){
    } else {
    _arthtml = _arthtml + '<li class="article-list-item'+(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>';
    }
    });

    Can anyone help me?

    0
  • Nicole Saunders
    Zendesk Community Manager

    Hi Brooke - 

    I'm sorry you haven't gotten an answer yet. If you haven't found resolution on it elsewhere, you could try posting it as a new question in the Guide Q&A topic to give it more visibility. 

    0
  • Karl Hawthorne

    To further modify the script so that all CSS is retained including promoted links (like Randy Scheck wanted) I modified the following line:

    _arthtml = _arthtml + '<li class="'+(itm.promoted==true?'article-list-item':'article-list-item')+'">
    <span class="icon-star" data-title="Promoted article" style="'+(itm.promoted==false?'display:none':'')+'">&nbsp;</span>
    <a class="article-list-link" href="'+itm.html_url+'">'+itm.title+'</a></li>';

     

    0
  • Danila Slezko

    Hi all, someone knows how to show all articles on the category page without clicking on the "See-All-Articles" for this article's solution.

    If anyone knows how to do this, please share it. I think it will be very useful for everyone, especially considering that in the Zendesk theme app v.2 {{section_tree_with_articles}} and {{categor_tree_with_articles}} does not work.

    0
  • Sparkly
    Community Moderator

    @... Check out the awesome tip on how to do that from @...

    0
  • Danila Slezko

    Hi @.... I'm a little confused. You provided the link "awesome tip" on the current article. I already applied the solution from the current article in my Zendesk theme, and it works great (images below). But my question was about displaying all articles from a section on a category page without clicking on the button "see all articles." The same question was from @Angeli Ho above. 

     

     

    0
  • Sparkly
    Community Moderator

    I am sorry I didn't see it was this article 🙈

    You'll need adjust this script from above a little bit.
    Instead of doing the API call on user click, you'll want to fetch on load, and cycle through all sections, and get its articles.

    I don't have an exact sample script for that, but here's how that could work

    - Execute script on page load
    - Find section IDs of current category
    - Loop through those sections and get the articles for that section and add article links to the DOM

    0
  • Danila Slezko

    Hi @..., thank you for your help. Yes, I understand it and try to modify the script. I'm not so cool in the JS, so that is why I ask to share a solution about it. In any case, If someone already did it,  please share.

    0
  • Anusha Arora

    Hi! My website currently lists articles under section but we recently added subsections to our website. Is there any way we can display articles in subsection as a dropdown or in some other format in our category page via code edits. Something like this:

    Category Name

    Section name

    Subsection name

    • articles in subsection
    0
  • Brett Bowser
    Zendesk Community Manager

    Hey Anusha,

    It may be worth taking a look at the following documentation to see if that points you in the right direction:

    I hope this helps!

    0
  • Noel Hayden

    I am still confused. I am looking for a way show show all the articles under a section on the category page when the category page first loads (don't have to click anything on the page). It seems there is an article here: https://support.zendesk.com/hc/en-us/community/posts/4409506679962#community_comment_360000010847 the references how to show less than 6 (the default amount) but just showing more does not seem possible. It looks like Jeremy Tellier earlier in the thread alluded to the same question and that he solved it but the solution was unclear. Can anyone tell me how to do this? (The code on this thread originally seems to be focused on showing all the articles once you click but not all by default.)

    1
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Noel Hayden,

    Here's a similar thread which you might find helpful: 

    https://support.zendesk.com/hc/en-us/community/posts/4865868866586-Show-all-articles-on-Category-page-for-Zendesk-Guide-Help-Centre

    Let me know if you have any questions!

    Tipene

    0
  • Noel Hayden

    Tipene Hughes Yes! This is great thank you.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post
Powered by Zendesk