Recent searches
No recent searches
Guide tip: How to make section pages without pagination
Posted Sep 09, 2021
Hi folks—I've benefited from various posts here, so let me try to pay it forward. :) By default, Zendesk Guide will only show 30 articles on a Section page and relies on pagination if you have more. I need to show all of a section's articles at once, so I put together some JS to do it.
Edited 2021-09-13:
Well don't I feel silly. I thought of a much simpler and efficient way to do this. :) Even better, now it works without modifying the basic Copenhagen 'section_page.hbs' template.
Additional 'style.css' rules recommended but not required:
@media (min-width: 768px) {
.long-article-list {
columns: 2;
}
}
@media (min-width: 1024px) {
.long-article-list {
columns: 3;
}
}
Append to 'script.js':
// Zendesk Guide section pages without pagination (v2).
// author: Ashleigh Rentz, koresoftware.com
// license: https://mit-license.org/
window.onload = function() {
unpaginatedSections();
};
function unpaginatedSections() {
// Only execute this if we're on a paginated section page.
if (document.getElementsByClassName("pagination")[0] == null) return;
// Does the URL specify a page number? If so, yield to the user.
if (document.URL.includes('?page=')) return;
// Start with the articles listed on the first page
var long_list = document.getElementsByClassName("article-list")[0].innerHTML;
var next_url = document.getElementsByClassName("pagination-next-link")[0]
.getAttribute('href');
var is_finished = false;
// Request the next page
var next_page = new XMLHttpRequest();
next_page.open("GET", next_url);
next_page.responseType = 'document';
next_page.send();
next_page.onload = function() {
// If something went wrong, leave pagination in place.
if (next_page.status !== 200) return;
// Add the articles from this page of results to our list.
long_list += next_page.response.getElementsByClassName("article-list")[0]
.innerHTML;
// Check for another page.
try {
next_url =
next_page.response.getElementsByClassName("pagination-next-link")[0]
.getAttribute('href');
next_page.open("GET", next_url);
next_page.send();
}
catch (e) {
// No more pages.
is_finished = true;
}
finally {
if (is_finished) {
// Write the new list to the current page.
document.getElementsByClassName("article-list")[0].innerHTML = long_list;
// Add a class to allow styling via CSS.
document.getElementsByClassName("article-list")[0].classList.add(
'long-article-list');
// Remove the pagination controls.
document.getElementsByClassName("pagination")[0].innerHTML = '';
};
};
};
};
I'll put the original (complicated and inefficient) version in a comment below for posterity, but you probably shouldn't use it. ;)
0
6 comments
Dave Dyson
Wow, thanks for posting this tip, Ashleigh!
0
Ashleigh Rentz
My original post saved for posterity, but you're almost certainly better off using the revised version above.
---
If you haven't deviated from the base Copenhagen theme too much, the 'section_page.hbs' and 'category_page.hbs' files include SVG tags to draw the padlock and star icons. I didn't want to hard-code those into the script, so I removed them from the templates and uploaded them as separate files in the 'assets' folder. Now we can apply them via 'style.css'. I also display the non-paginated list in columns if the user's viewport is wide enough.
Next, we need a 'div' in 'section_page.hbs' that we can overwrite. Leave the pagination helper in place as a safe fallback.
And finally, here's the Javascript:
I'm not a developer by trade so this could surely be improved, but hopefully it's useful to someone out there. Cheers!
0
Bruce Michelsen
In using this, due to how the code block wrapped lines above, I removed spaces and returns in several lines. For example, I changed this:
... to this:
I'm seeing an issue with getting the links in the pagination pages.
Is the problem that getElementsByClassName has to look at an element within the link tag?
When inspecting the page, I see the following where the class is in the li.
If I use the following, then I can get the href out of the a tag within the li with class="pagination-next" for the document:
... and for the response:
1
Ashleigh Rentz
Hi Bruce - The line breaks are all intentional, JavaScript allows that and I wanted to keep it as human-readable as possible. But there's no reason not to change it, either. :)
I think you're right about this being a versioning issue—it looks like you're still on Templating API v1? I wrote this script based on Copenhagen 2.9.0 and Templating API v2, and I see that the 'pagination' helper was indeed updated between the two.
When inspecting my page, here's what the nav block looks like:
So my script failed on you because your 'pagination' helper doesn't assign a class to the link itself, only the list item. There might be other differences too, but it looks to me like you're on the right path for adapting this to the v1 API. Do you have it working?
0
Bruce Michelsen
Ashleigh,
My editor was complaining unnecessarily or I had made some syntax error that I fixed in tightening this up.
Thanks.
0
Trevor Smith
Ashleigh,
Thank you so much for this great workaround! I've been looking for a solution to the 30 article limit for some time.
Bruce - are you able to share your complete example? I am also on V1, I was able to get the articles on the second page to show, along with removing the pagination - however, every time it executes, it seems to be overwriting the current article list on the first page. In place of the first-page list, I'm getting '[object HTMLLIElement] ' displayed on the page.
I could technically assign the 'new' list to a different div, but I'd rather append the original div to create one entire list so I can filter through it.
**EDIT - I figured it out - had to change "+=" to just + in this:
and had to change "=" to "+=" in this:
Here is the full script that now works for me on V1...
Best,
Trevor
0