Show less than 6 articles in a section on Home Page with Accordions - Help Center
Hi Everybody, I wanted to post this here because I've been having lots of problems getting the "Show less than 6 articles in a section in Help Center" to work on my Help Center's Home Page with accordions and hopefully it'll stop anybody else having the same issues as me.
This code may not work on your Help Center unless you are using Home Page accordions (expandable category menus). If you are not using Home Page accordions then please use the standard code posted in this URL - https://support.zendesk.com/hc/en-us/community/posts/203458986-Show-less-than-6-articles-in-a-section-in-Help-Center
Example of final Help Center can be found here - https://bootyquest.zendesk.com/hc/en-us
Details for adding accordions to your Home Page can be found here - https://support.zendesk.com/hc/en-us/community/posts/115001228168-Copenhagen-Theme-Home-Page-Accordions
With the Code found here - https://gist.github.com/moderatorwes/ee02605c0e502b6f1be7fecb7ad03035
All courtesy of Moderator Wes
Issues experienced -
"See all # articles" not displayed
"See all # articles" URL undefined leading to 404 error page
"More...See all # articles" shown
"More..." and "See all # articles" shown as two separate URLs
"See all 6 articles" shown when there are more than 6 articles
For Home Page with Accordions.
JavaScript
// Limit Article List to display only 3 entries
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
}
}
}
Home Page HTML
Code found here - https://gist.github.com/moderatorwes/ee02605c0e502b6f1be7fecb7ad03035
*** PLEASE NOTE *** It is important that you only swap out the code found in the link above in section Home.html between lines 18-40
<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>
The difference in the above HTML is in line 2-3 where it has this by default:
<a href="{{url}}">
<h3 class="home-section">{{name}}</h3></a>
Having the above (default) caused the "See all # articles" URL to become undefined. The problem was that the above JavaScript was targeting the <a> tag held within the <h3> tag, unfortunately it was the other way around with the <h3> tag being held within the <a> tag. So changing it to the below stopped the URL being undefined.
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
Displaying "See all 6 articles" when there are more than 6 articles
To fix this issue you need to ensure that the bold section of the below Home Page Section HTML is present, if it's not then it will only display "See all 6 articles" regardless of how many articles above 6 you have.
<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>
If you want "See all # articles" to also be a button then use this version:
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles button-small" role="button">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
Remove the "more..." and stop it being a separate URL than "See all # articles"
Line 11-12 of the JavaScript just need a little tweaking here as the original JS has this line added:
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = 'more...';
Simply change that line to this:
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
This removes the "More..." completely which, unsurprisingly, also stops there being two separate URLs.
Hopefully this'll stop others pulling there hair out in frustration, like I've been recently.
Enjoy ô¿ô
-
Thanks for sharing this!
-
Thanks IceCommunityManager! We'll send some swag your way. :)
-
You can view the final version of my Help Center here - https://bootyquest.zendesk.com/hc/en-us
-
It looks really good! Well done.
Thanks for adding the link to your example in the body too.
Please sign in to leave a comment.
4 Comments