Recent searches
No recent searches
Listing articles in the home_page.hbs template via curlybars or an API script. API v3 to API v4
Posted Jul 05, 2024
Hi Zendesk community,
It seems Zendesk's theming API has been upgraded from v3 to v4.
I have a question regarding the change to {{categories}} and the fact that "articles" has been removed entirely from being called from the categories object on the homepage. Our custom design relies on being able to list articles on the homepage under sections. Does this mean articles can be called via another object or has it been removed entirely?
Requirement
How can I call a list of articles that belong to a specific section on the home_page.hbs template?
Currently, on API v3 I use:
{{#each categories}}
{{#each sections}}
{{#is id 123456789}}
<div>
{{#each articles}}
<a href="{{url}}">
<div>
<h4 >{{excerpt title characters=40}}</h4>
<p>{{excerpt body characters=100}}</p>
</div>
</a>
{{/each}}
</div>
{{/is}}
Will I instead need to inject a list of articles via a script? If so, will I face an issue with API rate limiting or API limits?
Potential solution
I've been testing our a script which works well but I am running into an issue whereby the browser is downloading all attachments associated with the article as it's in the .json data.
My aim is to have two types of lists in the home_page.hbs.
- A list of articles that live under a section. Only the title is required along with understanding if it's an internal article or promoted.
- A preview of the articles that live under a section. Only the title and an excerpt are required.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Function to sanitize HTML by removing tags that could fetch external resources
function sanitizeHtml(html) {
let tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
// Remove all media-related tags
const elementsToRemove = tempDiv.querySelectorAll("img, video, audio, source, iframe, embed");
elementsToRemove.forEach(el => el.remove());
return tempDiv.innerHTML;
}
// Function to fetch and display articles for a given container and type
function fetchAndDisplayArticles(container, type) {
const sectionId = container.getAttribute('data-section-id');
const hcUrl = "https://your_subdomain.zendesk.com";
if (sectionId) {
const url = `${hcUrl}/api/v2/help_center/sections/${sectionId}/articles.json`;
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: function(data) {
let articlesHtml = '';
data.articles.forEach(article => {
// Sanitize the body to remove any attachments
const sanitizedBody = sanitizeHtml(article.body);
const title = article.title.substring(0, 40);
const excerpt = sanitizedBody.substring(0, 100);
if (type === 'list') {
articlesHtml += `
<li>
<a href="${article.html_url}">
${article.promoted ? '<span>★</span>' : ''}
${title}
${article.internal ? '<span>(Internal)</span>' : ''}
</a>
</li>
`;
} else if (type === 'preview') {
articlesHtml += `
<a href="${article.html_url}">
<div>
<h4>${title}</h4>
<p>${excerpt}</p>
</div>
</a>
`;
}
});
container.innerHTML = articlesHtml;
},
error: function(error) {
console.error('Error fetching articles for section', sectionId, ':', error);
}
});
}
}
// Select and process all divs with the class 'articles-list'
const articlesLists = document.querySelectorAll('.articles-list');
articlesLists.forEach(container => fetchAndDisplayArticles(container, 'list'));
// Select and process all divs with the class 'articles-preview'
const articlesPreviews = document.querySelectorAll('.articles-preview');
articlesPreviews.forEach(container => fetchAndDisplayArticles(container, 'preview'));
});
</script>
- How can I stop the browser/script from downloading the attachments associated with the article the script is access via the API?
- And how can I also limit the article list to a maximum of 6 and include a "See all X articles? button?
Thank you in advance!
1
5 comments
Simon
Tagging Ifra Saqlain and Tipene Hughes who seem very knowledgeable in this area.
0
Christopher Kennedy
Hi Simon,
Do the attachments you're referring to have the file types that you've included in your
elementsToRemove
list? Also, do you structure your content in a small number of categories and/or sections? Or is this an article list for just a single section you're looking to display on the home page?0
Simon
Hi Christopher Kennedy,
Thanks for your reply.
The attachments are generally images embedded into the article. The script elementsToRemove is based on html such as <img> and not the file type extension. Our content is structured as follows:
Category > Sections > Articles.
We have around 5 categories, 8 sections and 5-15 articles in each section.
0
Simon
Hi Christopher Kennedy , any updates on this one?
0
Christopher Kennedy
Hi Simon,
Thanks for the context. Sorry for the missed reply! Since you're just building an article excerpt, the simplest approach is to just pull the text from the returned article JSON body. This is easier to accomplish in vanilla JS using DOMParser() and innerText. For example, where you're currently sanitizing HTML:
This would return just the article body text without having to first load the body content, images, etc to the DOM before sanitizing.
Also to limit the number of articles returned by your API request, take advantage of pagination to set the max article count in the response to 6. For example:
0