Displaying Top Articles on Category and Section Pages
We display our Top Articles on the Category and Section landing pages. Here is what it looks like:
Displaying Top articles on Category landing pages
To Display the Top Articles on the Category landing pages you can use this code in your Category template:
{{#is category.id '11111'}}
<div class="top_articles">
<h2>Top Articles 1</h2>
<ol>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
</ol>
</div>
{{/is}}
{{#is category.id '22222'}}
<div class="top_articles">
<h2>Top Articles 2</h2>
<ol>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
</ol>
</div>
{{/is}}
Repeat that for as many categories as you need to run through.
Displaying Top articles on Section landing pages
To Display the Top Articles in a Category on the Section Landing Pages, use this code in your section templage:
<div class="top_articles1" style="display: none;">
<h2>Top Articles 1</h2>
<ol>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
</ol>
</div>
<div class="top_articles2" style="display: none;">
<h2>Top Articles 2</h2>
<ol>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
</ol>
</div>
<script>
var _catId = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/)[0];
if (_catId == '11111') {
$('.top_articles1').show();
}
if (_catId == '22222') {
$('.top_articles2').show();
}
</script>
Repeat that for as many categories as you need to run through.
-
I love this idea! Thanks for sharing your tip, Sherri!
-
Hey Sherri Anderson I'm having trouble implementing some of your code in our Community home page. We want to make it look similar to Zendesk's (with a list of 5 manually configured Posts within each Topic), but we get this error "not possible to access `category` in `category.id`":
Our page:
Zendesk's page:
Any ideas what we're doing wrong?
-
@Patrick are you sure you have the right category ID and that it is published?
-
Yep, I've even tried moving the code down after each <div> but it isn't making a difference to the site; each time I click Publish the Community page reloads but nothing changes.
-
The code that Sherri Anderson displayed in her post was meant for category and section landing pages, which have a category helper. However, you are trying to put the code in the Community home page, which does not have the category helpers= available. According to https://developer.zendesk.com/apps/docs/help-center-templates/community_topic_list_page, the topics helper is available on the Community home page, but I'm not sure how you would get five top articles from the topics helper.
-
Yep it'd be great to know how to get it working in Community!
-
Topics contain posts, so if you changed category to topic and article to post in the code, that could help you find the solution.
Please sign in to leave a comment.
7 Comments