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!
-
@Paul - Are you trying to do the same thing as David and just remove the underlined or would you just like for yours to just say ..More Trying to see if I'm troubleshooting the exact same issue here or not.
-
Hi @Wes
Just wanted to confirm that I am also using the Swift Elk theme.
-
You could do something similar to Janet and change the wording to match like:
//Change wording of link "See all # of articles" to "click to see more"
$('a.see-all-articles').text('Click to see more...');
or you could hide some of it by applying:
$('a.see-all-articles').hide();
-
Thanks @Wes
Great question- I'd like a single link, but I'm unsure on whether to use either "more" or "see all (X) articles", both have their merits.
If I could customize it to say "More (X) that would be the best, if not I'd likely go with just "More".
-
Thanks @Wes
If possible, I would really like to keep the current wording but as one cohesive link. If I rename it, is there a way for me to dynamically call on the number of articles in the section?
-
@David, I see exactly what you're describing. I too came across this issue and could not figure out how to turn the two links into one cohesive link. Plus, did you notice that the font size is different on the "More..." and "See all # articles". Again, I couldn't figure out how to make this all one single link. I decided to skip using this code snippet altogether - and just went with changing the default text using this sample provided to me by Wes:
//Change wording of link "See all # of articles" to "click to see more"
$('a.see-all-articles').text('Click to see more...');
@Wes, I included a screenshot of the link issue that David described in his original comment. I had to zoom in so you could see that there is effectively two links.
-
Hi @Janet
I did notice that but I was able to make an adjustment to the JS that Wes provided to keep them the same size. More specifically, the snippet Wes provided declares the link class as a "MoreTopics" class whereas the normal links use the "see-all-articles" class. By changing "moretopics" to "see-all-articles," the link styling becomes consistent.
I'm also leaning toward just changing the text altogether but I really want to find a way to let users know how many articles are in that section.
-
Hi @Wes and @Janet
Just wanted to post a quick note that I found the culprit of this issue but fixing it seems to have caused another issue. Toward the end of the JS, there is this line of code...
$("<a class='moreTopics' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
This line of code seems to mostly only apply if you have more than 6 articles in a given section. The problem is that it closes the link for the word "More..." and then the .insertAfter($(categories[j])); code adds the "See all # articles" text. So basically, the closing </a> causes "More..." and "See all # articles" to be treated as two separate links because one link closes and the other then opens.
So removing that closing </a> solves the problem while still showing only 3 articles per section but if you have 4-6 articles in the section, it actually no longer shows a link of any kind below the first three articles and I can't figure out why. I'm going to keep digging into this and will keep you guys posted but I feel like I'm getting closer.
-
@David - Thanks for the update and please keep digging as I've been too busy to even take a look. If you can't solve it I promise I'll get to it and recommend some changes.
-
Thanks!
I actually may have jumped the gun a bit though. Looking at this further, "More..." is no longer rendering either so I might be back to square one but I know that the closing </a> is causing this behavior somehow. If the <a> tag were left open from "More..." through to the "See all" links, we should be good. -
Just checking in to see if someone has come up with a solution to this.
I can't seem to hide the "See All" using => $('a.see-all-articles').hide();
-
Give this 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');
//Change string for article list length
if ( articles.length > 5 ) {for (var k = 5; 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]));
}
}
}
-
Make sure your CSS looks like this:
.see-all-articles { display: inline-block; font-size: 10px; margin-top: 10px; text-decoration: underline; }
-
Wes- I will be naming my next kitten/puppy/baby in your honor. Thank you!
-
Haha! Paul, I think a lot of people feel the same way about Wes.
"Wes" might become the #1 kitten/puppy/baby name of 2014!
-
@Paul - Glad we got you working and sorry for the delay in response as I was off helping other users. Wes does sound like a good name but I'm just bias :-) Enjoy and you know where to find me if you need anything else.
-
I am trying to follow the instructions on this page, but in the Theme Editor, when I select the template for Category page, then select JS, the template selection reverts to "Select Template." Then, when I switch back to the Category page, it reverts back to CSS. What is happening? Thanks.
-
@Barbara - All the code that I'm providing only goes into the JS tab. To get this to work you do not have to do anything in the HTML-Category Page. You should be able to copy and paste the code into the JS tab as instructed and hit "Preview".
-
@Wes - Several months ago we used a modification of your code to display the article count in parens following the Section name. In our code we used a split function which suddenly ceased working on 11/18/14. It was necessary to find a work around since Support could not locate the difficulty. I am listing both versions or our code for reference.
// Limit Article List to display only 3 entries - ORIGINAL CODE
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 != "") {/* THIS IS WHAT FAILED */
var splitText = moreArticles.split(" ");
articleCount = splitText[2];/* ------------------------------- */
moreLink.hide();}
if ( articles.length > 3 )
{ for (var k = 3; k < articles.length; k++ )
{ $(articles[k]).hide(); } }// change the heading title
var articleCount = " (" + articleCount + ") »";
var catTitle = $(categories[j]).parent().find('h3 a').text();
$(categories[j]).parent().find('h3 a').text(catTitle + articleCount);
} }// Limit Article List to display only 3 entries - NEW CODE
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 articleCount = " (" + articleCount + ")";
var catTitle = $(categories[j]).parent().find('h3 a').text();
$(categories[j]).parent().find('h3 a').text(catTitle + articleCount);
}}Support suggested we post this for others reference.
Frank
-
Thanks for sharing, Frank!
-
I'm trying to do something a bit more extreme then others, and can't see where. I want to completely hide the section tree and See more link. I ONLY want the section title so they can click on that to get to the article list.
I found a way with the code above to hide the article list (but it's ugly to me) but I don't know how to hide the More link completely.
-
Nevermind. I figure it out once I found another article that set off the lightbulb
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
$(categories).hide();
var more = $('.see-all-articles');
$(more).hide();}
-
@Erik - Glad you were able to figure it out and thanks for posting your code as it will benefit others.
-
Anytime. And I changed .hide() to .remove() for tidiness. But now I can't get the H3 header to center vertically. Any thoughts? I know it's more CSS than JS.
Am I missing something on the backend of these sections aside from good ol' Vertical-Align:middle?
-
@Erik - Can you provide a link to your Help Center so that I can see the code via the developer browser.
-
http://support.nonprofiteasy.com/hc/en-us/ Though I haven't published my work yet, waiting to get things right.
-
@Erik - It looks like the title are aligned so I don't see any issues at this point.
-
Horizontally yes, but not vertically. See below.
This is for the Section titles, not the Category titles (which ware what I'm trying to duplicate) -
@Erik - I got ya but I don't currently see that since you haven't published it as of yet. When you get ready to publish it just let me know and I'll have a look.
-
Try now.
Post is closed for comments.
165 Comments