Promoted Articles - Changing the Order

Answered

2 Comments

  • Jessie Schutz
    Zendesk team member

    Hey David!

    I'm checking with our Community Moderators to see if someone can answer this for you!

    0
  • Abdul Qabiz

    Hi David

    A custom js plugin can be created to to pull data from API, and sort in a way you wish; of course you will need to specify sort-order in labels.

    I have another solution, appears to be cluttered but it works.

    1. Add sortorder as label to your articles, e.g. sortorder:1, sortorder:2, sortorder:3, ...., sortorder:12; The article with sortorder:1 will appear on the top.
    2. Modify your template to have something like following:
       {{#if promoted_articles}}
      <section class="articles">
        <h3>{{t 'promoted_articles'}}</h3>
        <ul class="article-list promoted-articles">
          {{#each promoted_articles}}
          <li class="promoted-articles-item" {{#each labels}} {{#is identifier "sortorder:1"}}data-position="1{{/is}}
                  {{#is identifier " sortorder:2 "}}
                      data-position="2"
                  {{/is}}
                  {{#is identifier "sortorder:3 "}}
                      data-position="3"
                  {{/is}}
                  {{#is identifier "sortorder:4 "}}
                      data-position="4"
                  {{/is}}
                  {{#is identifier "sortorder:5 "}}
                      data-position="5"
                  {{/is}}
                  {{#is identifier "sortorder:6 "}}
                      data-position="6"
                  {{/is}}
                  {{#is identifier "sortorder:7 "}}
                      data-position="7"
                  {{/is}}
                  {{#is identifier "sortorder:8 "}}
                      data-position="8"
                  {{/is}}
                  {{#is identifier "sortorder:9 "}}
                      data-position="9"
                  {{/is}}
                  {{#is identifier "sortorder:10 "}}
                      data-position="10"
                  {{/is}}
                  {{#is identifier "sortorder:11 "}}
                      data-position="11"
                  {{/is}}
                  {{#is identifier "sortorder:12 "}}
                      data-position="12"
                  {{else}}
                      data-position="13"
                  {{/is}}
                      
                  {{/each}}>
                    <a href="{{url}} ">
                      {{title}}
                    </a>
                  </li>
                {{/each}}
              </ul>
            </section>
          {{/if}}
        </section>
       
        <script>
        $(function() {
        $(".promoted-articles li ").sort(sort_li).appendTo('.promoted-articles');
        function sort_li(a, b) {
          return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
        }
      });
      </script>

    That's it. Your promoted articles will follow the sort-order dictated by sortorder:X label. Of course, above code only support sorting up to 12 articles, you can extend the code to go further.

     

    Regarding displaying in two columns, you don't need table. What you need depends on how you are showing things -- do you use bootstrap, or plain-vanila css, etc. If you can display a html list in multi-column layout using CSS multi-column which apparently works for all browsers except IE9. Of course, if your layout is based on CSS Flex or CSS Grid, you can do lot more.

    You can see a simple example (showing multi-column list view) here: https://jsfiddle.net/abdulqabiz/o0usqy74/4/

     

    Cheers

    -abdul

    --

    Abdul Qabiz
    diziana  •  twitter  •  linkedin  •  blog

    Team Diziana

    Diziana is creator of awesome ready-to-go Zendesk Help Center Themes, and has helped hundreds of organizations/companies with Help Center Branding and Customization.

     

    1

Please sign in to leave a comment.

Powered by Zendesk