<ul>
   {{#each section.sections}}
       <li>
          <a href="{{url}}" ">{{name}}</a>
       </li>
    {{/each}}
</ul>

• Ifra Saqlain

  • June 28, 2022 05:08
  • Edited

  Community Moderator

  

  

  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

• Teresa

  • June 28, 2022 13:16

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

   

  

• Ifra Saqlain

  • June 28, 2022 17:11
  • Edited

  Community Moderator

  

  

  You really are an amazing asset to ZenDesk!

  Thanks 😊️ 

• Teresa

  • June 28, 2022 20:57

  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!

• karajaisari

  • June 29, 2022 22:34
  • Edited

  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.

• Ifra Saqlain

  • June 30, 2022 08:05
  • Edited

  Community Moderator

  

  

  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.

  

   

   

   

   

• Teresa

  • July 01, 2022 13:10
  • Edited

  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!

• Ifra Saqlain

  • July 01, 2022 04:59
  • Edited

  Community Moderator

  

  

  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>

  

   

• Teresa

  • July 01, 2022 12:42

  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!

  

• Ifra Saqlain

  • July 01, 2022 13:02

  Community Moderator

  

  

  Finally, it's working :)

  Cheers!

• Teresa

  • July 05, 2022 14:45
  • Edited

  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! 

• Ifra Saqlain

  • July 05, 2022 12:58
  • Edited

  Community Moderator

  

  

  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

• Teresa

  • July 05, 2022 13:16

  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? 

• Oliver Mottram

  • January 10, 2023 09:12

  Hi Ifra Saqlain I tried this code, however it just shows the category title on the left hand side of the section page, rather than the other sections in that category - would you be able to help please?

   

• Ifra Saqlain

  • January 10, 2023 17:48
  • Edited

  Community Moderator

  

  

  Hey Oliver Mottram, I just tried my code and I can add sections in my category:

   

  i). Add the script code to the script.js file at the bottom.

  $(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).addClass("subsection-item");
            }
          });
      });
    });
  });

   

  ii). Add the HTML tags to the section page inside the container.

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

  iii). Add data-id to the subsection list tag <li> tag.

  

   

   

  iv). Add this CSS to the style.css file at the bottom area.

  .subsection-item {
    padding: 10px 20px;
  }

   

   

  Output is:

  

   

   

  If your category has sections then section list would be shown without any doubt.

  Let me know if any confusion :)

   

  And, check the console in the dev-tool if you find any bug, share the screenshot here.

  If you have different type of query related to this, you can ask.

   

  Thanks

  Have a nice Day!

   

   

Please sign in to leave a comment.