Breadcrumb & see-all-articles (Zendesk Guide Helpcenter)

@Adrien Bou, 

For the second query:

(2) - You can show all articles on the same category page using the below code:

$(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

});

Original: https://support.zendesk.com/hc/en-us/community/posts/4409515207578-List-all-articles-for-each-section-s-on-the-same-category-page

For first query:

(1). Which version of th API are you using?

you can check the API version here in your HC top area:

Thanks

Team

Hello and thank you very much for your help !

1) I use API v2

2) Where do have I add this code ? At the end of 'script.js' ?

And what do I add here ?

This is url of my page :
https://assistance.maison-berger.fr/hc/fr/categories/360003522097

So do have I add this ? : 
var hc_url = 'https://assistance.maison-berger.fr'

Thank you !

Hello,

You haven't jQuery CDN

You need to add the jQuery CDN to your document_head.js file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

See the below screenshot:

One more thing, you need to add your default class name in the code to get the same UI, see the below screenshot, how I did:  add the class name in the middle of this line  - article-list-item 

Before adding class-name:

After adding class-name:

And, will get back to you with your second query.

Hey,

It works pretty well !! Thank you very much for your help :)

Then, for the breadcrumb (first query), have you an idea to fix my problem ?

I'm using api V2

I'll figure it out after some time, I'm at the office at this time :)

Okay no problem, thank you again for your help !

Hi Ifra and Adrieen,

 I'm having the same breadcrumbs issue with Template API v1.

Have you solved the issue? If so, could you share how you fixed it? 

Hey awako Kubo and Adrien Bou, it's because you didn't create the language variant of your category and section translations.

1). Create a demo category with English (US). Save it.

2). Then create a translation variant of this category. I chose Arabic. After selecting, you will get an empty   "Name" box and an empty  "Description" box. Add translated Name and Description as I did, you can see the in the below image. Save it.

3). Create a section inside this category and use default language as I did in the below image. Save it.

4). After that, create the translation of this section, I chose Arabic as you can see in the below image. Save it.

5). Create an article inside this section in your default language. Save and Publish it.

6). Create its variant. I chose Arabic, as you can see in the below image. Save and Publish it.

7). Now, you can test it, you will definitely get all the breadcrumbs of this demo category in both languages. If you didn't create a translated category, then you can't see proper breadcrumbs. 

8). Output:  In Arabic

I repeated the same process for the French Language. I have all breadcrumbs.

Hope it'll help you and if any confusion feel free to ask :)

Thank You

Team

Also, click on this text.

thank you for the reply, Ifra.

I created the English version of categories and sections, and also added the articles. However, the categories do not display in the breadcrumbs. 

Our support page structure is like the following.

Home > Category (MiiTel Support) > Section > Article (some Section is "Section1 > Section2 > Article")

The Category, which name is "MiiTel Support", doesn't show up in the breadcrumbs when I open one of Section or Article. Japanese breadcrumbs doesn't have this issue. Only English and Indonesian Bahasa breadcrumbs have this issue :(

Home URL: https://support.miitel.jp/hc/en-us (If you click "MiiTel" in Explore by Product, you can access Category)
Catrgory URL: https://support.miitel.jp/hc/en-us/categories/36000580843
Section URL: https://support.miitel.jp/hc/en-us/sections/360012952572

Hey @ifra,

I'm having the same breadcrumbs problem with Ukrainian and Chinese languages. The categories' translations are there, and language variants for both sections and articles are also present. I'm using V1.

What could be the issue?

That should appear, no matter it's V1 or V2. 

Why don't you create a demo category and then test?

Hello @ifra
It does appear when you create a new category.
However, the new Copenhagen theme (without any custom code) won't reflect it as well.

So what next? Do we need to move all the articles and create new sections within new category?
What if it was linked in many places (e.g apps and company website)?

It just shouldn't be like that, someone has to take a look at it. 

@adrien13 @ifra
Looks like I found the reason for the breadcrumbs issue.

The matter is:
You may have multiple categories in different languages. The breadcrumbs should be fine as long as all of them are translated into all the languages.
As soon as you have only one category being translated to French, the breadcrumbs will simply skip its name.

Solution:
Add another category (even if you don't need one), translate its name to French and you should be good to go.
As for the cons, this may add another button (the Category itself) to the Home page, while having only one category reflects sections directly on the Home page.