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

Beantwortet

13 Kommentare

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @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

     

    0
  • Adrien Bou

    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 !

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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.

    0
  • Adrien Bou

    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

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

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

    0
  • Adrien Bou

    Okay no problem, thank you again for your help !

    0
  • Sawako Kubo

    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? 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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.

     

     

     

    1
  • Sawako Kubo

    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

    0
  • Roman Hladkyy

    Hey Ifra Saqlain,

    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?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

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

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

     

    0
  • Roman Hladkyy

    Hello Ifra Saqlain
    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. 

    0
  • Roman Hladkyy

    Adrien Bou Ifra Saqlain
    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.

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk