Recent searches
No recent searches
Help Center – Status Tabbed-navigation
Posted Jul 05, 2022
We would like to apply an extended navigation where a user has the possibility to see all categories and the related sections on the category, section and the article pages. (Like slack do it
https://slack.com/intl/de-de/help/categories/360000049043)
We know that there are some calls like
- GET /api/v2/help_center{/locale}/categories
- GET /api/v2/help_center{/locale}/sections
- GET /api/v2/help_center/{locale}/categories/{category_id}/sections
We already used them and ran into several issues like by default the number of sections is paginated (restricted to 30 items per call), error handling and a lot of refetching / calling (change language, login user etc.)
Is there any other way to get all related sections rather than calling all the categories and afterwards all the related sections for each category? And this every time I click on a link or refresh a site?
Best case would be an option where we can get the categories and sections in the templates. If it's not the case, are you planning anything regarding the availability of all categories and sections e.g. as global properties in the templates?
0
2 comments
Ifra Saqlain
Hey Alex Megalos,
Use the code to get the functionality like slack on category page;
i). Add code to your script.js file.
$(document).ready(function () {
$.getJSON('/api/v2/help_center/categories.json' , function(data) {
var _x = "";
$.each(data.categories , function(idx , itm){
_x += '<li class="category-list-items">';
_x += '<a href = "'+itm.html_url+'" class="category-list-link" id="'+itm.id+'">' + itm.name + '</a>';
_x += '</li>';
});
$(".category-tab-block").html(_x);
var categoryLengthCheck = $(".category-tab-block > li").length;
if(categoryLengthCheck){
$(".category-tab-block > li").show();
$('.category-list-link').each(function(index, value){
var categoryId = $(this).attr("id");
getSectionsOfCategories(categoryId);
})
}
}) ;
function getSectionsOfCategories(categoriesID) {
$.getJSON('/api/v2/help_center/categories/' + categoriesID + '/sections.json' , function(data) {
var _y = "";
$.each(data.sections , function(idx , itm){
_y += '<li class="sections-list-item">';
_y += '<a href = "'+itm.html_url+'" class="sections-list-link" id="'+itm.id+'">' + itm.name + '</a>';
_y += '</li>';
});
$("#" + categoriesID).parent().append('<ul class="sections-list-of-tab">' + _y + "</ul>");
var seclength = $(".sections-list-of-tab > li").length;
if(seclength){
$(".sections-list-of-tab > li").show();
}
});
}
});
Screenshot:-
ii). Add html element to your category_page.hbs file.
iii). Add code to your style.css file.
.sections-list-of-tab {
display:none;
border: 2px solid #ddd;
background-color:#f7f7f7;
padding:10px;
}
.sections-list-of-tab li {
padding:5px 0;
}
.category-list-items:hover .sections-list-of-tab {
display:block;
}
.category-list-items {
margin: 10px 0;
}
.category-list-items span {
cursor: pointer;
}
Screenshot:-
iv). Make sure document_head.hbs file has jquery CDN.
v). Use CSS to make this as a Tab.
vii). When your have done with this, you will see categories as a tab and when you do mouse hover over any category, all the clickable sections of that category would be shown in a list.
Output:-
Thanks
Team
1
Oliver Mottram
Hi Ifra Saqlain this worked well, thank you! When I added this code, the categories are shown in a vertical list down the page, is there anyway to have them going across the page in a row, like slack have please?
0