Article page - list of all articles in this section

Respondida

21 Comentários

  • Vladan Jovic
    Ações de comentário Permalink

    Can anybody help? 

    0
  • Jessie Schutz
    Ações de comentário Permalink

    Hi Vladan!

    I'm not sure if it's possible to add an article list to an article page. I see several entries in the Community about displaying all articles on the Section page, but nothing about doing so within an Article. 

    I'm going to touch base with some our Help Center gurus to see if they have any insight into whether this is possible!

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Hi Jessie,

    Thank you for your answer!
    In the meantime I found solution via Zendesk API. I will post code here.

     

     

    0
  • Jessie Schutz
    Ações de comentário Permalink

    No problem! And thanks in advance for sharing your solution! :)

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Tested and works for me. Code should be on the Article page:

    JS

    <script>
    $(document).ready(function() {

    var idsek = $(".breadcrumbs li:nth-child(2) a").attr("href").match(/[0-9]+/);

    $.getJSON("/api/v2/help_center/sections/" + idsek + "/articles.json", function(data) {
    console.log(data);// intialize list
    $("#badges").html('<ol>');
    var output = "";

    for (var i in data.articles) {
    output += "<li>";
    output += "<a href = '" + data.articles[i].html_url + "'>" + data.articles[i].title + "";
    output += "</li>";
    }
    $("#badges ol").append(output); // append li
    $("#badges ol").append('</ol>'); // close list

    });
    });
    </script>

    and little html


    <div id = "badges" class = "badges"></div>

    later you can play with little CSS.

    This $(".breadcrumbs li:nth-child(2) a") can be different on other themes but its easily to find right a tag.

    JS code can be easily upgraded for multilang HCs.

    1
  • Wes Drury
    Ações de comentário Permalink

    @Vladan - I was able to get everything working but like you mentioned had to change the breadcrumbs child.  Only suggestion I would make is that it also shows the link to the article that you are currently on.  I would actually hide that article and just show the remaining articles.

    1
  • Vladan Jovic
    Ações de comentário Permalink

    Hi Wes, I agree totally about your suggestion! Thank you.

    0
  • Jessie Schutz
    Ações de comentário Permalink

    Thanks Vladan!

    If you're interested, please feel free to do a formal write up of this solution and add it to our Tips & Tricks section. That'll make it easy for other users to find it, and you'll get swag!

    0
  • Wes Drury
    Ações de comentário Permalink

    @Vladan - Looks like you can now do this without any JS.  This code was taken from the new theme so you can find the HTML and CSS there.

    <section class="article-sidebar">
    <section class="section-articles collapsible-sidebar">
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
    <ul>
    {{#each section.articles}}
    <li>
    <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
    {{/if}}
    </section>
    </section>

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Hey Wes, this looks great! Finally we have native responsive theme. Thank you!

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Hey Wes, it seems for me that this Copenhagen box have little bug. Could you try how this box works on a mobile device? When I click on first of aticle, it needs to show me drop down list of articles, but it goes to this article page...

    Maybe problem is something here:

     

    // Toggles expanded aria to collapsible elements
      $(".collapsible-nav, .collapsible-sidebar").on("click", function(e) {
        e.stopPropagation();
        var isExpanded = this.getAttribute("aria-expanded") === "true";
        this.setAttribute("aria-expanded", !isExpanded);
      });

     

     

    0
  • Julian Luca
    Ações de comentário Permalink

    Hi, I would also like to know how to get rid of the "See more" link from the bottom of the "Articles in this section" sidebar articles list.

    I am talking about the Zendesk "Copenhagen" theme  Article page template.

    Right now only 10 articles are shown on that list and I have more than 10. I don't want to make the user click again to go back to the section page and then click again to the 11 and up articles to view them. He should see them listed on the Article page.

    Can I get rid of it?

    Thank you.

    0
  • Brittany Sigler
    Ações de comentário Permalink

    Same question as Iulian ^!! Is there a solution? :)

    0
  • Vladan Jovic
    Ações de comentário Permalink

    List more than ten articles, yes that can be done with a help of zendesk API.
    You need front end dev for this.

    0
  • Nathan Huebner
    Ações de comentário Permalink

    The API definitely fixes this, except for the fact that the API returns the entire article body. 

    This works great if you have 11 articles, and you have 1 sentence in each one, but we have pages that have a lot of information.

    Using the API takes 7 seconds to return data for 20 records.

    ** Request would be to have the ability to select the specific field from the API to return, ie:  Title, URL, etc.

    Thanks

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Agree with you Nathan, that would be perfect!

    0
  • Ashwini Sukhdeve
    Ações de comentário Permalink

    @Wes Is there a similar code for sections in category?

    0
  • Wes Drury
    Ações de comentário Permalink

    @Ashwini - Since we discussed a couple of different topics in this article.  What exactly are you trying to do and I'll see if I'm able to help.

    0
  • Ashwini Sukhdeve
    Ações de comentário Permalink

    @Wes I am referring to your comment on June 15 2016 that shows the code to do it without JS. Thanks!

    0
  • David Bjorgen
    Ações de comentário Permalink

    @Vladan, your Javascript solution works well for me, but it displays only 30 records. If I wanted to create a button that move to the next 30 records, how would I go about that?

    0
  • Vladan Jovic
    Ações de comentário Permalink

    Hey David, glad it helps! In case you have 30+ articles, the easiest will be to pull more articles (max 99 articles).
    How to achieve that?
    Just replace 

    "/articles.json"
    with
    "/articles.json?per_page=99"

    In case you just want the next btn, that will require a larger upgrade of my initial code. 

    0

Por favor, entrar para comentar.

Desenvolvido por Zendesk