Show less than 6 articles on Category.hbs template
Zendesk level: Beginner
Knowledge: Copy and Paste
Time Required: 5 minutes
Zendesk will automatically display 6 articles under each section in your Help Center. For some six is too many and would like to show less especailly if they have alot of sections under each category. To make things a little neater we can add some code to only show 3 articles at a time.
**Credit goes to Socorro Fernandez
The CSS Code does not seem to work for me on the Copenhagen Theme but I instead accessed the category_page.hbs template and added the following code to the bottom of the page:
<style>
.article-list li:nth-child(n+4) {
display: none;
}
</style>
This will hide all but the first 3 articles in the article list of the category page. I chose to put this directly on the category page because if I put the main CSS page, it would also hide articles on the section_page.hbs which I do not want to happen.
For the issue of the see all articles link not displaying, locate the following code on your category_page.hbs:
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
I found that the more_articles is a true or false value. It will become true if there are more than 6 articles. This is why you will not see the link with sections that have less than 7 articles.
If you don't mind having the link show up for all sections regardless of amount of articles, remove the bolded {{#if more_articles}} and {{/if}} from above. Results should look like this:
If you do not want the links to show up for anything less than 4, we need to define that we want these to show up for sections that have 4, 5 and 6 articles. Add the following bolded code after the{{/if}} but before the {{else}} as shown in the code above on the category_page.hbs template . The code will end up looking like this:
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{#is article_count 4}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/is}}
{{#is article_count 5}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/is}}
{{#is article_count 6}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/is}}
{{else}}
This makes my category page look like this:
A few different solutions here but I hope this helps!
Good luck!
-
Anyone have whatever code that's needed to SHOW ALL ARTICLES instead of only showing 6 in each Category by default?
-
Hi Wes,
I am hoping that you may help me with an issue I am experiencing after implementing the code that was provided here. I created a ticket, I went back and forth with your agents, but they couldn't help and asked me to post it here so hoping that posting it here actually brings a resolution.
I used the code provided in this article to change the number of articles that display on home page to be 3 under each section. It did that, but if I click on a category it displays two links under each section. You need to have 10-12 articles (more than 6 I think) under the sections in the category for the issue to occur. How can I fix that? (See Attachment) Please help.
-
@Gizem - Is your HelpCenter open to the public so I can take a look. If so please include the URL.
-
Hi Wes,
Thank you for your message. Unfortunately, it is not open to public. Here is a url to our help center: https://teachpoint.zendesk.com/hc/en-us
Please let me know what I can provide you as info. to make it easier to troubleshoot.
Thank you again,
Gizem
-
Hi Wes,
Did you get a chance to review my comment above? Any help you can provide would be greatly appreciated.
Thanks,
Gizem
-
@Gizem - Its hard for me to troubleshoot without actually viewing the code of your Help Center. On the category page HTML tab can you remove
{{/each}} {{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a> {{/if}}Let me know what this does. I just installed this code on a custom theme and it worked fine however its custom and all the CSS is custom.
-
Hi Wes,
Thank you so much for your comment. I removed that code and there is no duplicate link issue anymore, but even if there is more than 6 articles under a section the link always displays as "see all 6 articles" on a category page. Looks like it doesn't count the total number of articles correctly and display the number accordingly under sections if it is more than 6 articles. This issue only happens on category page.
Gizem
-
@Gizem
Here is the relevant code from my JS that produces what you are looking for:
// Limit Article List to display only 3 entries
if (document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li');
var articleCount = articles.length;
var moreLink = $(categories[j]).siblings('.see-all-articles');
var moreArticles = moreLink.text();
if (moreArticles != "") {
articleCount = moreArticles.replace("See all","");
articleCount = +articleCount.replace("articles","");
moreLink.hide();
}
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
}// change the heading title
var catHeader = $(categories[j]).parent().find('h3 a');
var catTitle = $(catHeader).text();
var catHref = $(catHeader).attr('href');
$(catHeader).text(catTitle
//+ " (" + articleCount + ")"
);
if (articleCount > 3) {
var newSeeAllText = '<a class="see-all-articles" href="' + catHref + '">See all ' + articleCount + ' articles</a>';
var newSeeAll = $(categories[j]).append(newSeeAllText);
}
}}Hope this helps.
Frank on aarpfoundationtaxaide.zendesk.com
-
Hi Frank,
Thank you for your comment. That's the code I used and removed the code from Categories page that Wes suggested to avoid the duplicate links on Category pages. The issues of displaying the total articles link count as 6 when there are more than 6 articles still remains.
Gizem
-
I'm cross posting this as I think the js solution is bloated and fragile. Just use CSS:
.recent-activity-item:nth-of-type(1n+4) {display: none;}
Of course I'm using the list item class for recent activity items, but this will work with any of 'em. The 1n+4 just say "for any of these item types from 4 on, kick in the following code".
-
I'm having the same issue as Gizem, where on the category and section pages, I get double links.. and if I redact the code Wes mentioned on Jan 14 to fix that I do get one link, but the link reads "See all 6 articles" for every section. Gizem did you ever figure this out?
-
@Elizabeth - Please remove the code that you have and try this:
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
}
}
} -
@Rob - CSS will not work here as it would also remove it from the section page as it would only show 3 articles there and not all of them. You would have to add your own class to make it work but even then the .see-all- articles would only show up if you had more than 6 articles. While what you have works fine with recent activity items it would not work for the sections.
-
Hey Wes!
I have copied this exact code, everything works great except my "See all 30 articles" link is linking to an undefined url. Any help would be greatly appreciated.
Edit: Thanks Wes! I ended up grabbing one of our engineers to help me get it sorted. It's working now! Thank you for the help and all the help you continue to give others!
-
@Jill - I'm taking a look at things now.
-
@Jill - You have a couple of copies of the code currently active, can you copy and paste my code only in there and remove the code that you have.
-
@Wes - Hi Wes,
First off I want to thank you for all your articles in the Zendesk Community. I have been reading and applying a lot of them when setting up the Help Center for our company.
My question is related to this topic and the way you can limit the number of articles showing under each section in a category.
I want to separate the way the category lists the sections with it´s articles.
In one category I have added subsections in the listing and in that category I do not want any articles to show under each section. I have achieved this with the following code in the JS-section.
$(document).ready(function() {
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
$(categories).hide();
var more = $('.see-all-articles');
$(more).hide();
}This hides the articles from showing underneath each section in all my categories and my problem is that I now have one or more categories where i want to list articles underneath each section.
I am not sure this makes sense but if you check https://specter.zendesk.com/hc/sv and click on "Hjälptexter" you can see that this category does not have any articles showing unless you click on them. This is the way i want to have this listing. But if you click on "Vanliga frågor & svar" thats where i want to show articles underneath each section.
Hope you or anyone have some tips on how to solve this.
Thank you!
-
I'm getting a similar issue where I have multiple "see more" links under a particular section.
Wes, I tried your latest code but it didn't fix the issue. Any help would be greatly appreciated!
Thanks,
Tim
-
@Tim
I just tested and it seemed to work correctly on the Wiry Merchant theme. What theme are you using and make to use the code below.
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
}
}
} -
@Wes
That would explain the issue. I must have missed that detail, my apologies. I'm using Swiftest Elk.
Thanks,
Tim
-
Be right back let me test with that theme and see if I run into any issues.
-
It worked correctly in the Swiftest Elk as well. See screenshot below.
Can you post a link to your Help Center so that I can see what you have on the backend.
-
Unfortunately it isn't public yet. Is your screenshot from your home page? I'm happy to provide specific code if that helps.
From the home page, everything is good. It is once I click a category and then get directed to the category page that I have the issue.
Thanks,
Tim
-
@Tim, Got it I was only looking at the home page.
Give this code a try:
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}}
}
} -
Thanks. That did solve the problem on the category page but now there are no links in any sections with less than 'see all 8 articles'. For example, the 'OMS Introduction' section actually has 6 articles but the link to see more has now disappeared.
-
The links for less than 8 articles have disappeared from the home page as well.
-
Hi Wes,
I want to follow up here. Any chance you have a solution for this?
Thanks,
Tim
-
Hi Wes,
When I apply the code as suggested, it limits my articles to 3 and displays a single "See all..." link. However, my issue is that I have two sections that have 4 articles only. These are also correctly limited to display 3 articles but there is no "See all..." link. Any ideas?
-
Hi Everybody, I wanted to post this here because I've been having lots of problems getting the "Show less than 6 articles in a section in Help Center" to work on my Help Center's Home Page with accordions and hopefully it'll stop anybody else having the same issues as me.
Issues experienced -
"See all # articles" not displayed
"See all # articles" URL undefined leading to 404 error page
"More...See all # articles" shown
"More..." and "See all # articles" shown as two separate URLs
"See all 6 articles" shown when there are more than 6 articles
For Home Page with Accordions.
JavaScript
// Limit Article List to display only 3 entries
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
}
}
}Home Page HTML (only the section html not all home page html)
<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>The difference in the above HTML is in line 2-3 where it has this by default:
<a href="{{url}}">
<h3 class="home-section">{{name}}</h3></a>Having the above (default) caused the "See all # articles" URL to become undefined. The problem was that the above JavaScript was targeting the <a> tag held within the <h3> tag, unfortunately it was the other way around with the <h3> tag being held within the <a> tag. So changing it to this stopped the URL being undefined.
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>Displaying "See all 6 articles" when there are more than 6 articles
To fix this issue you need to ensure that the bold section of the below Home Page Section HTML is present, if it's not then it will only display "See all 6 articles" regardless of how many articles above 6 you have.
<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>If you want "See all # articles" to also be a button then use this version:
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles button-small" role="button">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}Remove the "more..." and stop it being a separate URL than "See all # articles"
The JavaScript just need a little tweaking here as the original JS has this line added:
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = 'more...';
Simply change that line to this:var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';This removes the "More..." completely which, unsurprisingly, also stops there being two separate URLs.
Hopefully this'll stop others pulling there hair out in frustration, like I've been recently.
Enjoy ô¿ô
-
IceCommunityManager thanks so much for sharing your solution!
Did Wes's solution not work for you because of your home page accordions?
Would you be willing to post your whole solution/comment in a new post so that users can easily find it? You can make the title of the tip similar to this one, but maybe include something about accordions to differentiate it.
If so, we can send you a t-shirt for the effort. :)
Thanks!
Post is closed for comments.
165 Comments