Display more then 6 articles on home page each loop

回答済み

5 コメント

  • Everest Theme

    Hey Development,

    Can you please let me know are you using the default theme Copenhagen v2 or are you using any other custom theme?

    Regards 

    Jay

    0
  • Ifra Saqlain
    Community Moderator

    Hi,

    Please go through this post:

    https://support.zendesk.com/hc/en-us/community/posts/115000662147-Is-there-a-way-to-list-all-articles-in-a-section-on-homepage

     

    If any query let me know :)

     

    Team

    0
  • Development

    Ifra Saqlain I just tried your solution this is not working for me on home page here is my my zendesk url https://dillners.zendesk.com/hc/en-us please review and give me solution if you have ...Thanks

    0
  • Development

    Yes Everest Theme this default theme Copenhagen v2 ..Thanks

    0
  • Ifra Saqlain
    Community Moderator

    Okay, you can show all articles by this type.

    Add this given knowledgebase code on your home page :

    <section class="knowledge-base">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}
    <section class="section">
    <h3>

    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    {{/each}}

    {{pagination}}
    </div>
    {{/if}}
    </section>

    this code belongs to https://support.zendesk.com/hc/en-us/community/posts/115000943607-Sections-and-articles-all-in-one-page this post:

     

    After adding that code, add this script code at the bottom of your stylesheet:

    $(document).ready(function(){

    /**
    @add your hc domain here
    @for eg: var hc_url = 'https://testcompany.com'
    */
    var hc_url = 'https://dillners.zendesk.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
    $('.see-all-articles').click(function(e){
    e.preventDefault();
    _id = $(e.target).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;

    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 + '<li class="'+(itm.promoted==true?'article-promoted':'')+'"><span data-title="Promoted article" style="'+(itm.promoted==false?'display:none':'')+'">★</span><a href="'+itm.html_url+'">'+itm.title+'</a></li>';
    }
    });
    $(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 + '<li class="'+(itm.promoted==true?'article-promoted':'')+'"><span data-title="Promoted article" style="'+(itm.promoted==false?'display:none':'')+'">★</span><a href="'+itm.html_url+'">'+itm.title+'</a></li>';
    }
    });
    $(e.target).parent().find('ul.article-list').html(_arthtml);
    $(e.target).hide();
    }

    });
    });
    // function for see all articles button in category ends here

    });

     

    After doing this copy-paste job , you would see there is Knowledge Base Tree - Category , Section , Articles with see more button. And when you click see more button all articles will be shown on same page - not will redirect to the other page.

     

    After doing all, you can compare your written code or modify as per your requirement.

    Team

     

     

    0

サインインしてコメントを残してください。

Powered by Zendesk