Show less than 6 articles on Category.hbs template

165 Commentaires

  • Frank Perazelli
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

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

    0
  • Yahor
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

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

    0
  • Yahor
    Actions pour les commentaires Permalien

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

    0
  • Nicolas P
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

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

    0
  • Nicolas P
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

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

    0
  • Greg Pope
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    @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

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk