Recent searches
No recent searches
Tip: Displaying Subsection list on Category page
Posted Feb 21, 2019
With Flexible Hierarchies, it is possible to create Sections that contain no articles, only Subsections. These Sections will appear empty on the Category page, which could be confusing for your end users, as there is no indication that more content is available.
I modified this article on July 12, 2019 to include articles first and then sections within a category, limit the number of each listed to 4, as well as provide a link to more articles and sections.Thanks to those who have used this article and pointed out other improvements. For everyone else, please look at the comments for more helpful tips.
To correct this problem, you can create a new section-list class and then add code to your Categories page to display a list of subsections.
Modify your CSS
To create the new section-list class, add the following to your style.css file. I simply copied from the .article-list class. To ensure that your styling stays consistent, I recommend you do the same.
.section-list {
list-style-type: none;
padding-left: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: left;
}
.section-list-item {
-webkit-box-flex: 1;
-ms-flex: 1 0 420px;
flex: 1 0 420px;
padding: 5px 0;
max-width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
To differentiate the article-list class and the section-list class, I added fontawesome bullets: + for the sections to indicate more content, and – for the articles.
.article-list-item:before {
font-family: 'FontAwesome';
content: '\f068';
margin:0 5px 0 -15px;
color: #e8710a;
}
.section-list-item:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #e8710a;
}
Modify the Categories template
In the category_page.hbs file, replace the {{#each sections}} block with the following:
{{#each sections}}
<section class="section">
<h3 class="section-tree-title">
<a href="{{url}}">{{name}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if sections}}
<ul class="section-list">
{{#each sections}}
<li class="section-list-item"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ul>
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles'}} and sections
</a>
{{/if}}
<style>
.section-list li:nth-child(n+4) {
display: none;
}
</style>
<style>
.article-list li:nth-child(n+4) {
display: none;
}
</style>
</section>
{{else}}
<i class="category-empty">
<a href="{{category.url}}">{{t 'empty'}}</a>
</i>
{{/each}}
Check it out, here: https://support.ddisystem.com/hc/en-us/categories/360001355173-Inform-Productivity-Boosters
Note: I am modifying a free theme by Diziana, so I want to give them full credit for the original. https://www.zendesktheme.com/?s=thoran&post_type=download
2
30 comments
Brett Bowser
This is fantastic.
Thanks for sharing Amy :)
0
Rebecca McMurry
I am confused where to put that code snippet. Do I paste the snippet after the first {{/if}} or the second? Wherever I seem to paste it I keep getting the error: "{{ `else` }} .. is not permitted in this context" on that last {{else}}.
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
<p>
<i class="section-empty"><a href="{{url}}">{{t 'empty'}}</a></i>
</p>
{{/if}}
</section>
{{else}}
0
Amy Gracer
Hi Rebecca,
I have since changed my code around a bit.
I suggest you delete the offending {{else}} and see if it allows you to publish.
If not, please take a look at my updated code below, starting from the section-content (beneath the section description).
Please let me know how this works for you. I will also review the Tip above and modify the code if needed.
Hope this helps....
{{#if section.articles}}
<ul class="article-list">
{{#each section.articles}}
<li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{pagination}}
<div class="section-tree">
{{#each section.sections}}
<section class="section">
<h3 class="section-tree-title">
<a href="{{url}}">{{name}}</a>
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{/if}}
</section>
{{/each}}
</div>
</section>
</div>
</div>
0
Heather Firth
I've tried all this and it isn't working at all.
I keep getting "not possible to access 'section' in 'section.articles'
0
Heather Firth
OK. So I figured this out.
On your category_page.hbs template you need to find this bit of code:
<div class="section-tree">
{{#each sections}}
<section class="section">
<h3 class="section-tree-title">
<a href="{{url}}">{{name}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</h3>
and directly underneath it paste this bit of code:
{{#if sections}}
<ul class="section-list">
{{#each sections}}
<li class="section-list-item">
<a href="{{url}}" class="section-tree-title">{{name}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
I then played around with the style.css and added this:
.article-list {
margin-left: 30px !important;
}
.section-list-item {
border-bottom: 1px solid #ddd;
font-size: 16px;
padding: 15px 0;
}
.section-list-item a {
color: $text_color;
}
.section-list-item:before {
content: '\002B';
margin:0 5px 0 -15px;
color: #d40054;
}
.section-list {
list-style-type: none;
padding-left: 18px;
text-align: left;
}
You can use this site to find the character that you want to appear in front of your sections and articles:https://www.compart.com/en/unicode/category/So
0
Amy Gracer
@Heather. Thank you! I will look into what you have, compare to my implementation, and update article as necessary. I'm sorry you ran into some trouble with it the first time around, but glad you got it working well!
0
Brett Bowser
Thanks for sharing your fix Heather :)
0
Amy Gracer
@Heather and @Brett, I updated the article to match my live site. I made quite a few changes between when I published this tip an when we went live last month.
0
Saumya Sunder
https://support.zendesk.com/hc/en-us/community/posts/360004412767/comments/360008303313
This worked for me! What do I do if I need to change the formatting from + - to expand and collapse buttons?
TIA
0
Permanently deleted user
Thanks for this tip! I'm getting an error message when I try to publish, which says "internal does not exist". It seems the rest of you were able to get it working with that...and it seems to be spelled correctly....any ideas?
0
Permanently deleted user
Just in case anyone else stumbles into this thread as I did, I have an update on what worked for me.
First, I realized that "internal" above means internal articles. Apparently, that option does not exist in curly brackets code for this particular context. Or maybe something else is messing it up. But everything I tried had similar errors, so this just wasn't working for me.
After more poking around, I discovered this:
https://gist.github.com/chucknado/6a1ee9593aa522a40898b57d6d704ca0
I copied one small section of that code and pasted it into my category page template.
Under the
section of the code, I simply pasted this
after the two nested "if" statements. This screenshot shows how I ended up modifying it to match what's on the sections page (added the svg right-chevron icon). I also added a new CSS class so I could style it almost the sections page without breaking the sections page. But the actual code to get the list of sections to appear was quite short and simple.
Here is how it ended up looking on my site. (This is a barely modified Copenhagen, btw.)
1
Nicole Saunders
Thanks for coming back and sharing your solution, Marci!
0
Erica C.
huge, HUGE thanks to all of y'all who contributed to this post. You all saved me from totally destroying my own help center since I don't really know what I'm doing when it comes to updating the templates, but I have big dreams.
0
Ruddy DEROSIERS
Hi @...,
Thanks for your tips, but i have another question : How do you show articles of your subsection in your category page ?
like this :
0
Arno (EMEA Partner)
This looks just great, that you can print out both subsection titles and articles for each section in category.
Does anyone know if this would work also for a section page, that you show all sections in that section, and for each section sub sections and articles. (Guide enterprise / deeper hierarchy).
In section page one can use section.sections to loop through each section under the section. It should return an array of sections for each section having further sub sections.
I get error: Error section_page L32:20: not possible to access `sections` in `sections.sections`
Tried multiple different syntaxes, but could not get it to work, so I started wondering, if section.sections even includes a sections array for each section in it.
Can anyone confirm, that section.sections does include also sections-array for each section in it, and whether it is possible to loop through those and print them out in the same way as in this article's example for category page? If so, a tip to correct my syntax above would be greatly appreciated.
0
Greg Katechis
Hi Amy! I don't see anything wrong with your code here, but I did have a possible solution for you. If you are using a theme that was created before March 29, 2020, you will need to add a code snippet to the sections template. You can find more info in this article and the code snippet that you need to add is this:
Let me know if you've already done this and you're still running into issues!
0
Arno (EMEA Partner)
Hi Greg,
As the last comment by Amy was pretty old, I assumed you were responding to me. Our theme is newly created copenhagen theme I am working with and your code would work fine, but it does not seem try to do what I am trying to do.
On a section page, I would like to print out all subsection titles, and under those all subsection titles and articles. So I would need first have "each section.sections", and inside that another each "section.sections".
Even if documentation says that section.sections is an array of section objects, I am not sure if those section objects include section.sections arrays correctly, or then I do not now how to reach them with these nested each-loops.
Br. Arno
1
Amy Gracer
Hi Ruddy DEROSIERS
Sorry for the late response...
This is a plugin From Diziana: https://www.diziana.com/products/multilevel-menu-plugin
0
Ruddy DEROSIERS
Amy thanks for your answer
Arno try this :
{{#each sections}}
{{name}}
{{#if sections}}
{{#each sections}}
{{name}}
{{#if articles}}
{{#each articles}}
{{title}}
{{/each}}
{{/if}}
{{/each}}
{{/if}}
{{#if articles}}
{{#each articles}}
{{title}}
{{/each}}
{{/if}}
0
Arno (EMEA Partner)
Hi,
Tried, but section page does not identify sections at all. Thanks anyhow.

0
Ruddy DEROSIERS
0
Ruddy DEROSIERS
I hope my copy is good enough, i'm on my smartphone 😉
0
Arno (EMEA Partner)
Hi Ruddy,
EDIT: clarified the example results below a bit.
Thanks. Working code, but this does not list the sub section titles under sections, only article titles. I would like to show the whole structure directly to the user. So user could navigate directly to a article in a section or sub section in a section. With the solution you provided, if I have a section with only sub sections in it, only empty section (just title) is shown, and user does not understand directly that there are sub sections and articles inside it.
What get is, even if there are also sections under this section:
What I would like to have is:
0
Greg Katechis
My apologies Arno, I definitely was responding to you and accidentally used Amy's name instead! I'm going to review the back and forth between everyone here and see where things stand right now.
0
Greg Katechis
Alright, I'm back! One more question that I have, to be sure that we're on the same page (pun not intended), is whether you're looking at the Sections page, as opposed to the Categories page. I ask because after setting up a new Copenhagen them on my account, I was able to get what I believe it is you are looking for in your last post:
Let me know if I misunderstood your request!
0
Arno (EMEA Partner)
Thanks, good to clarify this, Section page is what I am trying to modify.
0
Greg Katechis
Thanks for the clarification! Could you take a screenshot of what you are seeing when you have your help center set up like mine? Mine is taken from the first subsection titled "Subsection" and my hierarchy is as follows:
0
Arno (EMEA Partner)
Let me check if I could get you an actual image. I might need to transfer theme to another environment, as I could not share even titles without asking, and I do not have easy tools blur the content. This is anyhow what I would like achieve with a section page:

0
Binh Du
Thank you for your contributions everyone.
I was able to set the subsections in the Category view, but how would I set the subsection to be listed before articles instead of after?
0
Benjamin BAUDOUIN
Saumya Sunder the link https://support.zendesk.com/hc/en-us/community/posts/360004412767/comments/360008303313 has been removed , do you have the existing one ?
0