Previous and Next article navigation

Answered

34 Comments

  • Trapta
    Comment actions Permalink

    Hi @Jim,

    Please post your question under Questions & Answers topic :)

    Well, here we go -

    Zendesk does not provide any native component to achieve this. However, you can achieve this using Zendesk HC API and a bit of javascript.

    Also, if you are interested in some sort of plugin, then we have one for you, get in touch with us at info@diziana.com. You may also have a demo for it -

    https://support.anodot.com/hc/en-us/articles/207745005-About-Metrics

    Cheers

    Team Diziana

    1
  • Vladan Jovic
    Comment actions Permalink

    Hi Jim and welcome to the community!

    As Trapta said, you can achieve that with using of ZD API. Here is the way to add prev and next buttons/links into article page. Only articles from current category included in the prev/next list.

    - On Article page, put somewhere prev and next buttons. If you are using Copenhagen Theme find this:

     <header class="article-header">

    and put the following code under this line. Here is the code:

    <div class="article-head">
    <div>
    <a href="#" class="article-nav">prev</a>
    <a href="#" class="article-nav">next</a>
    </div>
    <div id="articles"></div>
    <script>
    $(document).ready(function() {
    var catId = $(".breadcrumbs li:nth-child(2) a").attr("href").match(/[0-9]+/); // sometimes it can be nth-child(1) if the name of category is first in article breadcrumb

    $.getJSON('/api/v2/help_center/en-us/categories/'+catId+'/articles.json', function(data) {
    // change en-us to your Help center lang

    console.log(data);// intialize list
    $("#articles").html('<ul>');
    var output = "";

    for (var i in data.articles) {
    output += "<li >";
    output += "<a id='id-" + data.articles[i].id + "' href = '" + data.articles[i].html_url + "'>" + data.articles[i].title + "";
    output += "</li>";
    }
    $("#articles ul").append(output); // append li
    $("#articles ul").append('</ul>'); // close list
    var prev = $('#id-{{article.id}}').parent().prev().find('a').attr('href');
    var next = $('#id-{{article.id}}').parent().next().find('a').attr('href');
    $('.article-head a:first-of-type').attr('href',prev);
    $('.article-head a:last-of-type').attr('href',next);
    });
    });
    </script>
    </div>

    Please note two thing into this code: 

    // sometimes it can be nth-child(1) if the name of category is first in article breadcrumb
    // change "en-us" to your Help center lang if you use other language


    - Into CSS file put this code


    div#articles {
    display: none;
    }

    .article-head a[href='#']{
    opacity:.2;
    cursor: none;
    }

    Save, publish and should be fine. Please try and let me know if it works.
    If doesn't work please share your Help Center url with me to take a look.

    DEMO

     

    3
  • Jim Nichols
    Comment actions Permalink

    @Vladan, I'm not using the Copenhagen theme but I did try inserting this code. The prev and next both appear but clicking seems to not progress through the category I'm in... it goes back and forth between 2 different categories in a somewhat sequential fashion but no idea why it's going back and forth between 2 categories.

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Jim, any chance that I can get url of your Help center, or maybe sandbox? 

    0
  • Jim Nichols
    Comment actions Permalink

    cunesoft.zendesk.com (no sandbox)

    0
  • Jim Nichols
    Comment actions Permalink

    although I think I'm going to switch to Copenhagen

     

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Jim, I just made an user account on cunesoft.zendesk.com, but I can't see any article there. 

    0
  • Heather R
    Comment actions Permalink

    @Vladan

    We just tested this out on our sandbox and it works beautifully in Copenhagen.  Thank you!

    0
  • Vladan Jovic
    Comment actions Permalink

    I'm very glad to hear that, Heather! Thank you for your feedback!

    0
  • Jim Nichols
    Comment actions Permalink

    I switched to Copenhagen and it works fine. 

    0
  • Katherine Allen
    Comment actions Permalink

    I'm on Copenhagen but having the same problem as @Jim Nichols. 

     

    https://joinhandshake-impl.zendesk.com/hc/en-us

    Any idea why it would be jumping from section to next section? for example, I have section 1 with articles 1.1, 1.2. When I click 'next' from 1.1, it takes me to 2.2. Seems like its not only articles, but also sections within the category.

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Katherine,

    Here is the code if you need to prev/ next goes through current section (not category) only.
    Please try it out and let us know if there is any issue. Thank you!

    <div class="article-head">
    <div>
    <a href="#" class="article-nav">prev</a>
    <a href="#" class="article-nav">next</a>
    </div>
    <div id="articles"></div>
    <script>
    $(document).ready(function() {
     var _location = $(".breadcrumbs li:nth-child(3) a").attr("href").split('/en-us/');
    var _split = _location[1].split('-')[0];
    var secId = _split.split('/')[1];

    $.getJSON('/api/v2/help_center/en-us/sections/'+secId+'/articles.json', function(data) {
    // change en-us to your Help center lang

    console.log(data);// intialize list
    $("#articles").html('<ul>');
    var output = "";

    for (var i in data.articles) {
    output += "<li >";
    output += "<a id='id-" + data.articles[i].id + "' href = '" + data.articles[i].html_url + "'>" + data.articles[i].title + "";
    output += "</li>";
    }
    $("#articles ul").append(output); // append li
    $("#articles ul").append('</ul>'); // close list
    var prev = $('#id-{{article.id}}').parent().prev().find('a').attr('href');
    var next = $('#id-{{article.id}}').parent().next().find('a').attr('href');
    $('.article-head a:first-of-type').attr('href',prev);
    $('.article-head a:last-of-type').attr('href',next);
    });
    });
    </script>
    </div>

     

    0
  • Katherine Allen
    Comment actions Permalink

    Hi Vladan,

    Unfortunately, that code does not work! It is just showing me grayed out previous and next buttons, unless there was a change I needed to make in css or html.

    Also, is it possible to make the next button to go from article to article within a section, and then at the last article in a section, the next button goes to the next article in the next section?

    Thank you so much!!! 

    Katherine

    1
  • Vladan Jovic
    Comment actions Permalink

    Hey Katherine, sorry for delayed response. I've updated this code 7 days ago but forgot to ask you to try with this one.

    If it doesn't work again, would you be able to share your Help Center URL with us? It is much easier to determinate where is a bug on that way. Thanks!

    0
  • Meghan Mahar
    Comment actions Permalink

    Hi Vladan, 

    I entered the code you posted on June 24th and it seems to work great, except after I click the Next button and it takes me to the next page, the pages no longer display the Prev/Next buttons. Have you ever seen that?

    0
  • Vladan Jovic
    Comment actions Permalink

    Hey Meghan, hmm I'm not sure what should be the reason for that. Any chance you can share your HC url with me? Or if you can check console logs in your browser?

    0
  • Meghan Mahar
    Comment actions Permalink

    Hi Vladan. I figured out the issue with the links displaying, but now I'm having a similar issue to Katherine with the page links jumping around rather than linking in order. Here's my site: https://decisiv.zendesk.com/hc/en-us

    Thanks!

    0
  • Vladan Jovic
    Comment actions Permalink

    Hello Meghan, I just had a look and it seems to works fine for me. Example https://decisiv.zendesk.com/hc/en-us/articles/115002389994-Saving-Reports

    Could you please take a look again and provide me with a link to an article with the issue?

    Thanks!

    0
  • Heather R
    Comment actions Permalink

    We ran into the issue where the Prev and Next buttons were taking us from Section to Section but would like it to take us from Article to Article within the same Section.

    So I used the code you posted on August 8 and it doesn't work for me either. The "prev" and "next" buttons are greyed out, the mouse over makes the pointer disappear and the functionality itself doesn't work. Help!

    https://mijis1386274751.zendesk.com/hc/en-us/articles/203478727-2016-5-Release-Notes# 

    0
  • Vladan Jovic
    Comment actions Permalink

    Hey Heather, sorry, my bad. There was:

    /en-us/categories/

    instead of

    /en-us/sections/

    Please try again.

    https://support.zendesk.com/hc/en-us/community/posts/115006965467/comments/115004641727
    (edited comment is pending approval and should be updated shortly.)

    0
  • Heather R
    Comment actions Permalink

    Yes that was it! Thank you.

    0
  • Eliza Crawford
    Comment actions Permalink

    Hi Vladan Jovic - I'm having an issue where it works for when my help center is in English, but when I switch to Swedish or another language the previous/next buttons are greyed out. 

     

    I think it's because of this line:  $.getJSON('/api/v2/help_center/en-us/sections/'+secId+'/articles.json', function(data) {

     

    Is it possible to replace the 'en-us' with a variable so it automatically switches (e.g. 'fr') based on what language I'm using?

    0
  • Trapta
    Comment actions Permalink

    Hi @Eliza,

    Please replace 

    $.getJSON('/api/v2/help_center/en-us/sections/'+secId+'/articles.json', function(data) {

    with

    $.getJSON('/api/v2/help_center/'+$('html').attr('lang').toLowerCase()+'/sections/'+secId+'/articles.json', function(data) {

    Let us know how it goes for you.

    Team Diziana

    0
  • Eliza Crawford
    Comment actions Permalink

    Hi @Trapta, 

     

    That didn't work.  Is there something wrong with the secId variable in the beginning since it still references '/en-us/'?

    Original Script:

    <script>
    $(document).ready(function() {
    var _location = $(".breadcrumbs li:nth-child(3) a").attr("href").split('/en-us/');
    var _split = _location[1].split('-')[0];
    var secId = _split.split('/')[1];

    $.getJSON('/api/v2/help_center/en-us/sections/'+secId+'/articles.json', function(data) {

    console.log(data);// intialize list
    $("#articles").html('<ul>');
    var output = "";

    for (var i in data.articles) {
    output += "<li >";
    output += "<a id='id-" + data.articles[i].id + "' href = '" + data.articles[i].html_url + "'>" + data.articles[i].title + "";
    output += "</li>";
    }
    $("#articles ul").append(output); // append li
    $("#articles ul").append('</ul>'); // close list
    var prev = $('#id-{{article.id}}').parent().prev().find('a').attr('href');
    var next = $('#id-{{article.id}}').parent().next().find('a').attr('href');
    $('.article-head a:first-of-type').attr('href',prev);
    $('.article-head a:last-of-type').attr('href',next);
    });
    });
    </script>

    0
  • Trapta
    Comment actions Permalink

    Hi @Eliza,

    If you are putting this code in the article template then, remove

    var _location = $(".breadcrumbs li:nth-child(3) a").attr("href").split('/en-us/');
    var _split = _location[1].split('-')[0];
    var secId = _split.split('/')[1];

    and replace,

    $.getJSON('/api/v2/help_center/en-us/sections/'+secId+'/articles.json', function(data) { 

    with

    $.getJSON('/api/v2/help_center/'+$('html').attr('lang').toLowerCase()+'/sections/'+{{section.id}}+'/articles.json', function(data) {

    Let us know how it goes for you.

    Team Diziana

    1
  • Eliza Crawford
    Comment actions Permalink

    Thank you!  The previous/next button goes to draft articles only in the localized languages, but otherwise it works perfectly.

    0
  • Trapta
    Comment actions Permalink

    Glad to hear that it worked. Enjoy :)

    0
  • Rachel Roberts
    Comment actions Permalink

    I replaced with the sections link below but mine do not link anywhere and just jump to the top of page when clicked

    /en-us/sections/
    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Rachel,

    We reached out to Trapta and it looks like she's been rather busy lately. We've passed your question along for when she's available to answer community questions again.

    In the meantime I've attached some useful Help Center documentation for you below:

    Cheers!

    0
  • Rachel Roberts
    Comment actions Permalink

    Thanks Brett I'm actually all set now

    0

Please sign in to leave a comment.

Powered by Zendesk