Recherches récentes

Pas de recherche récente

Promoted Articles - Changing the Order

Avec réponse
image avatar

David Verhoff

Publication le 22 févr. 2018

Does anyone know of a way (possibly thru custom coding) to change the order in which the promoted articles appear?  (We're using the Humble Squid theme.)

We've moved our promoted articles to the top of our help center and we've promoted our top viewed and searched articles.  Our promoted articles are articles that every one of our end-users access on a daily basis, so we wanted the articles in a central, easy to access location. (Since end-users may have access up to 13 categories, they weren't scrolling to the bottom of the help center to find the promoted articles.)

But we'd like to be able to change the order of the promoted articles without having to reorganize all of our categories, sections, and articles since the Absolute Positional Order method determines the order of the promoted articles.

(Our end-users are actually our front line staff serving the public and our agents are our managers, so our help center is only used internally; we're a tax collector office in Florida.)

Also, once I moved the promoted articles to the top of the help center, I've got a lot of unused real estate (white space). Screenshot below.  When the promoted articles were at the bottom of the help center, they fell in line with the category boxes.  Does anyone know of a way to have the promoted articles span across the length of the screen and/or display the promoted articles in a table format?

Thanks in advance for any assistance!

0

2

2 commentaire

Date
    image avatar

    Jessie Schutz

    Zendesk Customer Care

    Hey David!

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

    0

    image avatar

    Abdul Qabiz (Diziana)

    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

    Cette publication n’accepte pas de commentaire.

    Vous ne trouvez pas ce que vous cherchez ?

    Nouvelle publication