Show less than 6 articles on Category.hbs template

165 Kommentare

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

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

    0
  • Janet Del Aguila
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare Permalink

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

    0
  • Wes Drury
    Aktionen für Kommentare Permalink

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

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

    Thanks! @Wes!

    I really appreciate it.

    0
  • Paul Fennell
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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
    Aktionen für Kommentare 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

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

Powered by Zendesk