Display section names on article page

Hi Meghan, in order to display Other Sections from the same category automatically, you need to create a script that uses Zendesk API. You can do it on your own, if you are familiar with this.

We can also help you with this customization, but we don't customize standard themes or themes made by other developers. So it's important that you use one of our Zendesk themes. 

Best, 

Lotus Themes Team

Hello @Meghan Mahar,

We have a plugin for you - http://customersupporttheme.com/zendesk-plugins/ (Zendesk Categories List with Sections)

This plugin lists Categories and Sections automatically on your Help Center. It works on Category, Section, and Article Templates.

Some of our recent clients using this plugin:

 - https://ajuda.umov.me/hc/pt-br/articles/115005535508-Cria%C3%A7%C3%A3o-de-dashboard-personalizado

  - https://support.smarter.am/hc/en-us/articles/115005162769-How-do-I-descale-my-Smarter-Coffee-machine-

If have any question feel free to message us at - info@customersupporttheme.com

Thanks
Customer Support Team
http://customersupporttheme.com
(Experts in Zendesk Themes, Zendesk Help Center, Plugins, Help Center Branding and Customization.)

Hey @Meghan Mahar,

Go to your article template and replace the code from line no. 8 with the code below,

<div class="article-container" id="article-container">
 <section class="article-sidebar">
  <section class="section-articles collapsible-sidebar">
   <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
   <ul>
   {{#each section.articles}}
    <li>
     <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
    </li>
   {{/each}}
   </ul>
  {{#if section.more_articles}}
   <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
  {{/if}}
 </section>
 <section id="sections-list" class="sections-list collapsible-sidebar">
  <h3 class="collapsible-sidebar-title sidenav-title">
   Other Sections
  </h3>
 </section>
</section>
 
<script>
 var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);
 
 $.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>')
 });
</script>

Let me know if you face any issue.

Team Diziana

Credit for the above code goes to Vladan. He has posted the code here and I tweaked it a bit to make it work for you.

Thanks

Thank you, Trapta (and Vladan wherever you are)! This worked great. Now to see if I can tweak the CSS of the list. Thanks again! 

@Trapta or @Meghan Mahar, any chance you could share how to tweak the CSS to match the "Articles in this section" list? Thanks!

Hello,

I am trying to use this code, but how can I make the script to work? It does not seem to be recognized inside the article_page.hbs: Failed to load resource: the server responded with a status of 404 ().

Also, can you please let me know if I am editing the correct page? I am adding this code inside the article_page.hbs and replacing the block <div class="article-container" id="article-container"> with this code.

Thank you for your help.

Emil

@... ^^

Hi @...,

May you please post a screenshot of your console or if you may share the URL of your HC then that will helpful for me to provide you fix for your issue.

Thanks

Trapta

Hello @...,

Thanks for replying.

I am leaving here the page where I added the code, unfortunately we are running a restricted Zendesk Help Center so I cannot share the URL with you directly.

I added Jquery by following an article found on the community and I attached a screenshot showing where it's placed.

I added the code inside the article_page.hbs like bellow.

<div class="container-divider"></div>
<div class="container">
<nav class="sub-nav">
{{breadcrumbs}}
<!--<div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search scoped=settings.scoped_kb_search submit=false}}
</div> -->
</nav>

<div class="article-container" id="article-container">
<!-- code for adding sections at the side of artcle content -->
<section class="article-sidebar">
<section class="section-articles collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
<ul>
{{#each section.articles}}
<li>
<a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if section.more_articles}}
<a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
{{/if}}
</section>
<section id="sections-list" class="sections-list collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">
Other Sections
</h3>
</section>
</section>

<script>
var catID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);

$.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>')
});
</script>

<article id="main-content" class="article">
<header class="article-header">
<h1 title="{{article.title}}" class="article-title">
{{article.title}}
{{#if article.internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</h1>

<div class="article-author">
{{#if settings.show_article_author}}
<div class="avatar article-avatar">
{{#if article.author.agent}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-agent">
<path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
</svg>
{{/if}}
<img src="{{article.author.avatar_url}}" alt="" class="user-avatar"/>
</div>
{{/if}}
<div class="article-meta">
{{#if settings.show_article_author}}
{{#link 'user_profile' id=article.author.id}}
{{article.author.name}}
{{/link}}
{{/if}}

<ul class="meta-group">
{{#is article.created_at article.edited_at}}
<li class="meta-data">{{date article.created_at timeago=true}}</li>
{{else}}
<li class="meta-data">{{date article.edited_at timeago=true}}</li>
<li class="meta-data">{{t 'updated'}}</li>
{{/is}}
</ul>
</div>
</div>

{{#if settings.show_follow_article}}
<div class="article-subscribe">{{subscribe}}</div>
{{/if}}
</header>

<section class="article-info">
<div class="article-content">
<div class="article-body">{{article.body}}</div>

<div class="article-attachments">
<ul class="attachments">
{{#each attachments}}
<li class="attachment-item">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="attachment-icon">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
</svg>
<a href="{{url}}" target="_blank">{{name}}</a>
<div class="attachment-meta meta-group">
<span class="attachment-meta-item meta-data">{{size}}</span>
<a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">Download</a>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</section>

<footer>
<div class="article-footer">
{{#if settings.show_article_sharing}}
<div class="article-share">{{share}}</div>
{{/if}}
{{#if settings.show_article_comments}}
{{#if comments}}
<a href="#article-comments" class="article-comment-count" title="{{t 'go_to_comments'}}">
<span class="visibility-hidden">
{{t 'comments_count' count=article.comment_count}}
</span>
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="article-comment-count-icon">
<path fill="none" stroke="currentColor" d="M1 .5h10c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H6l-2.6 2.6c-.3.3-.9.1-.9-.4V8.5H1C.7 8.5.5 8.3.5 8V1C.5.7.7.5 1 .5z"/>
</svg>
{{article.comment_count}}
</span>
</a>
{{/if}}
{{/if}}
</div>
{{#with article}}
<div class="article-votes">
<span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
<div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
{{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
{{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
</div>
<small class="article-votes-count">
{{vote 'label' class='article-vote-label'}}
</small>
</div>
{{/with}}

<div class="article-more-questions">
{{request_callout}}
</div>
<div class="article-return-to-top">
<a href="#article-container">
{{t 'return_to_top'}}
<svg xmlns="http://www.w3.org/2000/svg" class="article-return-to-top-icon" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
</a>
</div>
</footer>

<div class="article-relatives">
{{#if settings.show_recently_viewed_articles}}
{{recent_articles}}
{{/if}}
{{#if settings.show_related_articles}}
{{related_articles}}
{{/if}}
</div>
{{#if settings.show_article_comments}}
<div class="article-comments" id="article-comments">
<section class="comments">
<header class="comment-overview">
<h2 class="comment-heading">
{{t 'comments'}}
</h2>
<p class="comment-callout">{{t 'comments_count' count=article.comment_count}}</p>
{{#if comments}}
<div class="dropdown comment-sorter">
<button class="dropdown-toggle" aria-haspopup="true">
{{t 'sort_by'}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
</button>
<span class="dropdown-menu" role="menu">
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}" role="menuitem">{{name}}</a>
{{/each}}
</span>
</div>
{{/if}}
</header>

<ul id="comments" class="comment-list">
{{#each comments}}
<li id="{{anchor}}" class="comment">
<div class="comment-wrapper">
<div class="comment-info">
<div class="comment-author">
<div class="avatar comment-avatar">
{{#if author.agent}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-agent">
<path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
</svg>
{{/if}}
<img src="{{author.avatar_url}}" alt="" class="user-avatar"/>
</div>
<div class="comment-meta">
<span title="{{author.name}}">
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
</span>

<ul class="meta-group">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
{{/if}}
</ul>
</div>
<div class="comment-labels">
{{#with ticket}}
<a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
{{t 'request'}}{{id}}
</a>
{{/with}}
{{#if pending}}
<span class="comment-pending status-label status-label-pending">{{t 'pending_approval'}}</span>
{{/if}}
</div>
</div>

<section class="comment-body">{{body}}</section>
</div>

<div class="comment-actions-container">
<div class="comment-vote vote" role="group">
{{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
</svg>
{{/vote}}
{{vote 'sum' class='vote-sum'}}
{{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
</svg>
{{/vote}}
</div>
<div class="comment-actions actions">
{{#actions}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
<path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
<circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
</svg>
{{/actions}}
</div>
</div>
</div>
</li>
{{/each}}
</ul>

{{pagination}}

{{#form 'comment' class='comment-form'}}
<div class="avatar comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit' class="button button-large"}}
</div>
</div>
{{/form}}

<p class="comment-callout">{{comment_callout}}</p>
</section>
</div>
{{/if}}
</article>
</div>
</div>

Please let me know if you need other information.

Regards,

Emil

@... Can you please confirm that the information I sent is the one expected? Is it enough for you to be able to offer guidance?

Regards,

Emil

Hi @...,

Apologies for the late reply. The information you have provided is too much which is rather confusing than being helpful. Please simply provide the screenshot of your browser console screen where it is showing the error.

Thanks

Hello @..., thanks for replying back.

I uploaded the screenshot -> https://prnt.sc/t89vut

Please let me know if you need something else.

Regards,

Emil