I want to show all my articles on my category pages
So I have my category page and want to show the sections and all the articales attached to that like the attached image this was made using a custom page only on a pro plan so need to be able to replicate this in templates I have.
Picture 2 is how is looks currently
but i do not want the see all etc I want it to display all the articles
Also how can i add the icons to each article? they are uploaded as assets but cant seem to get them onto each article.
<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="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}}
<h2 style="" class="section-tree-title">
{{name}}
</h2>
<section style=" padding: 20px 0px 20px 20px;">
{{#if articles}}
<ul class="blocks-list"">
{{#each articles}}
<li class="blocks-item">
<a href="{{url}}" class="blocks-item-link">
<center><img alt="" width="20%" src="{{asset '.png'}}"></center>
<span class="blocks-item-title">{{title}}</span>
<span class="blocks-item-description"></span>
</a>
</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>
-
Hey Cris,
Follow the steps below:
1). Copy and paste it at the bottom of script.js file.
$(document).ready(function(){
$.getJSON('/api/v2/help_center/articles', function (data) {
var articleList = '';
$.each(data.articles, function (idx, itm) {
articleList += '<li class="blocks-item" id="{{id}}">';
articleList += '<a href="' + itm.html_url + '" id="' + itm.id + '" class="blocks-item-link">'
+ itm.title + '</a>';
articleList += '</li>';
});
$('ul.articles-list').html(articleList);
var articlesLength = $('ul.articles-list > li').length;
if (articlesLength) {
$('.articles-list').show();
}
});
});2). Copy and paste it on the category page, remove yours and paste these all.
<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="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}}
<h2 style="" class="section-tree-title">
{{name}}
</h2>
<section style=" padding: 20px 0px 20px 20px;">
<ul class="articles-list blocks-lis">
</ul>
</section>
{{else}}
<i class="category-empty">
<a href="{{category.url}}">{{t 'empty'}}</a>
</i>
{{/each}}
</div>
</div>
</div>
</div>If any issue let me know :)
Thanks
Team Diziana
Please sign in to leave a comment.
1 Comments