To Zendesk team,

I have the same issue, please let us know.

Hey all,

This code is pulled from anotherarticlewhich 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:

$(document).ready(function () {
/**
@add your hc domain here
@for eg: var hc_url = 'https://testcompany.com'
*/
var hc_url = "https://testcompany.com";

var _allarticles = [],
_sorted = [],
_artHtml = "",
_id,
_url;

var _articles = function (article) {
$.ajax({
url: _url,
type: "GET",
dataType: "json",
success: article,
});
};

// function for see all articles button in category
$(function (e) {
_id = $(".see-all-articles").attr("href").split("/sections/")[1].split("-")[0];

if (typeof HelpCenter.user.locale == "undefined") {
HelpCenter.user.locale = window.location.pathname
.replace("/", "")
.replace("?", "/")
.split("/")[1];
}

_url =
hc_url +
"/api/v2/help_center/" +
HelpCenter.user.locale +
"/sections/" +
_id +
"/articles.json";
_articles(function (data) {
_allarticles = data.articles;

console.log(data);

if (data.count > 30) {
for (var i = 1; i < data.page_count; i++) {
_url = data.next_page;
_articles(function (data) {
_allarticles = _allarticles.concat(data.articles);
_arthtml = "";
$(_allarticles).each(function (idx, itm) {
if (itm.draft == true) {
} else {
_arthtml =
_arthtml +
'
'">'">★' +
itm.title +
"
";
}
});
$(e.target).parent().find("ul.article-list").html(_arthtml);
$(e.target).hide();
});
}
} else {
_arthtml = "";
$(data.articles).each(function (idx, itm) {
if (itm.draft == true) {
} else {
_arthtml =
_arthtml +
'
'">'">★' +
itm.title +
"
";
}
});
$(".see-all-articles").parent().find("ul.article-list").html(_arthtml);
$(".see-all-articles").hide();
}
});
});
// function for see all articles button in category ends here
});

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

Hi Tipene,

I love your suggestion. It works. Thank you!

Tipene HughesThis 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.

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?

HiTipene Hughes. This is the section for our Section content:

{{section.name}}

{{#if settings.show_follow_section}}
{{subscribe}}

{{/if}}
{{#if section.description}}
{{section.description}}

{{/if}}


{{#if section.sections}}

{{#each section.sections}}
<李类= " section-list-item " >

{{name}}





{{/each}}

{{/if}}

{{pagination "section.sections"}}

{{#if section.articles}}

{{#each section.articles}}

{{#if promoted}}



{{/if}}
{{title}}
{{#if internal}}




{{/if}}

{{/each}}

{{else}}

{{t 'empty'}}

{{/if}}

{{pagination "section.articles"}}

Tipene HughesHi 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!

Hey,Cheyenne Trommels - Oorebeek!

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 alinkthat'll walk you through importing it in your help center.

I hope this helps!

Tipene

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.

HiTipene Hughes,

I am in the same boat asRena 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!

HeyRena SuematsuAaron 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:

$(document).ready(function () {
/**
@add your hc domain here
@for eg: var hc_url = 'https://testcompany.com'
*/
var hc_url = "https://testcompany.com";

var _allarticles = [],
_sorted = [],
_artHtml = "",
_id,
_url;

var _articles = function (article) {
$.ajax({
url: _url,
type: "GET",
dataType: "json",
success: article,
});
};

// function for see all articles in category
$(function (e) {

const links = document.querySelectorAll('.see-all-articles');

links.forEach((link) => {
_id = link.getAttribute("href").split("/sections/")[1].split("-")[0];

if (typeof HelpCenter.user.locale == "undefined") {
HelpCenter.user.locale = window.location.pathname
.replace("/", "")
.replace("?", "/")
.split("/")[1];
}

_url =
hc_url +
"/api/v2/help_center/" +
HelpCenter.user.locale +
"/sections/" +
_id +
"/articles.json";
_articles(function (data) {
_allarticles = data.articles;

if (data.count > 30) {
for (var i = 1; i < data.page_count; i++) {
_url = data.next_page;
_articles(function (data) {
_allarticles = _allarticles.concat(data.articles);
_arthtml = "";
$(_allarticles).each(function (idx, itm) {
if (itm.draft == true) {
} else {
_arthtml =
_arthtml +
'
'">'">★' +
itm.title +
"
";
}
});
$(e.target).parent().find("ul.article-list").html(_arthtml);
$(e.target).hide();
});
}
} else {
_arthtml = "";
$(data.articles).each(function (idx, itm) {
if (itm.draft == true) {
} else {
_arthtml =
_arthtml +
'
'">'">★' +
itm.title +
"
";
}
});
link.parentElement.querySelector('.article-list').innerHTML = _arthtml;
link.style.display = "none";
}
});
})
});
// function for see all articles in category ends here
});

I hope this helps! Feel free to reach out with any questions.

Tipene

Tipene Hughesthat code works! Thank you!

Tipene Hughes
您提供的代码让我实现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.

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.

这是这篇文章列表教派ion in my category_page.hbs.

Any help would be appreciated!

{{#if articles}}
{{!------------
Article list
------------}}

{{#if (compare ../settings.article_list_style '<=' '8')}}

{{! Built-in article list }}

{{~#each articles}}
=" "2")}} md:col-6{{/if~}}
{{~ #如果(比较. . /../settings.article_list_columns ">=" "3")}} lg:col-4{{/if~}}">









{{~title~}}

{{~#is ../../settings.promoted_article_style 'icon'}}
{{~#if promoted}}





{{/if~}}
{{/is~}}
{{~#if internal~}}





{{~/if~}}
{{~#isnt ../../settings.article_list_excerpt 0}}

{{excerpt body characters=../../settings.article_list_excerpt}}

{{/isnt~}}



{{/each~}}

{{#if more_articles}}


{{t 'show_all_articles' count=article_count}}


{{/if}}
{{else}}

{{! Custom article list micro-template }}

{{/if}}

{{else}}


{{t 'empty'}}


{{/if}}