Recent searches
No recent searches
Show all articles on Category page for Zendesk Guide Help Centre
Answered
Posted Aug 17, 2022
Does anyone know how to get all the articles that are in the Section displaying as a list in the Category page at all?
Here's what I've got, and I'm trying to achieve the full list, similar to how Slack are doing here.
This is my category page, which is the standard Copenhagen theme:
<section id="main-content" class="hero">
<div class="hero-inner">
<h2 class="search_title">Help Centre</h2>
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<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 submit=false instant=settings.instant_search class='search search-full' placeholder='Find anything'}}
<div class="search_topics"><strong>Common topics: </strong><a href="https://xxxxxx.zendesk.com/hc/en-us/sections/360000094233">1</a>, <a href="https://xxxxxx.zendesk.com/hc/en-us/sections/360000084014">2</a>, <a href="https://xxxxxx.zendesk.com/hc/en-us/sections/360000098474">3 rights</a></div>
</div>
</section>
<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" aria-hidden="true">
<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="category-container">
<div class="category-content">
<header class="page-header">
<h1>{{category.name}}</h1>
{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}
</header>
<div id="main-content" class="section-tree">
{{#each sections}}
<section class="section">
<h2 class="section-tree-title">
<a href="{{url}}">{{name}}</a>
</h2>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
<path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
</svg>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
{{#if internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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}}
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{/if}}
</section>
{{else}}
<i class="category-empty">
<a href="{{category.url}}">{{t 'empty'}}</a>
</i>
{{/each}}
</div>
</div>
</div>
</div>
2
18
18 comments
Tylon Yu
To Zendesk team,
I have the same issue, please let us know.
1
Tipene Hughes
Hey all,
This code is pulled from another article which mostly outlines the process to display all sections on the category page. I've just made some slight modifications to add functionality where the sections are automatically displayed with out having to click the "See all * articles" button, as well as some updates to retain the CSS styling on the article links:
This code requires jQuery to run so be sure to have that added to the document_head.hbs file, as well.
I hope this helps! Feel free to reach out with any questions.
Tipene
1
Tylon Yu
Hi Tipene,
I love your suggestion. It works. Thank you!
0
Tom Matthews
Tipene Hughes This is exactly what we needed! Thank you so much.
For some reason I'm intermittently no longer seeing the SVG I'm adding to promoted articles. Is there any way to get this part added too?
I've added an example of a section where it's still being applied, and a section where it's not being applied.
0
Tipene Hughes
Hi Tom,
How are you adding the SVG in the code? Is it just being used in place of the span element in the script above?
0
Tom Matthews
Hi Tipene Hughes. This is the section for our Section content:
0
Cheyenne
Tipene Hughes Hi Tipene, it looks like you've brought us soooo close to removing that annoying 'click to see all articles' link. However, as a non-coder wíth some coding understanding, I'm not sure yet where to place this code (anywhere in the category_page.hbs, or in the document_head.hbs?) and how to add jQuery and what that implies or does. Is it possible to give an extended step by step for people like me who are Guide-code-dummies? Would be very grateful!
0
Tipene Hughes
Hey, Cheyenne!
You'll want to place the code in the script.js file. You can put it anywhere in the file, but I tend to place additional code at the bottom of the file so it's easy to find and make adjustments if needed. Just be sure to update the hc_url variable to your own help center URL.
Depending on the version of the help center you're using, jQuery may already be included. You can check this by taking a looking in the document_head.hbs file and checking for a script that contains a jQuery URL. If you don't see it there, here's a link that'll walk you through importing it in your help center.
I hope this helps!
Tipene
0
Rena Suematsu
Tipene Hughes
Hi Tipene, This is exactly what we needed too! Thank you so much.
However, articles in the first category appear in all other categories.
Ideally, articles in each category would appear in their own category.
How can I avoid this?
Please accept my gratitude.
0
Aaron Nicely
Hi Tipene Hughes,
I am in the same boat as Rena Suematsu, this is exactly what I needed, but when I insert this code it make the articles from the first section repeat on all the subsequent sections and hides the actual articles of the subsequent sections. For this reason it is not usable. I wonder if anyone has found a way to modify this code to work correctly or another way to do this? I tried adjusting it but so far I have been unsuccessful.
Thank you!
0
Tipene Hughes
Hey Rena Suematsu Aaron Nicely,
I’ve been able to replicate the issue you’re describing and I think what is happening is that the code is only searching for a single section ID to pull the articles. Even if there are 2 or more sections, they are being populated with the articles from the first section ID that is found. The fix for this will be to pull all section IDs that appear on the page and to iterate through them to populate each section individually.
Here’s an updated example that loops over an array of the .see-all-articles elements and populates the sections based on the articles returned from each:
I hope this helps! Feel free to reach out with any questions.
Tipene
2
Aaron Nicely
Tipene Hughes that code works! Thank you!
0
Rena Suematsu
Tipene Hughes
The code you provided has allowed me to achieve the exact behavior I was hoping for! Thank you so much for your help. You are truly a hero. I will strive to become a smart developer like you who can write code like this.
0
Tipene Hughes
Have a great day!
Tipene
1
Ria Fernandez
Hey everyone,
I'm having the exact same issue and can't seem to get the code to work right.
I tried the JS code posted in this thread and put it in my script.js but no luck.
This is the article list section in my category_page.hbs.
Any help would be appreciated!
0
Aaron Nicely
Ria Fernandez are you using Coppenhaigan theme and is it up to date? I had to update my theme before I could get it to work as it had been a few years. Seems like the code for your articles page is very different.
1
Greg Katechis
Hi Ria! I took a look at your help center and it appears to be heavily customized...which looks great, btw!...so it's really difficult to accurately determine what may or may not be working. However, when I was on the category page, it does appear that your category pages are setup this way already, so is there something else that you're trying to achieve?
0
Ria Fernandez
Aaron Nicely Hi Aaron, I'm using Braxton by Zenplates. They do have a lot of customizations on their themes. I can't seem to locate the usual ZD classes in the code.
Greg Katechis Thank you, Greg! The code I posted is for the Help Centre theme I'm currently building in the background, not the active one in use in the live site, as I am still customizing the theme.
My objective is to display all section articles in the category page and remove the "See all articles" buttons.
I tried the code in this thread but the sections are still limited to six articles, and the "See all articles" buttons are still visible.
Not sure what I'm doing wrong. :(
0