Show less than 6 articles on Category.hbs template

165 Kommentare

  • Trapta
    Aktionen für Kommentare Permalink

    Why are we using JS when we can do it using CSS? Something like this -

    Using HTML code of IceCommunityManager

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

    CSS Code -

    li.promoted-articles-item:not(:nth-child(-n+4)) {
      displaynone;
    }
    2
  • Socorro Fernandez
    Aktionen für Kommentare Permalink

    The CSS Code does not seem to work for me on the Copenhagen Theme but I instead accessed the category_page.hbs template and added the following code to the bottom of the page:

    <style>
    .article-list li:nth-child(n+4) {
    display: none;
    }
    </style>

    This will hide all but the first 3 articles in the article list of the category page. I chose to put this directly on the category page because if I put the main CSS page, it would also hide articles on the section_page.hbs which I do not want to happen.

    For the issue of the see all articles link not displaying, locate the following code on your category_page.hbs:

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

    I found that the more_articles is a true or false value. It will become true if there are more than 6 articles. This is why you will not see the link with sections that have less than 7 articles.

    If you don't mind having the link show up for all sections regardless of amount of articles, remove the bolded {{#if more_articles}} and {{/if}} from above. Results should look like this:

     

    If you do not want the links to show up for anything less than 4, we need to define that we want these to show up for sections that have 4, 5 and 6 articles. Add the following bolded code after the{{/if}} but before the {{else}} as shown in the code above on the category_page.hbs template . The code will end up looking like this:

     {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{#is article_count 4}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/is}}
    {{#is article_count 5}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/is}}
    {{#is article_count 6}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/is}}
    {{else}}

    This makes my category page look like this:

    A few different solutions here but I hope this helps!

    Thanks!

     

    2
  • Rob Levin
    Aktionen für Kommentare Permalink

    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
  • Wes Drury
    Aktionen für Kommentare Permalink

    @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
  • Rob Hearn
    Aktionen für Kommentare Permalink

    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
    Aktionen für Kommentare Permalink

    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
  • IceCommunityManager
    Aktionen für Kommentare Permalink

    Jennifer Rowe no problem I'd be happy to, if nothing else just to make my CS colleagues jealous when I come into work rocking a Zendesk t-shirt lol :p

    Unfortunately, I'll not get the chance to do it until early next week though, but yeah if it helps somebody else then it's worthwhile.

    Wes's code was great but I don't think it was ever intended for the home page and especially not on a home page with accordions. Wes has also been giving me some help on his Slack channel. That guy deserves a promotion ;)

    Have a great weekend

    ô¿ô

    1
  • Martijn-S
    Aktionen für Kommentare Permalink

    I'm not sure if it's already mentioned, but the downside of using this technique is the DOM being altered after the first draw. Another way to tackle this is setting display: none on the nth element using css. So eg:

    .a.article-list-link:nth-child(n+5) {
       display: none;
    }

    This piece of code adds "display: none;" to the 5th element and up. That way the DOM is rendered correctly at once!

    EDIT: I just noticed that the comment above me already provided this answer. I will keep this one just so that people will notice.

    1
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Martijn - I've updated the tutorial to use CSS as using the JQuery method was the old way of handling it.

    1
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Marta - There are a couple different ways you can go about this.  I would recommend you take a look at this tip by Diziana.  I've used this tip a few times for clients and I believe its the best way to keep the home page short and clean.  This tip will still have the See X articles but when a user clicks it, it will load all the articles on the home page so it saves a few clicks.  Take a look at that tip and let me know if that will work for you.

    1
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mike - Add this into your CSS file

    .article-list li:nth-child(n+4) {
    display: none;
    }

    1
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mike - First all there is no way for me to really test any of this as you are on a theme that is outdated.  I highly recommend that you upgrade to the new responsive Copenhagen theme.  You can give this a try.

    In your HTML add the class = cat-page like below.

    <section class="section cat-page">

    Then in your CSS 

    .cat-page .article-list li:nth-child(n+4) {
    display: none;
    }

    1
  • Trapta
    Aktionen für Kommentare Permalink

    Hi @Mike Tamosaitis,

    Try putting the below code at the bottom of your category_page.hbs template:

    <script>
    var seeAllTemplate = '<a href="URL" class="see-all-articles">COUNT</a>';

    $('.section-tree > section').each(function(idx, itm){
    var seeAllArticles = $(itm).find('.see-all-articles');
    var articlesList = $(itm).find('.article-list').children();

    if ( articlesList.length <= 6 && articlesList.length != 1 && seeAllArticles.length == 0) {
    $(itm).append(seeAllTemplate.replace('COUNT', 'See all '+ articlesList.length + ' articles'));
    }
    });
    </script>

    Let me know if you face any issue.

    Team Diziana

    1
  • James
    Aktionen für Kommentare Permalink

    This is a great tip, Wes! This really cleaned up one of my topic pages. 

    0
  • James
    Aktionen für Kommentare Permalink

    Also thanks to Rose from Zendesk!

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @James - Glad to hear and I agree with you that it does make everything look cleaner.  That's why I asked for it and implemented it on our Help Center.

    0
  • Dani Johnson
    Aktionen für Kommentare Permalink

    Thank you!

     

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Dani - Your welcome glad I could help!

    0
  • Steve Niebauer
    Aktionen für Kommentare Permalink

    Hi Wes,

    Is there any way to edit the JS to show all articles in a section? Thanks!

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Steve - I don't believe there is a way to show all articles in a sections as the ZenDesk code will limit it.

    0
  • Mariah Muscato
    Aktionen für Kommentare Permalink

    Used this script to show 5 articles or less, ran into an issue. The "See all 6 articles" font size for categories that have 6 articles is larger than categories that have 7 or more articles. One appears underlined and one does not. Has anyone else seen this?

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mariah - I'll take a look at this but is there a way I can see your page so that I can inspect the different elements to see what's going on.  If I can't no big deal as I can give you some suggestions but it sure would help.

    0
  • Mariah Muscato
    Aktionen für Kommentare Permalink

    @wes Of course you can! We just pushed the site live so here is the link --> http://support.runkeeper.com/hc/en-us/categories/200097368-Known-Issues

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mariah - Great and thanks for the link as it made it alot easier to troubleshoot.  Go to you CSS file and on line 765 make it match what I have below.  As you can see I have commented out 3 of the lines.  Give that a try and let me know if that fixes you up.

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

    0
  • Mariah Muscato
    Aktionen für Kommentare Permalink

    @Wes, that makes the two "See all.." look the same but I prefer the look of the underline, is it possible to make the bigger "see all 6 articles" match the smaller?

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mariah - Got ya sorry I was doing it in reverse as I thought you wanted the font size to match the text above.  Let me play around with it as we may have to use JQuery if we go that path.  Not that it matters but I liked the larger text as it made it easier to read.  Be back soon.

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mariah - Give this a try as I could not test it on my end.

    Change the following line in JS:

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

    Change To:

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

    0
  • Mariah Muscato
    Aktionen für Kommentare Permalink

    @Wes Works like a charm! Thanks so much!

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

    @Mariah - glad to hear and if you need any additional help just let me know.

    0
  • Derek Knoderer
    Aktionen für Kommentare Permalink

    @Wes - We'd like to display a list enumerating all of categories and all of their respective articles -- no matter how many there are; but we do *not* want the individual articles to be expandable (so the {{category_tree_with_articles}} component doesn't work for us). Suggestions? Thanks in advance.

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk