Show less than 6 articles on Category.hbs template

165 Commentaires

  • Randy Peach
    Actions pour les commentaires Permalien

    Anyone have whatever code that's needed to SHOW ALL ARTICLES instead of only showing 6 in each Category by default?

    0
  • Gizem
    Actions pour les commentaires Permalien

    Hi Wes,

    I am hoping that you may help me with an issue I am experiencing after implementing the code that was provided here. I created a ticket, I went back and forth with your agents, but they couldn't help and asked me to post it here so hoping that posting it here actually brings a resolution.

    I used the code provided in this article to change the number of articles that display on home page to be 3 under each section. It did that, but if I click on a category it displays two links under each section. You need to have 10-12 articles  (more than 6 I think) under the sections in the category for the issue to occur. How can I fix that? (See Attachment) Please help.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Gizem - Is your HelpCenter open to the public so I can take a look.  If so please include the URL.

    0
  • Gizem
    Actions pour les commentaires Permalien

    Hi Wes,

    Thank you for your message. Unfortunately, it is not open to public. Here is a url to our help center: https://teachpoint.zendesk.com/hc/en-us

    Please let me know what I can provide you as info. to make it easier to troubleshoot.

    Thank you again,

    Gizem

    0
  • Gizem
    Actions pour les commentaires Permalien

    Hi Wes,

    Did you get a chance to review my comment above? Any help you can provide would be greatly appreciated.

    Thanks,

    Gizem

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Gizem - Its hard for me to troubleshoot without actually viewing the code of your Help Center.  On the category page HTML tab can you remove

    {{/each}} {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a> {{/if}}

    Let me know what this does.  I just installed this code on a custom theme and it worked fine however its custom and all the CSS is custom.

     

    0
  • Gizem
    Actions pour les commentaires Permalien

    Hi Wes,

    Thank you so much for your comment. I removed that code and there is no duplicate link issue anymore, but even if there is more than 6 articles under a section the link always displays as "see all 6 articles" on a category page. Looks like it doesn't count the total number of articles correctly and display the number accordingly under sections if it is more than 6 articles. This issue only happens on category page.

    Gizem

     

    0
  • Frank Perazelli
    Actions pour les commentaires Permalien

    @Gizem

    Here is the relevant code from my JS that produces what you are looking for:

    // 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');
    var articleCount = articles.length;
    var moreLink = $(categories[j]).siblings('.see-all-articles');
    var moreArticles = moreLink.text();
    if (moreArticles != "") {
    articleCount = moreArticles.replace("See all","");
    articleCount = +articleCount.replace("articles","");
    moreLink.hide();
    }
    if ( articles.length > 3 ) {
    for (var k = 3; k < articles.length; k++ ) {
    $(articles[k]).hide();
    }
    }

    // change the heading title

    var catHeader = $(categories[j]).parent().find('h3 a');
    var catTitle = $(catHeader).text();
    var catHref = $(catHeader).attr('href');
    $(catHeader).text(catTitle
    //+ " (" + articleCount + ")"
    );
    if (articleCount > 3) {
    var newSeeAllText = '<a class="see-all-articles" href="' + catHref + '">See all ' + articleCount + ' articles</a>';
    var newSeeAll = $(categories[j]).append(newSeeAllText);
    }
    }}

    Hope this helps.

    Frank on aarpfoundationtaxaide.zendesk.com

    0
  • Gizem
    Actions pour les commentaires Permalien

    Hi Frank,

    Thank you for your comment. That's the code I used and removed the code from Categories page that Wes suggested to avoid the duplicate links on Category pages. The issues of displaying the total articles link count as 6 when there are more than 6 articles still remains.

    Gizem

    0
  • Rob Levin
    Actions pour les commentaires Permalien

    I'm cross posting this as I think the js solution is bloated and fragile. Just use CSS:

    .recent-activity-item:nth-of-type(1n+4) {display: none;} 

    Of course I'm using the list item class for recent activity items, but this will work with any of 'em. The 1n+4 just say "for any of these item types from 4 on, kick in the following code".

    1
  • Elizabeth Haney
    Actions pour les commentaires Permalien

    I'm having the same issue as Gizem, where on the category and section pages, I get double links.. and if I redact the code Wes mentioned on Jan 14 to fix that I do get one link, but the link reads "See all 6 articles" for every section. Gizem did you ever figure this out?

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Elizabeth - Please remove the code that you have and try this:

    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]));
    }
    }
    }

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Rob - CSS will not work here as it would also remove it from the section page as it would only show 3 articles there and not all of them.  You would have to add your own class to make it work but even then the .see-all- articles would only show up if you had more than 6 articles.  While what you have works fine with recent activity items it would not work for the sections.

    1
  • Jill
    Actions pour les commentaires Permalien

    Hey Wes!

    I have copied this exact code, everything works great except my "See all 30 articles" link is linking to an undefined url. Any help would be greatly appreciated.

    Edit: Thanks Wes! I ended up grabbing one of our engineers to help me get it sorted. It's working now! Thank you for the help and all the help you continue to give others!

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Jill - I'm taking a look at things now.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Jill - You have a couple of copies of the code currently active, can you copy and paste my code only in there and remove the code that you have.

    0
  • Simon Andersson
    Actions pour les commentaires Permalien

    @Wes - Hi Wes,

    First off I want to thank you for all your articles in the Zendesk Community. I have been reading and applying a lot of them when setting up the Help Center for our company.

    My question is related to this topic and the way you can limit the number of articles showing under each section in a category.

    I want to separate the way the category lists the sections with it´s articles.

    In one category I have added subsections in the listing and in that category I do not want any articles to show under each section. I have achieved this with the following code in the JS-section.

    $(document).ready(function() {
     
       if( document.location.href.indexOf('section') == -1 ) {
          var categories = $('ul.article-list');
          $(categories).hide();
          var more = $('.see-all-articles');
          $(more).hide();
    }

    This hides the articles from showing underneath each section in all my categories and my problem is that I now have one or more categories where i want to list articles underneath each section.

    I am not sure this makes sense but if you check https://specter.zendesk.com/hc/sv and click on "Hjälptexter" you can see that this category does not have any articles showing unless you click on them. This is the way i want to have this listing. But if you click on "Vanliga frågor & svar" thats where i want to show articles underneath each section.

    Hope you or anyone have some tips on how to solve this.

    Thank you!

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    I'm getting a similar issue where I have multiple "see more" links under a particular section. 

    Wes, I tried your latest code but it didn't fix the issue. Any help would be greatly appreciated!

     

    Thanks,

    Tim

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Tim

    I just tested and it seemed to work correctly on the Wiry Merchant theme.  What theme are you using and make to use the code below.

    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]));
    }
    }
    }

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    @Wes

    That would explain the issue. I must have missed that detail, my apologies. I'm using Swiftest Elk. 

     

    Thanks,

    Tim

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    Be right back let me test with that theme and see if I run into any issues.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    It worked correctly in the Swiftest Elk as well.  See screenshot below.

    Can you post a link to your Help Center so that I can see what you have on the backend.

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    Unfortunately it isn't public yet. Is your screenshot from your home page? I'm happy to provide specific code if that helps.

    From the home page, everything is good. It is once I click a category and then get directed to the category page that I have the issue.

     

    Thanks,

    Tim

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Tim,  Got it I was only looking at the home page.

    Give this code a try:

    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";
    }

    }
    }
    }

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    Thanks. That did solve the problem on the category page but now there are no links in any sections with less than 'see all 8 articles'. For example, the 'OMS Introduction' section actually has 6 articles but the link to see more has now disappeared.

     

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    The links for less than 8 articles have disappeared from the home page as well.

    0
  • Tim Finney
    Actions pour les commentaires Permalien

    Hi Wes,

    I want to follow up here. Any chance you have a solution for this? 

    Thanks,

    Tim

    0
  • Rob Hearn
    Actions pour les commentaires Permalien

    Hi Wes,

    When I apply the code as suggested, it limits my articles to 3 and displays a single "See all..." link. However, my issue is that I have two sections that have 4 articles only. These are also correctly limited to display 3 articles but there is no "See all..." link. Any ideas?

    1
  • IceCommunityManager
    Actions pour les commentaires Permalien

    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.

    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 (only the section html not all home page html)

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

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

    1
  • Jennifer Rowe
    Actions pour les commentaires Permalien

    IceCommunityManager thanks so much for sharing your solution!

    Did Wes's solution not work for you because of your home page accordions?

    Would you be willing to post your whole solution/comment in a new post so that users can easily find it? You can make the title of the tip similar to this one, but maybe include something about accordions to differentiate it.

    If so, we can send you a t-shirt for the effort. :)

    Thanks!

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk