<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>

• Ed Ball

  • January 11, 2018 19:06

  So I am a little late to this, but thanks for this.

   

  And to make it even a little better I submit this...

  Can this section be hidden completely if there are no articles promoted for a category?

  So Billing has one promoted article. When that article has the promoted check removed then there would be no promoted articles for billing. So currently there would be a promoted article section with nothing in it. If that could be hidden from the view unless there is a promoted article in the category that would be even more awesome.

• Trapta

  • January 12, 2018 13:26

  Community Moderator

  Hi @Ed Ball,

  Thanks for the feedback. I have updated the code to hide promoted article section unless there is a promoted article in the category to make it even more awesome :)

• Martijn Reinking

  • December 11, 2019 14:07

  Trapta Thankyou for this custom code. I Implemented this code, but I ran into a problem. We have a site that has dutch and English articles. I saw in your code that the getjson only looks at the English articles, If I understand correct. I tried to fix this but this didn't work. Do you have a Fix for me? 

• Melody Quinn

  • December 11, 2019 15:32

  That code worked great! Thank you! How would I input the star icon in front of the article name like it is on the section_page template? I have tried several ways, but my HTML skills are a beginner at best. 

   

• Brett Bowser

  • December 11, 2019 16:32

  Zendesk Community Team

  @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!

• Melody Quinn

  • December 11, 2019 16:47

  Thanks Brett!

• Trapta

  • December 11, 2019 18:13

  Community Moderator

  Hi Martijn Reinking,

  I have updated the code to remove the hardcoded locale from the getJSON function. Give it a try now and let me know if this solves your issue.

  Thanks

  Team Diziana

• Trapta

  • December 11, 2019 18:17

  Community Moderator

  Hi Melody Quinn,

  In order to add the star icon in front of the article name, you need to replace (in the mentioned code from the tip):

  articlesList += '<a href="'+itm.html_url+'">'+itm.name+'</a>';

  with

  articlesList += '<span class="icon-star"></span><a href="'+itm.html_url+'">'+itm.name+'</a>';

  Let me know if this solves your issue.

  Thanks

  Team Diziana

• Martijn Reinking

  • December 11, 2019 18:48

  Thanks again! This was what I needed! 

• Daniel Baker

  • May 27, 2020 20:03

  Hi Trapta 

  This looks to be exactly what we want to implement but when I add it to the bottom of our category_page.hbs it is not pulling through any promoted articles in that category. I get the following error when I inspect the code from my browser:

  "Uncaught ReferenceError: $ is not defined" for the following line:

  $.getJSON('/api/v2/help_center/'+$('html').attr('lang').toLowerCase()+'/categories/'+{{category.id}}+'/articles.json', function(data){

  I'm not a developer so apologize for not being able to explain the issue better. Thanks for any guidance.

• Trapta

  • May 31, 2020 20:10
  • Edited

  Community Moderator

  Hi Daniel Baker,

  Please add below line of code in your document_head.hbs file and you will be good to go.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  Let me know how it goes for you.

  Thanks

• Daniel Baker

  • June 01, 2020 16:54

  Trapta 

  That line of code fixed it and everything is working great.

  Thanks again!

Please sign in to leave a comment.