Show section in promoted_articles list on homepage

Hello Maria, let me try to help you with this. 

1. Seems that this tip is what you are looking for:
https://support.zendesk.com/hc/en-us/community/posts/115006401607-promoted-article-widget-with-section-name-link

2. It's not created via a template but you can customize it with a help of CSS and JS.

3. The same as for the recent_activity.

Hope this helps! :) 

I suspect this is exactly what I need. Can you point me to which of your JS sheets holds the relevant code for the creation of the "Popular Articles" section?

Here should be the all needed code:

$('ul.article-list.promoted-articles li a').prev().addClass('section-name');
$('ul.article-list.promoted-articles li a').parent().addClass('section-list');
$('ul.article-list.promoted-articles li').each(function(e) {
 var title = $(this).find('.section-name').html();
 var linka = $(this).find('.section-name').attr('href');
$(this).find('a').before('<a href="' + linka + '"class="section-name-active">' + title + '</a>');
});
$( 'a.section-name-active' ).each(function(e) {
 $(this).next().andSelf().wrapAll("<li class='recent-activity-item'></li>");
});
 
$( "h2.section-link.section-name" ).each(function(e) {
 var linkaSec = $(this).attr('href');
 var titleSec = $(this).text();
 $(this).nextUntil('h2').find('a.section-name-active').attr('href', linkaSec);
 $(this).nextUntil('h2').find('a.section-name-active').text(titleSec);
});
 
$( ".recent-activity-item" ).slice( 5, 555 ).remove();

Source: https://p6.zdassets.com/hc/themes/1476839/115001266768/script-3981efee7ef93b0aa56d83ad008b5df5.js?brand_id=4214908&locale=en-us

Dear Vladan,

This has me partway there. Can you share your home_page.hbs, or at least the recent articles and promoted articles snippets? 

Currently, using the JS you sent and the suggested code on the issue you linked, I am seeing all Sections listed, and IF there are articles in the section, they are listed too.

Ideally, I only want the promoted articles listed with the section. I don't want empty sections to show at all. I realize that to do this, you are reverse engineering the section list and setting the 'if' on 'promoted'. I must be missing an if to also filter out empty sections.

Thank you!!

Hey Maria, unfortunately, I don't have an access to that Help Center anymore.

Could you maybe share your HC with me so I can take a look how we can fix it?

The relevant section of code is this:

  <div class="promoted-articles-test">
 {{#each categories}}
 {{#each sections}}
 <h2>{{name}}</h2>
 <ul class="article-list promoted-articles">
 {{#each articles}}
 {{#if promoted}}
 <li>
 <a href="{{url}}">{{title}}</a>
 </li>
 {{/if}}
 {{/each}}
 </ul>
 {{/each}}
 {{/each}}
 </div>

If I attempt to put {{name}} within {{#each articles}} I get a template error as 'name' is not a variable that exists for articles, but sections. It looks to me like the JS requires

<ul class="article-list promoted-articles">

And from there, it should add the proper classes to li, and rewrite the h2 into the link. However, I am missing something either in the JS or the code, as classes are not being added or modified.

I noticed that marbleboards LI structure is a little odd: <ul><li><li><a href>, i.e., there are two <li> following one another.

Ok, I got it close to working. This is the working code in home_page.hbs:

 <div class="promoted-articles-test">
 {{#each categories}}
 <ul class="article-list promoted-articles">
 <li>
 {{#each sections}}
 <h2 class="section-link section-name">{{name}}</h2>
 {{#each articles}}
 {{#if promoted}}
 <li>
 <a href="{{url}}">{{title}}</a>
 </li>
 {{/if}}
 {{/each}}
 {{/each}}
 </li>
 </ul>
 {{/each}}
 </div>

Which outputs this html:

<ul class="article-list promoted-articles">
 <li>
 
 <h2 class="section-link section-name">Known Issues</h2>
 </li>
<li class="section-list">
 <li class="recent-activity-item">
<a href="undefined" class="section-name-active">undefined</a>
<a href="/hc/en-us/articles/360003378713-Aleph-Two">Aleph Two</a></li>
 </li>...

Notice:

• The <h2> tag is in its own fully enclosed <li></li>. 
• The first <a> in the "recent-activity-time" is now being created, but it is undefined. So, somehow I am not accurately grabbing the section name and title and manipulating it into html output.

Never mind, I got it:

 <div class="promoted-articles-test">
 {{#each categories}}
 <ul class="article-list promoted-articles">
 {{#each sections}}
 <h2 class="section-link section-name">{{name}}</h2>
 {{#each articles}}
 {{#if promoted}}
 <li>
 <a href="{{url}}">{{title}}</a>
 </li>
 {{/if}}
 {{/each}}
 {{/each}}
 </ul>
 {{/each}}
 </div>

Great troubleshooting, Maria! Thank you so much for coming back and sharing what you figured out!

If you're interested, it would be awesome if you wrote this up into a full Tip for our Tips & Tricks section. We even have some guidelines for writing a great tip if you're not sure how to get started.

Thanks again!

Great troubleshooting, Maria! Thank you so much for coming back and sharing what you figured out!

If you're interested, it would be awesome if you wrote this up into a full Tip for our Tips & Tricks section. We even have some guidelines for writing a great tip if you're not sure how to get started.

Thanks again!