List articles by labels on the Article page / modify Related articles using labels
AnsweredI'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.
-
@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.
-
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> -
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.
-
Thanks Nicole, that would be fantastic.
-
Katerina, were you ever able to adapt your code to a page template? I'm interested in doing the same thing.
-
@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------------------------> -
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.
-
Hey Charles,
You should be able to upload .js files as assets and reference those assets in your Guide theme :)
Cheers!
-
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?
-
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:
- Using themes and templates to customize your Help Center
- Help Center CSS Cookbook
- Help Center Templates Introduction
- Help Center Javascript Cookbook
- Tips for using HTML to customize your Help Center
Hopefully other users can jump in here and offer up some additional guidance on how to set up this script.
Cheers!
-
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 -
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
-
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
-
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.
-
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-
-
Hi Charles Lloyd, I love what you've done, I suck at coding but I'm trying to apply your code on my zendesk guide but i had no success. Is it anything else that i've might be missing?
-
Hey Nicole! I can't say for sure, since I'm not familiar with his code, but there is a possibility that you're on the newer version of our help center templating, which removes jquery support. You can import it yourself, just take a look at this article for more information.
Please sign in to leave a comment.
17 Comments