List articles by labels on the Article page / modify Related articles using labels

Answered

15 Comments

  • Wes Drury
    Comment actions Permalink

    @Katerina - This is possible however you would have to use the API in order to accomplish this.  It would take some custom coding to pull the articles by the labels only.  Unless you have an in-house developer then you would have to outsource this type of coding.

    0
  • Katerina Benova
    Comment actions Permalink

    Hi @Wes, thanks for the API suggestion. I was able to make it work in a separate HTML file, but I'm struggling with displaying the results in the template.

    In the HTML file I simply added <ul id="family"></ul> and the java script takes care of everything.

    Could you give me a hint how to get it to Article template? The function in the script is working ok (I do get a response in the developer's console)

    here is the HTML

    <!DOCTYPE html>
    <html>
    <head>
      <title>Articles by label</title>
    </head>
    <body>
      <h3>Related Articles</h3>
      <ul id="family"></ul>
     
    <script>
      function createNode(element) {
          return document.createElement(element);
      }

      function append(parent, el) {
        return parent.appendChild(el);
      }

      const ul = document.getElementById('family');
      const url = 'https://benkat.zendesk.com/api/v2/help_center/articles/search.json?query=TM_family';
      fetch(url)
      .then((resp) => resp.json())
      .then(function(data) {
        let family = data.results;
        return family.map(function(article) {
          let li = createNode('li'),
              span = createNode('span');
          span.innerHTML = "<a href ="+`${article.html_url}`+">"+`${article.title}`+"</a>";
          append(li, span);
          append(ul, li);
        })
      })
      .catch(function(error) {
        console.log(error);
      });   
    </script>
    </body>
    </html>

     

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hey Katerina - 

    I also want to give you a head's up that the product team is working on developing a way to post the same piece of content to multiple places in your Knowledge Base. This should be available toward the end of the year. 

    You can follow this thread in the Product Feedback topic for updates. 

    0
  • Katerina Benova
    Comment actions Permalink

    Thanks Nicole, that would be fantastic.

    0
  • Charles Lloyd
    Comment actions Permalink

    Katerina, were you ever able to adapt your code to a page template? I'm interested in doing the same thing. 

    0
  • Katerina Benova
    Comment actions Permalink

    @Charles, this is how I add list of all articles with a label "Project_family". For some reason I had to add the script directly to the article_page templatee (it didn't work when it was part of the script.js).

    Here is a link to our pages: https://help.memsource.com/hc/en-us/articles/115003692212-Translation-Memories

    <!----------------------list of article's lables ------------------------------------------->

    <div>

    {{#if article.labels}}

    {{#each article.labels}}

    {{#is identifier 'Project_family'}}

    <p>Articles related to <b>Project:</b></p>

    <ul class="related">

    <p id="Project"></p>

    </ul>

    {{/is}}

    {{/each}}

    {{/if}}

    <script>

    <!-- create elements for family articles -->

    function createNode(element) {

    return document.createElement(element);

    }

    function append(parent, el) {

    return parent.appendChild(el);

    }

    <!-- list Project family articles-->

    const ul1 = document.getElementById('Project');

    const url1 = 'https://help.yourDomain.com/api/v2/help_center/articles/search.json?query=Project_family';

    fetch(url1)

    .then((resp) => resp.json())

    .then(function(data) {

    let articles = data.results;

    return articles.map(function(article) {

    let li = createNode('li'),

    span = createNode('span');

    span.innerHTML = "<a href ="+`${article.html_url}`+">"+`${article.title}`+"</a>";

    append(li, span);

    append(ul1, li);

    })

    })

    .catch(function(error) {

    console.log(error);

    });

    </script>

    </div>

    <!---------------end of the label list------------------------>
    0
  • Charles Lloyd
    Comment actions Permalink

    Katerina,

    Thanks much for the code sample and explanations. I will try and adapt this to a right-had pane we have. I wonder if .js files can be added as assets, and referenced like asset png etc? It would be nice to isolate custom code from Zendesk's.templates. 

    Your site looks very nice, well done. 

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Charles,

    You should be able to upload .js files as assets and reference those assets in your Guide theme :)

    Cheers!

    0
  • Angeli Ho
    Comment actions Permalink

    From the above script, Project_family is hardcoded.

    'https://help.yourDomain.com/api/v2/help_center/articles/search.json?query=Project_family';

    I would like to search by article label.

    How can I pass article label as a variable to the script?

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hi Angeli,

    It looks like there's hasn't been any response to your question :-/ I did want to at least follow-up with some useful documentation regarding Help Center customization below:

    Hopefully other users can jump in here and offer up some additional guidance on how to set up this script.

    Cheers!

     

    0
  • Katerina Benova
    Comment actions Permalink

    It seems zendesk changed the behavior of API "articles/search.json" and now returns wildcard search

    Now I'm using article API with parameter label_names

    https://developer.zendesk.com/rest_api/docs/help_center/articles

    /api/v2/help_center/{locale}/articles.json?label_names=TM_family
    0
  • Charles Lloyd
    Comment actions Permalink

    Angeli,

    It seems you would have to write a function that called the ZD APIs twice- once to get the labels of the current article, and the second time to search for all articles containing the same labels (if if getting a list of articles that share labels is what you were looking to do).

    I had a hard time trying to figure out how to get the labels of the article currently loaded but I think I would do it like-

    var currentArticleID = location.href  (insert a bunch of js work to parse out the id)

    then api/v2/help_center/en-us/articles/<insert id from var here>.json would get you the current article from which you can get the label_names property. 

    then /api/v2/help_center/articles/search.json?label_names=<labels from current article, comma separated> would give you list of "related" articles

     

    0
  • Trapta
    Comment actions Permalink

    Hi @Charles Lloyd,

    You can use the below code and put it at the top of your article_template.hbs file:

    <script>
    var labels = [];
    {{#each article.labels}}
    labels.push('{{identifier}}');
    {{/each}}
    var apiURL = '/api/v2/help_center/articles/search.json?label_names='+labels.join(',');
    console.log(apiURL); // Console the API Url
    </script>

    This will give you the API URL with labels of current articles. You can further call the ZD API to get the articles.

    Let me know if this solves your issue.

    Team Diziana

    0
  • Charles Lloyd
    Comment actions Permalink

    Hi @Diziana, 

    Thanks much for the detailed code. I'm a total newbie to Curlybars and appreciate the example of accessing in-page properties. 

    I'll post back here with a screenshot when I get a chance to implement this. 

    0
  • Charles Lloyd
    Comment actions Permalink

    Hi all, 

    I finally implemented my solution that shows a list of Related Article if articles share the same label. Thanks for starter code and examples, Trapta and Katerina.

    I put this in article_page.hbs-

    <script>
    var articleId = {{article.id}}
    function showRelatedLinks(){
    var labels = [];
    {{#each article.labels}}
    labels.push('{{identifier}}');
    {{/each}}
    var apiURL = '/api/v2/help_center/articles/search.json?label_names='+labels.join(',');
    console.log(apiURL); // Console the API Url
    console.log(labels);
    return apiURL;
    }
    </script>

    and then this in my script.js, make ajax call and do formatting work (also exclude the currently loaded article)-

    //Show related links in right pane
    //related links are articles that share one or more labels
    function insertRelLinks(){
    var template_start = `<ul class="section-articles__list">`;
    var template_end = `</ul>`;
    var template = ``;
    var jqxhr = $.ajax( showRelatedLinks() )
    .done(function( data ) {
    if( data.count > 0 ){
    $('#rellinks-section').html((template_start + template + template_end));
    $.each( data.results, function( k, v ){
    var vID = $(v.id);
    if(vID[0]!==articleId) //don't show link to currently loaded article
    {
    template += `<li class="section-articles__item">
    <a href="${v.html_url}" class="section-articles__link">${v.name}</a>
    </li>`;
    }
    } );
    $('.related-articles').show();
    $('#rellinks-section').html((template_start + template + template_end));
    }
    });
    }
    insertRelLinks();

    It looks like-

    0

Please sign in to leave a comment.

Powered by Zendesk