Show all articles on Category page for Zendesk Guide Help Centre

Respondida

18 Comentarios

  • Tylon Yu

    To Zendesk team,

    I have the same issue, please let us know.

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey all,

    This code is pulled from another article which 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 +
                                        '<li class="' +
                                        (itm.promoted == true ? "article-promoted" : "article-list-item") +
                                        '"><span data-title="Promoted article" style="' +
                                        (itm.promoted == false ? "display:none" : "") +
                                        '">★</span><a href="' +
                                        itm.html_url +
                                        '" class="article-list-link">' +
                                        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" : "article-list-item") +
                                        '"><span data-title="Promoted article" style="' +
                                        (itm.promoted == false ? "display:none" : "") +
                                        '">★</span><a href="' +
                                        itm.html_url +
                                        '" class="article-list-link">' +
                                        itm.title +
                                        "</a></li>";
                        }
                    });
                    $(".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

    1
  • Tylon Yu

    Hi Tipene,

     

    I love your suggestion. It works. Thank you!

    0
  • Tom Matthews

    Tipene Hughes This 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?

    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-star" title="Promoted article" fill="none">
                            <path d="M7.21401 1.09145C7.45432 0.302852 8.54568 0.302848 8.78599 1.09145L9.73257 4.19775C9.96689 4.96669 10.6709 5.4977 11.4751 5.4977H14.6742C15.4477 5.4977 15.8127 6.51372 15.1713 7.01065L12.4708 9.10261C11.8644 9.57243 11.6141 10.3723 11.8378 11.1061L12.842 14.4016C13.0879 15.2086 12.1766 15.8016 11.5589 15.3231L9.10951 13.4256C8.455 12.9185 7.54501 12.9185 6.89049 13.4256L4.4411 15.3231C3.82338 15.8016 2.91211 15.2085 3.15802 14.4016L4.16223 11.1061C4.38586 10.3723 4.13564 9.57243 3.52918 9.10262L0.82875 7.01065C0.187278 6.51371 0.552286 5.4977 1.32584 5.4977H4.52486C5.3291 5.4977 6.03311 4.96669 6.26743 4.19775L7.21401 1.09145Z" stroke="#171717" stroke-linejoin="round"></path>
                          </svg>

    I've added an example of a section where it's still being applied, and a section where it's not being applied. 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    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?

    0
  • Tom Matthews

    Hi Tipene Hughes. This is the section for our Section content: 

    <div class="section-container">
        <section id="main-content" class="section-content">
          <header class="page-header">
            <h1>{{section.name}}</h1>
            {{#if settings.show_follow_section}}
              <div class="section-subscribe">{{subscribe}}</div>
            {{/if}}
            {{#if section.description}}
              <p class="page-header-description">{{section.description}}</p>
            {{/if}}
          </header>

          {{#if section.sections}}
            <ul class="section-list">
              {{#each section.sections}}
              <li class="section-list-item">
                  <a href="{{url}}">
                    <span>{{name}}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
                      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
                    </svg>
                  </a>
                </li>
              {{/each}}
            </ul>
          {{/if}}

          {{pagination "section.sections"}}

          {{#if section.articles}}
            <ul class="article-list">
              {{#each section.articles}}
                <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
                  {{#if promoted}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-star" title="{{t 'promoted'}}" fill="none">
                      <path d="M7.21401 1.09145C7.45432 0.302852 8.54568 0.302848 8.78599 1.09145L9.73257 4.19775C9.96689 4.96669 10.6709 5.4977 11.4751 5.4977H14.6742C15.4477 5.4977 15.8127 6.51372 15.1713 7.01065L12.4708 9.10261C11.8644 9.57243 11.6141 10.3723 11.8378 11.1061L12.842 14.4016C13.0879 15.2086 12.1766 15.8016 11.5589 15.3231L9.10951 13.4256C8.455 12.9185 7.54501 12.9185 6.89049 13.4256L4.4411 15.3231C3.82338 15.8016 2.91211 15.2085 3.15802 14.4016L4.16223 11.1061C4.38586 10.3723 4.13564 9.57243 3.52918 9.10262L0.82875 7.01065C0.187278 6.51371 0.552286 5.4977 1.32584 5.4977H4.52486C5.3291 5.4977 6.03311 4.96669 6.26743 4.19775L7.21401 1.09145Z" stroke="#171717" stroke-linejoin="round"/>
                    </svg>
                  {{/if}}
                  <a href="{{url}}" class="article-list-link">{{title}}</a>
                  {{#if internal}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                    </svg>
                  {{/if}}
                </li>
              {{/each}}
            </ul>
          {{else}}
            <i class="section-empty">
              <a href="{{section.url}}">{{t 'empty'}}</a>
            </i>
          {{/if}}

          {{pagination "section.articles"}}

        </section>
      </div>
    0
  • Cheyenne Trommels - Oorebeek

    Tipene Hughes Hi 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!

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

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

    I hope this helps!

    Tipene

    0
  • Rena Suematsu

    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. 

    0
  • Aaron Nicely

    Hi Tipene Hughes

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

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Rena Suematsu Aaron 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 +
                                        '<li class="' +
                                        (itm.promoted == true ? "article-promoted" : "article-list-item") +
                                        '"><span data-title="Promoted article" style="' +
                                        (itm.promoted == false ? "display:none" : "") +
                                        '">★</span><a href="' +
                                        itm.html_url +
                                        '" class="article-list-link">' +
                                        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" : "article-list-item") +
                                        '"><span data-title="Promoted article" style="' +
                                        (itm.promoted == false ? "display:none" : "") +
                                        '">★</span><a href="' +
                                        itm.html_url +
                                        '" class="article-list-link">' +
                                        itm.title +
                                        "</a></li>";
                        }
                    });
                   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

    1
  • Aaron Nicely

    Tipene Hughes that code works! Thank you!

    0
  • Rena Suematsu

    Tipene Hughes
    The code you provided has allowed me to achieve 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.

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    No worries at all, glad I could help :)
     
    Have a great day!
     
    Tipene
    1
  • Ria Fernandez

    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.

    This is the article list section in my category_page.hbs.

    Any help would be appreciated!

    {{#if articles}}
                    {{!------------
                       Article list
                       ------------}}
                    <div id="article-list-{{id}}">
                      {{#if (compare ../settings.article_list_style '<=' '8')}}

                        {{! Built-in article list }}
                        <ul class="row row-{{#is ../settings.article_list_style '1-bullet'}}flush list-disc{{else}}sm list-unstyled{{/is}}">
                          {{~#each articles}}
                            <li class="col-12
                              {{~#if (compare ../../settings.article_list_columns ">=" "2")}} md:col-6{{/if~}}
                              {{~#if (compare ../../settings.article_list_columns ">=" "3")}} lg:col-4{{/if~}}">

                              <div class="relative media align-items-baseline py-2 h-full
                                {{~#is ../../settings.article_list_style '1-bullet'}} pr-7{{/is~}}
                                {{~#is ../../settings.promoted_article_style 'bold'}}{{#if promoted}} font-bold{{/if}}{{/is~}}
                                {{~#isnt ../../settings.article_list_excerpt 0}} font-semibold{{/isnt~}}
                                {{~#is ../../settings.article_list_style '3-bordered'}} border-bottom{{#is ../../settings.article_list_columns "1"}}{{#if @last}} border-bottom-0{{/if}}{{/is}}{{/is~}}">

                                <div class="flex" x-data="{ src: Theme.assets['article'] }">
                                  <template x-if="src">
                                    <img class="svg-icon mr-3" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
                                  </template>
                                </div>

                                <div class="media-body">
                                  <a class="link-stretched" href="{{url}}">
                                    {{~title~}}
                                  </a>
                                  {{~#is ../../settings.promoted_article_style 'icon'}}
                                    {{~#if promoted}}
                                      <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                                        <title>{{t 'promoted'}}</title>
                                        <use xlink:href="#icon-star" />
                                      </svg>
                                    {{/if~}}
                                  {{/is~}}
                                  {{~#if internal~}}
                                    <svg class="svg-icon ml-1 fill-current text-base" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
                                      <title>{{t 'internal'}}</title>
                                      <use xlink:href="#icon-lock" />
                                    </svg>
                                  {{~/if~}}
                                  {{~#isnt ../../settings.article_list_excerpt 0}}
                                    <p class="my-2 font-size-md break-words font-normal">
                                      {{excerpt body characters=../../settings.article_list_excerpt}}
                                    </p>
                                  {{/isnt~}}
                                </div>
                              </div>
                            </li>
                          {{/each~}}
                        </ul>
                        {{#if more_articles}}
                          <p>
                            <a class="button button-outline button-sm" href="{{url}}">
                              {{t 'show_all_articles' count=article_count}}
                            </a>
                          </p>
                        {{/if}}
                      {{else}}

                        {{! Custom article list micro-template }}
                        <script type="text/javascript">
                          ready(function() {
                            new Navigation(document.getElementById('article-list-{{id}}'), {
                              collection: Theme.contentBlocks || {},
                              template: 'articles',
                              sectionId: {{id}},
                              templateData: {
                                sectionId: {{id}},
                                numberColumns: {{../settings.article_list_columns}},
                                excerptLength: {{../settings.article_list_excerpt}},
                                promotedArticleStyle: "{{../settings.promoted_article_style}}{{#if more_articles}}",
                                showAll: "{{t 'show_all_articles' count=article_count}}"{{/if}}
                              }
                            });
                          })
                        </script>
                      {{/if}}
                    </div>
                  {{else}}
                    <p class="mt-5">
                      <a href="{{url}}">
                        {{t 'empty'}}
                      </a>
                    </p>
                  {{/if}}
                </div>
              {{/each}}
            </div>
          {{else}}
            <p class="mt-5">
              <a href="{{category.url}}">
                {{t 'empty'}}
              </a>
            </p>
          {{/if}}
        </div>

     

     

    0
  • Aaron Nicely

    Ria Fernandez are you using Coppenhaigan theme and is it up to date? I had to update my theme before I could get it to work as it had been a few years. Seems like the code for your articles page is very different.

    1
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Ria! I took a look at your help center and it appears to be heavily customized...which looks great, btw!...so it's really difficult to accurately determine what may or may not be working. However, when I was on the category page, it does appear that your category pages are setup this way already, so is there something else that you're trying to achieve?

    0
  • Ria Fernandez

    Aaron Nicely Hi Aaron, I'm using Braxton by Zenplates. They do have a lot of customizations on their themes. I can't seem to locate the usual ZD classes in the code.

    Greg-Katechis Thank you, Greg! The code I posted is for the Help Centre theme I'm currently building in the background, not the active one in use in the live site, as I am still customizing the theme.

    My objective is to display all section articles in the category page and remove the "See all articles" buttons.

    I tried the code in this thread but the sections are still limited to six articles, and the "See all articles" buttons are still visible.

    Not sure what I'm doing wrong. :(

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk