Question

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

Forum|Forum|8 years ago
June 29, 2018
19 replies
90 views

I'd like to use one article in more than one group of articles - for example, several different products use the same setting and I don't want to have the same content multiple times (and updating it multiple times when needed).

But at the same time, I would like to display all articles for one product on one page. An article cannot have more than one section/category and I didn't find a way to tweak Related articles, so it seems the Labels are the only way.

My goal is to:

1. add 'Product1', 'Product2' labels to the "Settings" Article

2. add label 'Product1' to "Product1 into" article and label 'Product2' to "Product2 intro" article (etc)

3. When a user opens "Product1 into" there will be a list of all articles (clickable titles) with label 'Product1' (and vice versa for "Product2 intro")

4. If a user opens the "Settings" Article, there will be two lists for each label.

I tried Curlybars but I didn't get very far.

knowledge-base

ModeratorWes

@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.

K

Katerina14Author

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>

Nicole17

Employee

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.

K

Katerina14Author

Thanks Nicole, that would be fantastic.

C

Charles35

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

K

Katerina14Author

@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------------------------>

C

Charles35

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.

Brett Bowser

Community Manager

Hey Charles,

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

Cheers!

A

Angeli12

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?

Brett Bowser

Community Manager

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!

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO