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!
-
This is a great tip, Wes! This really cleaned up one of my topic pages.
-
Also thanks to Rose from Zendesk!
-
@James - Glad to hear and I agree with you that it does make everything look cleaner. That's why I asked for it and implemented it on our Help Center.
-
Thank you!
-
@Dani - Your welcome glad I could help!
-
Hi Wes,
Is there any way to edit the JS to show all articles in a section? Thanks!
-
@Steve - I don't believe there is a way to show all articles in a sections as the ZenDesk code will limit it.
-
Used this script to show 5 articles or less, ran into an issue. The "See all 6 articles" font size for categories that have 6 articles is larger than categories that have 7 or more articles. One appears underlined and one does not. Has anyone else seen this?
-
@Mariah - I'll take a look at this but is there a way I can see your page so that I can inspect the different elements to see what's going on. If I can't no big deal as I can give you some suggestions but it sure would help.
-
@wes Of course you can! We just pushed the site live so here is the link --> http://support.runkeeper.com/hc/en-us/categories/200097368-Known-Issues
-
@Mariah - Great and thanks for the link as it made it alot easier to troubleshoot. Go to you CSS file and on line 765 make it match what I have below. As you can see I have commented out 3 of the lines. Give that a try and let me know if that fixes you up.
.see-all-articles {
display: inline-block;
/* font-size: 10px; */
/* margin-top: 10px; */
/* text-decoration: underline; */
} -
@Wes, that makes the two "See all.." look the same but I prefer the look of the underline, is it possible to make the bigger "see all 6 articles" match the smaller?
-
@Mariah - Got ya sorry I was doing it in reverse as I thought you wanted the font size to match the text above. Let me play around with it as we may have to use JQuery if we go that path. Not that it matters but I liked the larger text as it made it easier to read. Be back soon.
-
@Mariah - Give this a try as I could not test it on my end.
Change the following line in JS:
$("<a class='moreTopics' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
Change To:
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
-
@Wes Works like a charm! Thanks so much!
-
@Mariah - glad to hear and if you need any additional help just let me know.
-
@Wes - We'd like to display a list enumerating all of categories and all of their respective articles -- no matter how many there are; but we do *not* want the individual articles to be expandable (so the {{category_tree_with_articles}} component doesn't work for us). Suggestions? Thanks in advance.
-
@Derek - I didn't think there was a way to do this however after much playing around, I may have found a solution. You will need to test this to make sure it doesn't mess anything else up but give this a try.
Use {{category_tree_with_articles}} in your HTML
Add the following to your JS tab after the "$(document).ready(function() {" line
//Trick zendesk into showing all articles
$('ul.article-list li a').removeAttr('data-asynchtml-ressource');Let me know how your testing goes.
-
@Derek - By the way this should also work on the Category Page with the {{section_tree_with_article}} placeholder.
-
Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!
-
Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!
-
Hi Janet - Glad you find the code above useful for your Help Center. If you want to change the wording of the link at the bottom of the article listing then please add the below JS code below the $document ready function:
Link below is to my Gist - also feel free to look at all of my code that I've written for Zendesk.
-
@Wes, you are my hero! My syntax was not even close. Thank you for sharing.
-
@Janet - Glad I could help. If you need anything else just let me know.
-
Hi Wes,
The sample code has been great but I'm running into an issue with it for any section that has more than 6 articles in it. More specifically, everything renders fine for sections that have 4-6 articles in it but if there are 7 or more articles, "More..." and "See all # articles" underline separately as if they are for separate links. Both links function properly but it's driving me nuts that any section with 7 or more articles looks like "More..." and "See all # articles" are separate links.
Have you seen this before? Do you know how I can fix this?
Thanks!
-
@David - I believe I know what you are referring to so as soon as I get some time I'll take a look and do some testing.
-
Thanks! @Wes!
I really appreciate it.
-
@David - I'm running into the same problem on my side. I'll be interested to know if you find a solution.
-
@David or @Paul - Any chance one of you could send me a link to your Help Center so that I can take a look. If not I will have to re-create the code on my end which will take me even longer. Also what theme are yall using.
-
Thanks @Wes
Here is my sandbox: https://fuzemeeting1403719153.zendesk.com/hc/en-us - note
See sections under category "Getting Started" - I believe I'm using the "Swift Elk" theme.
게시물 댓글 달기가 중지되었습니다.
165 댓글