Show less than 6 articles on Category.hbs template

165 Comments

  • Wes Drury
    Comment actions Permalink

    @Barbara - All the code that I'm providing only goes into the JS tab.  To get this to work you do not have to do anything in the HTML-Category Page.  You should be able to copy and paste the code into the JS tab as instructed and hit "Preview".

    0
  • Frank Perazelli
    Comment actions Permalink

    @Wes - Several months ago we used a modification of your code to display the article count in parens following the Section name. In our code we used a split function which suddenly ceased working on 11/18/14. It was necessary to find a work around since Support could not locate the difficulty. I am listing both versions or our code for reference.

    //  Limit Article List to display only 3 entries - ORIGINAL CODE
     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 != "")     {

    /* THIS IS WHAT FAILED */
          var splitText = moreArticles.split(" ");
          articleCount = splitText[2];

    /* ------------------------------- */
          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);
        } }

     

    //  Limit Article List to display only 3 entries - NEW CODE

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

    Support suggested we post this for others reference.

    Frank

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks for sharing, Frank!

    0
  • Erik Metzler
    Comment actions Permalink

    I'm trying to do something a bit more extreme then others, and can't see where. I want to completely hide the section tree and See more link. I ONLY want the section title so they can click on that to get to the article list.

     

    I found a way with the code above to hide the article list (but it's ugly to me) but I don't know how to hide the More link completely.

    0
  • Erik Metzler
    Comment actions Permalink

    Nevermind. I figure it out once I found another article that set off the lightbulb

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

    }

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - Glad you were able to figure it out and thanks for posting your code as it will benefit others.

    0
  • Erik Metzler
    Comment actions Permalink

    Anytime. And I changed .hide() to .remove() for tidiness. But now I can't get the H3 header to center vertically. Any thoughts? I know it's more CSS than JS.

    Am I missing something on the backend of these sections aside from good ol' Vertical-Align:middle?

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - Can you provide a link to your Help Center so that I can see the code via the developer browser.

    0
  • Erik Metzler
    Comment actions Permalink

    http://support.nonprofiteasy.com/hc/en-us/ Though I haven't published my work yet, waiting to get things right.

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - It looks like the title are aligned so I don't see any issues at this point.

    0
  • Erik Metzler
    Comment actions Permalink

    Horizontally yes, but not vertically. See below.


    This is for the Section titles, not the Category titles (which ware what I'm trying to duplicate)

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - I got ya but I don't currently see that since you haven't published it as of yet.  When you get ready to publish it just let me know and I'll have a look.

    0
  • Erik Metzler
    Comment actions Permalink

    Try now.

    0
  • Frank Perazelli
    Comment actions Permalink

    @Erik - You can reduce the height of the Section blocks by adjusting the CSS for .section-tree h3

      line-height: 60px;

    This will reduce the amount of scrolling to see all your sections...

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - On line 880 on your CSS remove the .section-tree .section and add the following in its place.

    .section-tree .section {
    width: 296px;
    height: 203px;
    background: #525F6D;
    /* display: block; */
    margin-bottom: 25px;
    margin-right: 25px;
    overflow: hidden;
    color: #00D287;
    float: left;
    font-weight: normal;
    vertical-align:middle;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    0
  • Erik Metzler
    Comment actions Permalink

    Perfect. Thank you. Not sure what I did wrong, so I'll have to compare them later when I have time. But it looks good now.

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - Glad everything is looking good and the last three lines is what I added especially the display: flex which allows the two item below it to work.  If you run into any other Help Center issues just let me know.  Best of luck.

    0
  • GeoffWolfe
    Comment actions Permalink

    If been using *Frank Perazelli's *javascript above (and now below) to suppress the "See all x articles" link text. In the last day or two it stopped working. Can anyone help troubleshoot what needs to be changed?

     

    //  Limit Article List to display only 3 entries - NEW CODE

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

    }}

    0
  • Frank Perazelli
    Comment actions Permalink

    @Geoff - I've compared what is working on our site to the code above. The only difference is this:

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

    See attached screen shot. If less than 3 articles, the "See all ..." does not appear.

    Hope this helps.

    0
  • GeoffWolfe
    Comment actions Permalink

    @frank thanks! My site started working properly today without me changing anything, so something changed and reverted in Zendesk source I suppose.

    0
  • Yahor
    Comment actions Permalink

    @Wes thank for this tip! This works great for me on Category pages, but on the Home Page I am running into one problem. For the Categories with 6 or less articles this works as expected, but for categories with more than 6 articles the default See all... displays in addition to More...Sell all. Interestingly, the More...See all also displays incorrect number (basically does not go beyond 6). Hope the screenshot helps to see what I mean. Would be very grateful for any tips on fixing this. Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @Yahor,  There is alot of code on this thread so which code are you using.  

    0
  • Yahor
    Comment actions Permalink

    @Wes, the one in the article, not the comments.

    0
  • Nicolas P
    Comment actions Permalink

    Got the same as Yahor on our HC when setting length to 5 (if( articles.length <= 5). If I go for 6, then the nativeMore kicks in, leaving the customized one out but also section with exactly 6 articles. :( here is part of the code I have in the JS.

    Thanks for any feedback as this is driving me mad.


    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 <= 5 && nativeMore.length == 0 ) {

    linkText += "See all sss" + articles.length + " articles";

    }

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


     

    0
  • Wes Drury
    Comment actions Permalink

    @Yahor & Nicolas - This tip wasn't really for the home page however can you just remove the below line.

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

     

    JS tab code:

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

    }

     

    }

    }

    }

     

     

    0
  • Nicolas P
    Comment actions Permalink

    Hi Wes,

    doing this solves the double "See all xx articles", but now I have a section that has 6 articles, shows 5 only and no link to access the left article.

    My goal is overall to display 3 articles and a "See more" link, adjusting the article length to 3 max gives me the same result. An easy solution is to add another article so I go above the 6 articles native limit.

    0
  • Wes Drury
    Comment actions Permalink

    @Nicolas - Can you provide the link to your Help Center as I need to see the code.

    0
  • Nicolas P
    Comment actions Permalink

    https://support.elitesingles.com/hc/en-us 

    FYI : I went with my back up plan : adding a 7th article to PREMIUM MEMBERSHIP section.

     

     

    0
  • GeoffWolfe
    Comment actions Permalink

    Hi folks,

    I am too having problems with the See All x Articles link still showing on my home page too. It has been coming and going the last few weeks and now it is staying. 

    Any chance someone can review my code to see what I can do? It is working fine on the Category page.

    My JS:

    $(document).ready(function() {

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

    }}

    0
  • Greg Pope
    Comment actions Permalink

    I'm also having trouble with a double link after limiting our displayed articles to 3 and adding the More... link. Has anyone found a way to take out the default "See all...articles" link? The trouble I had with using that was it wouldn't show up for sections that had more than 3 articles but less than 6.

    Here is my js:

    $(document).ready(function() {

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

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

    $("<a href=" + moreLink + ">More...</a>").insertAfter($(categories[j]));

    }

    }

    }

     

    https://sureprep.zendesk.com/hc/en-us

    0

Please sign in to leave a comment.

Powered by Zendesk