Show less than 6 articles on Category.hbs template

165 Kommentare

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

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

    0
  • Yahor
    Aktionen für Kommentare Permalink

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

    0
  • Nicolas P
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0
  • Nicolas P
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
  • Frank Perazelli
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

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

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

Powered by Zendesk