How to add a list of Sections in the sidebar on a sections page?

13 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Nicole,

    To get all the sections of a category inside a sidebar on section_page.hbs page, follow the below steps:-

     

     

    i). Go to your document_head.hbs file and add the jQuery CDN.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


    Screenshot for the mentioned step:

     

     

    ii). Go to the script.js file and paste he given snippet.

    $(document).ready(function () {

     var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
      
      var catName = $('.breadcrumbs li:nth-child(2) a').text();
      var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);
      console.log(catName);
      
     $.getJSON('/api/v2/help_center/en-us/categories/'+catID+'/sections.json', function(data) {
       //console.log(data.sections);
       var output = "";
       $.each(data.sections, function(idx, itm) {
        output += '<li>';
        output += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
        output += '</li>';
       });
      $('#sections-list').append('<ul>'+output+'</ul>')
     });
      
    });





    Screenshot for the mentioned step:

     

     

    iii). Go to your section_page.hbs file and add the HTML as in the given screenshot.

      <section id="sections-list" class="sections-list collapsible-sidebar">
      <h3 class="collapsible-sidebar-title sidenav-title">

      </h3>
     </section>




    Screenshot for the mentioned step:

     

     

    iv). Output would be:- Section Template

     

     

    If any issue feel free to ask :)

     

    Thanks

    Team

    1
  • Nicole

    Ifra Saqlain thank you SO, SO much! It is working as expected! You really are an amazing asset to ZenDesk!

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    You really are an amazing asset to ZenDesk!

    Thanks 😊️ 

    -1
  • Nicole

    Ifra Saqlain sorry to bother you again! Ran into an issue with the way we have our sandbox setup (mirroring some circumstances from production). We have a scenario of: 

     

    Category >

                    Section >

                                  Section >

                                   Article

     

    Using the code provided, that subsection appears on the sidebar. Is there any way to filter out subsections and only show sections directly under the categories? 

     

    Thank you!

    0
  • karajaisari

    I truly appreciate it. It functions as intended. You are indeed a wonderful contribution to ZenDesk! I also use these kind of codes, however I looked up these codes on the internet web.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hey Nicole, now you need to update your code, remove previous added script code add this given code.

     

    $(document).ready(function () {
      var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
      var catName = $('.breadcrumbs li:nth-child(2) a').text();
      var dumpCatName = $('.collapsible-sidebar-title.sidenav-title').text(catName);
      
       $.getJSON('/api/v2/help_center/en-us/categories/'+catID+'/sections.json', function(data) {
       console.log(data);
       var output = "";
         
       $.each(data.sections, function(idx, itm) {
        output += '<li class="sidebar-list-item" data-id="'+itm.id+'">';
        output += '<a href="'+itm.html_url+'">'+itm.name+'</a>';
        output += '</li>';
     });
          
        $('#sections-list').append('<ul>'+output+'</ul>');
           $('.section-list-item').each(function() {
          var _z = $( this ).attr('data-id');
          console.log(_z);
              $('.sidebar-list-item').each(function() {
          var _y = $( this ).attr('data-id');
          console.log(_y);
              if(_y == _z) {
            $(this).hide();
          }
        });
         
        });
     });
    });

     

     

    Go to your section_page.hbs file and find subsection code.

    Add the data-id attribute to the list item, you can see in the shared screenshot.

     

     

     

     

    1
  • Nicole

    Hi Ifra Saqlain,

    I made the changes (changed out the JS code, and added the data id into the sections page. However it is still showing the subsections on the sidebar. If it helps, the link to the sandbox is:

    Thank you!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Nicole, I have looked at your sandbox and it's working as you want.

     

    i). Currently there isn't any subsection on the template.

     

     

    ii). I'm adding subsection via HTML.

     

     

    iii). I added the same data-id as 'General Information' has.

     

     

    iv). And then, I added script code to the console, you can see 'General Information' has hidden.

     

     

    v). So, you need to add data-id to your subsection list item. You can find for ' {{#if section.sections}}' and you will get the code on section_page.hbs file:-

     

     

     

    then, add data-id="{{id}}" to the <li>

     

    0
  • Nicole

    I found my issue! I'm looking at code thinking I have the data id in there, why isn't it working? The pain of code - one character off! I had data id instead of data-id! Threw the hyphen in and it's working just as you said and as expected! Thank you so very much, Ifra Saqlain!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Finally, it's working :)

    Cheers!

    1
  • Nicole

    Hi Ifra Saqlain

    Moved this over to production, but alas, I'm having issues again. The end-user facing HC mostly works. One subsection is being added to the sidebar. But only when viewing some section pages. If you click sections on the sidebar, sometimes this listing goes away. However, the agent facing HC lists many sections that are subsections and shouldn't be listed. Our prod site is (...) if you're able to check it out and give thoughts on it. Thank you in advance for any help you can offer! 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hello Nicole,

    It's because the hidden subsections, when you have more 30 subsections in a section then pagination button would be shown on the template and  subsection would be shown in the sidebar. 

     

    Thanks

    0
  • Nicole

    Thanks, Ifra Saqlain! 30 subsections in general (in the whole HC) or 30 subsections in one section? We may have around that in the whole HC, but not in a single section. Is there any way around this? Or pretty much it just won't be achievable? 

    0

Please sign in to leave a comment.

Powered by Zendesk