Show less than 6 articles on Category.hbs template

165 Comments

  • Frank Perazelli
    Comment actions Permalink

    This code works OK on my HC:

    // 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 articleCount = " (" + articleCount + ")";
    var catTitle = $(categories[j]).parent().find('h3 a').text();
    $(categories[j]).parent().find('h3 a').text(catTitle + articleCount);
    }}

    Hope this solves your situation.

     

    0
  • Greg Pope
    Comment actions Permalink

    Thanks for the suggestion Frank, but nope. This is what I got when I tried:

    For some reason the count caps out at 6, too.

    0
  • Wes Drury
    Comment actions Permalink

    @Everyone - I contacted Zendesk and they believe they have the issue fixed (something on the back-end).  I tested my original script and it seemed to work for me and didn't duplicate the links.  Could yall verify from your end.  Thanks!

    0
  • Greg Pope
    Comment actions Permalink

    I'm still getting duplicate links, but now they're side by side which is better.

    0
  • Wes Drury
    Comment actions Permalink

    @Greg - Since I can't get into your HelpCenter to look at the code please be sure you are using the default code from the top of this page.  Also please let me know what theme you are using and I will pass this to the Zendesk team to look at.  It seemed to fix it on my test site using the Wiry Merchant theme and using the original code.  To ensure no other code is interfering can you disable all other custom code.  Thanks in advance for your feedback

    0
  • Greg Pope
    Comment actions Permalink

    Thanks Wes. I switched back to the code at the top of this page and made sure our other js wasn't interfering, and that helped a little bit more (screenshot below). This might work in the meantime while they're looking into it. I'm using the Swiftest Elk theme and I've also started a ticket with Zendesk, #1173791 if they need reference. Really appreciate your help.

    0
  • Wes Drury
    Comment actions Permalink

    @Greg - that looks like its doing what is supposed to do.  What issues are you having as your screenshots looks correct.

    0
  • Greg Pope
    Comment actions Permalink

    Only that the ones with over 6 articles are still two separate links (although you almost can't tell now that they're side by side, both going to the correct url, and I've changed the Morelink's class to "see-all-articles" instead of the default "moreTopics" so they look the same). This basically works.

    0
  • Wes Drury
    Comment actions Permalink

    @Greg - Got ya and I recommend using the see-all-articles class.  I just updated my code above and added the class.  Most users prefer this class anyway.  I appreciate all your help and testing.  If you have any further issues just let me know.

    0
  • Ed Pastore
    Comment actions Permalink

    I tried adding this as instructed, and am not seeing any change. Is it perhaps my custom theme getting in the way?

    I am primarily trying to change the number of articles listed on the home page to 3. Sections can remain at 6, if possible. But in any event, they both look like 6 now.

    https://explorelearning.zendesk.com

    0
  • Wes Drury
    Comment actions Permalink

    @Ed - I'm only seeing 3 articles listed on the Home Page so did you figure this out.  It looks correct from my end.

    0
  • Nancy
    Comment actions Permalink

    Wes, could we use the same code for sections per category if we swap out article-list for section-list, etc? We have a bunch of organization-specific sections that only admins can see that make certain categories exteeeennnnd on the home page. Would love to limit sections to 6 per category.

    0
  • Wes Drury
    Comment actions Permalink

    @Nancy - I've never tried to limit sections per category but I'm sure it can be done.  My code may need to be modified a little in order to do that but you can just plug my code in and test it out.

    0
  • Randy Peach
    Comment actions Permalink

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

    0
  • Gizem
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Gizem
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
  • Elizabeth Haney
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
  • Jill
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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

Please sign in to leave a comment.

Powered by Zendesk