Recent searches


No recent searches

I want to show all my articles on my category pages

Answered


Posted Mar 18, 2022

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>


0

1

1 comment

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post