Kudos to @Ed Ball for the idea.
Zendesk {{promoted_articles}} component lists all the articles which you promote from your knowledge base, however, if you want to show promoted articles on category template, but only the promoted articles of that category then, here we go with the code.
Go to the HTML of your category template, copy and paste this code at the bottom of your category template -
<div class="container">
<div class="promoted-articles-container">
<section class="articles">
<h3>{{t 'promoted_articles'}}</h3>
<ul class="article-list promoted-articles"></ul>
</section>
</div>
</div>
<style>
.promoted-articles-container {display: none;}
</style>
<script>
$.getJSON('/api/v2/help_center/'+$('html').attr('lang').toLowerCase()+'/categories/'+{{category.id}}+'/articles.json', function(data){
var articlesList = '';
$.each(data.articles, function(idx, itm){
if (itm.promoted==true) {
articlesList += '<li class="promoted-articles-item">';
articlesList += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
articlesList += '</li>';
}
});
$('ul.promoted-articles').html(articlesList);
var articlesLength = $('ul.promoted-articles > li').length;
if (articlesLength) {
$('.promoted-articles-container').show();
}
});
</script>Save and publish the code.
Hurray! you are done.
Edit: Updated code to hide the promoted article section unless there is a promoted article in the category.
Let us know if you face any issue.
Also, give us your feedback in the comment section below :)
Enjoy!
Team Diziana
@Melody and Martijn,
Glad Trapta's tip was able to help you out! I reached out to see if she has some additional advice to provide for you here :)
Cheers!