Previous and Next article navigation

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

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

@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.

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

cunesoft.zendesk.com (no sandbox)

although I think I'm going to switch to Copenhagen

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

@Vladan

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

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

I switched to Copenhagen and it works fine. 

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.

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>

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

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!

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?

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?

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!

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!

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# 

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.)

Yes that was it! Thank you.

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?

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

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>

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