I am a UI/UX designer and I have taken on a new project to overhaul our Zendesk. I have no experience but I am learning on the fly, I have already built a custom sidebar navigation and now my problem is this:

Is there a way to have the sidebar auto populate with the categories and articles from our knowledge base? I assume there is a way to do this, otherwise that would mean every time I upload a new document to our knowledge base I will also have to go back into the code and add the href with the link and title to the sidebar nav html and I'm certain that's not the way this works. I'm happy to do the research but I don't know what to search for, I've tried researching auto populating lists etc. but nothing matches my need. I can manually input every article into the side bar and it functions beautifully, I just figured there was an actual way to automate this once the code is input.

Thank you in advance,

-Newbie

CodePudding user response：

As, I said in my comment, if you have a db in the backend with your info, you should use Ajax.

Ajax allows JavaScript to send requests to the backend. When this request is sent, the backend should reply with data in some form, such as JSON, and then your client side JavaScript will need to populate the sidebar using the data.

If you give some more info about your backend and html, I can give an example!

CodePudding user response：

Why are you adding a list manually, you can call API for all categories of your Help Centre and make a sidebar:

1). Add the below code to your script.js file at the bottom.

$.getJSON('/api/v2/help_center/categories/' , function(el){
  console.log(el)
  var _x = '';
  $.each(el.categories, function (idx, itm){
    _x  = '<a href = "' itm.html_url '" >'   itm.name   '</a><br>';
  });
  
if("ul.categories"){
  $(".categories").html(_x);
}
});

2). document_head.hbs should have jquery CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

3). Add this HTML to your template where you want to show the categories.

Categories