I want to show all my articles on my category pages | Community
Skip to main content

I want to show all my articles on my category pages

  • March 18, 2022
  • 1 reply
  • 0 views
C

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>

    1 reply

    Ifra
    • Ifra
    • March 23, 2022

    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

     

    Terms & ConditionsCookie settingsAccessibility statement