Show less than 6 articles on Category.hbs template

165 Comments

  • Wes Drury
    Comment actions Permalink

    @Derek - I didn't think there was a way to do this however after much playing around, I may have found a solution.  You will need to test this to make sure it doesn't mess anything else up but give this a try.

    Use {{category_tree_with_articles}} in your HTML

    Add the following to your JS tab after the "$(document).ready(function() {" line

    //Trick zendesk into showing all articles 
    $('ul.article-list li a').removeAttr('data-asynchtml-ressource');

    Let me know how your testing goes.

    0
  • Wes Drury
    Comment actions Permalink

    @Derek - By the way this should also work on the Category Page with the {{section_tree_with_article}} placeholder.

    0
  • Janet Del Aguila
    Comment actions Permalink

    Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!

    0
  • Janet Del Aguila
    Comment actions Permalink

    Thank you for sharing this sample code. It really cleans up the layout of articles. However, I'd love to remove the "See all # articles". Or at the very least, know how to change the wording from "See all # articles" to "Click to see more..." Does anyone know how to do this? Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    Hi Janet - Glad you find the code above useful for your Help Center.  If you want to change the wording of the link at the bottom of the article listing  then please add the below JS code below the $document ready function:

    Link below is to my Gist - also feel free to look at all of my code that I've written for Zendesk.

    https://gist.github.com/moderatorwes/8c229922528ab37cc4fb

    0
  • Janet Del Aguila
    Comment actions Permalink

    @Wes, you are my hero! My syntax was not even close. Thank you for sharing.

    0
  • Wes Drury
    Comment actions Permalink

    @Janet - Glad I could help.  If you need anything else just let me know.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi Wes,

    The sample code has been great but I'm running into an issue with it for any section that has more than 6 articles in it. More specifically, everything renders fine for sections that have 4-6 articles in it but if there are 7 or more articles, "More..." and "See all # articles" underline separately as if they are for separate links. Both links function properly but it's driving me nuts that any section with 7 or more articles looks like "More..." and "See all # articles" are separate links.

    Have you seen this before? Do you know how I can fix this?

    Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @David - I believe I know what you are referring to so as soon as I get some time I'll take a look and do some testing.

    0
  • David Kavalsky
    Comment actions Permalink

    Thanks! @Wes!

    I really appreciate it.

    0
  • Paul Fennell
    Comment actions Permalink

    @David - I'm running into the same problem on my side.  I'll be interested to know if you find a solution.

    0
  • Wes Drury
    Comment actions Permalink

    @David or @Paul - Any chance one of you could send me a link to your Help Center so that I can take a look.  If not I will have to re-create the code on my end which will take me even longer.  Also what theme are yall using.

    0
  • Paul Fennell
    Comment actions Permalink

    Thanks @Wes

    Here is my sandbox: https://fuzemeeting1403719153.zendesk.com/hc/en-us - note

    See sections under category "Getting Started" - I believe I'm using the "Swift Elk" theme.

    0
  • Wes Drury
    Comment actions Permalink

    @Paul - Are you trying to do the same thing as David and just remove the underlined or would you just like for yours to just say ..More   Trying to see if I'm troubleshooting the exact same issue here or not.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Wes

    Just wanted to confirm that I am also using the Swift Elk theme.

    0
  • Wes Drury
    Comment actions Permalink

    You could do something similar to Janet and change the wording to match like:

    //Change wording of link "See all # of articles" to "click to see more"

    $('a.see-all-articles').text('Click to see more...');

    or you could hide some of it by applying:

    $('a.see-all-articles').hide();

    0
  • Paul Fennell
    Comment actions Permalink

    Thanks @Wes

    Great question- I'd like a single link, but I'm unsure on whether to use either "more" or "see all (X) articles", both have their merits.

    If I could customize it to say "More (X) that would be the best, if not I'd likely go with just "More".

    0
  • David Kavalsky
    Comment actions Permalink

    Thanks @Wes

    If possible, I would really like to keep the current wording but as one cohesive link. If I rename it, is there a way for me to dynamically call on the number of articles in the section?

    0
  • Janet Del Aguila
    Comment actions Permalink

    @David, I see exactly what you're describing. I too came across this issue and could not figure out how to turn the two links into one cohesive link. Plus, did you notice that the font size is different on the "More..." and "See all # articles". Again, I couldn't figure out how to make this all one single link. I decided to skip using this code snippet altogether - and just went with changing the default text using this sample provided to me by Wes:

     

    //Change wording of link "See all # of articles" to "click to see more"

    $('a.see-all-articles').text('Click to see more...');

    @Wes, I included a screenshot of the link issue that David described in his original comment. I had to zoom in so you could see that there is effectively two links.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Janet

    I did notice that but I was able to make an adjustment to the JS that Wes provided to keep them the same size. More specifically, the snippet Wes provided declares the link class as a "MoreTopics" class whereas the normal links use the "see-all-articles" class. By changing "moretopics" to "see-all-articles," the link styling becomes consistent.

    I'm also leaning toward just changing the text altogether but I really want to find a way to let users know how many articles are in that section.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Wes and @Janet

    Just wanted to post a quick note that I found the culprit of this issue but fixing it seems to have caused another issue. Toward the end of the JS, there is this line of code...

      $("<a class='moreTopics' href=" + moreLink + ">" + linkText +  "</a>").insertAfter($(categories[j]));

    This line of code seems to mostly only apply if you have more than 6 articles in a given section. The problem is that it closes the link for the word "More..." and then the .insertAfter($(categories[j])); code adds the "See all # articles" text. So basically, the closing </a> causes "More..." and "See all # articles" to be treated as two separate links because one link closes and the other then opens.

    So removing that closing </a> solves the problem while still showing only 3 articles per section but if you have 4-6 articles in the section, it actually no longer shows a link of any kind below the first three articles and I can't figure out why. I'm going to keep digging into this and will keep you guys posted but I feel like I'm getting closer.

    0
  • Wes Drury
    Comment actions Permalink

    @David - Thanks for the update and please keep digging as I've been too busy to even take a look.  If you can't solve it I promise I'll get to it and recommend some changes.

    0
  • David Kavalsky
    Comment actions Permalink

    Thanks!
    I actually may have jumped the gun a bit though. Looking at this further, "More..." is no longer rendering either so I might be back to square one but I know that the closing </a> is causing this behavior somehow. If the <a> tag were left open from "More..." through to the "See all" links, we should be good.

    0
  • Paul Fennell
    Comment actions Permalink

    Just checking in to see if someone has come up with a solution to this.

    I can't seem to hide the "See All" using  =>  $('a.see-all-articles').hide();

     

    0
  • Wes Drury
    Comment actions Permalink

    Give this 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');

    //Change string for article list length
    if ( articles.length > 5 ) {

    for (var k = 5; 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
    Comment actions Permalink

    Make sure your CSS looks like this:

    .see-all-articles { display: inline-block; font-size: 10px; margin-top: 10px; text-decoration: underline; }

    0
  • Paul Fennell
    Comment actions Permalink

    Wes- I will be naming my next kitten/puppy/baby in your honor. Thank you!

    0
  • Jennifer Rowe
    Comment actions Permalink

    Haha! Paul, I think a lot of people feel the same way about Wes. 

    "Wes" might become the #1 kitten/puppy/baby name of 2014!

    0
  • Wes Drury
    Comment actions Permalink

    @Paul - Glad we got you working and sorry for the delay in response as I was off helping other users.  Wes does sound like a good name but I'm just bias :-)  Enjoy and you know where to find me if you need anything else.

    0
  • Barbara Brady
    Comment actions Permalink

    I am trying to follow the instructions on this page, but in the Theme Editor, when I select the template for Category page, then select JS, the template selection reverts to "Select Template." Then, when I switch back to the Category page,  it reverts back to CSS. What is happening? Thanks.

     

    0

Please sign in to leave a comment.

Powered by Zendesk