Português do Brasil

How can I re-order/organize my category block buttons?

Respondida
Christian Brennan

Community.

So we have "15" total (current) category buttons on our homepage underneath our search UI section. We want to be able to split this large group of 3 columns (5 each column) into "2" categories potentially. The code for this section in the theme ZenDesk editor is below. Do you need our homepage url to see the UI?

Please advise if you can.  Thx.

<section class="section knowledge-base">
<section class="categories blocks">
<ul class="blocks-list">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
<h4 class="blocks-item-title">{{name}}</h4>
<p class="blocks-item-description">{{excerpt description}}</p>
</a>
</li>
{{else}}
{{#each sections}}
<li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
<a href='{{url}}' class="blocks-item-link">
<h4 class="blocks-item-title">
{{name}}
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</h4>
<p class="blocks-item-description">{{excerpt description}}</p>
</a>
</li>
{{/each}}
{{/if}}
{{/each}}
</ul>
{{pagination}}
</section>

21 Comentários

  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christin - You can rearrange and combine your categories and sections without touching any of the code.  In the Guide Admin settings look for "three bars" and if you hover on the bars it will say "Arrange Content".  Go there and drag and drop your categories and sections around and those changes will reflect in the Help Center.  Hope this helps.

    0
  • Christian Brennan

    Thx @wes. So that sounds great, but I can't find the "Guide Admin settings" anywhere in the UI.  Please advise exactly how to get to this section if you can.

    Thanks again.

    CB

    0
  • Nicole Saunders
    Zendesk Community Manager

    Hey Christian -

    First, be sure that you are logged in to an account that has Guide Administrator permissions. 

    When you're logged in to your account and go to your Help Center, at the very top there should be a white bar, and it will say "Guide Admin" in the upper right-hand corner. Here's how it looks to me in our Help Center:

     

    Once you have clicked "Guide Admin," here's the three bars Wes is referring to; they're in the left-hand side of the menu: 

     

    Hope that helps!

     

    0
  • Christian Brennan

    Thx guys.

    So I made it to "Arrange Articles" ...I don't have an option that says "Arrange Content."  Should I have this option?  Is that what I'm missing?

    I can drag/drop the categories around w/ ease, but my challenge here is that I don't want to necessarily re-arrange the (15) categories as much as I want to organize them.

    They are currently (15) categories listed on the homepage.  I still want all 15, but I want to be able to cluster these categories together in parent categories w/ sub-headers.  Into possibly 2 rows or possibly 2 columns, etc.  Attached is a screen shot of our current categories listed and a mockup of what I'm after here as well.

    Thoughts?  Thx again.

    Current UI for categories:

    New UI we'd like to use:

    0
  • Christian Brennan

    If it's easier, this is our homepage welcome screen UI.

    https://a2zinc.zendesk.com/hc/en-us

    Thx again. - CB

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christian - From a system standpoint you can't break up your categories like you are wanting to do.  A category is the top level then section then article.

    You can manually do this from modifying the homepage.hbs code but would require some modifications of the default code and you would have to specify which blocks fall under which Header.

    Looking at your current Help Center I'm only seeing 4 blocks there on your homepage and not 15.  Are you wanting to change that or did you already make some changes to get it to 4 blocks.

    0
  • Christian Brennan

    Hey Wes.

    Thx for getting back to me.  So you're not seeing this for the homepage UI as far as categories?  See attached below.

    Yeah, we'd like to adjust the .hbs code, but I'm not familiar w/ doing that. Only adding content via html/css to this section.  I posted the .hbs code for this page in the very 1st post here.  Thoughts on accomplishing this?  Any assistance here would be awesome.  Thx again.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christian - If you are not logged into your Help Center you only see 4 total categories so I assume you only see all 15 if you are logged in.  I'll post some code for you as soon as I can.

     

    0
  • Christian Brennan

    Thank you Wes.  I'd really appreciate it.  Let me know exactly what file I would touch as well w/ this new code you'll be providing.

    0
  • Christian Brennan

    @Wes any word yet on some code to help us out here?  Just checking back in.  Thx again.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christian - Sorry no updates as of yet, I have several client projects going on at the time so my primary focus is on that at the moment.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christian - Here is some code for you.  This is a quick and dirty version but it will get the job done.  Copy and paste the below code into the HomePage.hbs (if you've modified this page the code below may not work as this is from the default homepage.hbs from the Copenhagen theme.  Check out those {{is}} statements in there and repeat them so {{is}} {{else}} {{/is}} and change the id to your category IDs.  A sample of how it will look can be found here.

    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <h2>My favorite categories</h2>
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    {{#is id 360001485892}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4> 
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{else}}
    {{#is id 115001243123}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4> 
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/is}}
    {{/is}}
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    <section class="section knowledge-base">
    <section class="categories blocks">
    <h2>My least favorite categories</h2>
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}} 
    {{#is id 360001486092}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4> 
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/is}} 
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>
    </section>

    {{#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">
    <a href="{{url}}">
    {{title}}

    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section>
    </div>
    0
  • Christian Brennan

    Actually copy and pasted your code and the UI didn't change at all, oddly enough.  On another note, how would I add Font Awesome icons to "each" of my category buttons?  Please advise.

    Thx. - CB

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Christian - You will see a change if you copied my code, you have to save and publish in order to see it but you will need to make a copy of your current theme, don't do it in the live version.  You will also have to provide the ID's of your categories.  For images, you can take a look at this tip that I wrote.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    My code is written for categories so if you only have one category with alot of sections then the code I gave you will not work.  You would have to move my code down to the section level of the homepage.  Are the buttons you see categories or sections. 

    0
  • Christian Brennan

    They are categories:

    <section class="categories blocks">Name</section>

    0
  • Vaishali Kirpekar

    Hi all, 

    I'm trying to insert icons for Enterprise Plan, Team Plan, and Authoring Platform in business.coursera.help/us-en in the Copenhagen theme. I read the above about "ID". The current code below does now have "ID". Attached is the screenshot of the landing page. I am not super attached to the buttons for the 3 categories either. Let me know if there's a workaround to insert icons and/or remove button format for the 3 categories. t me know if there's a workaround!

    <section class="section hero">

      <div class="hero-inner">

        {{search submit=false instant=true class='search search-full'}}

      </div>

    </section>

     

    <div class="container">

      <section class="section knowledge-base">

        <section class="categories blocks">

          <ul class="blocks-list">

            {{#each categories}}

              {{#if ../has_multiple_categories}}

                <li class="blocks-item">

                  <a href='{{url}}' class="blocks-item-link">

                    <h4 class="blocks-item-title">{{name}}</h4>

                    <p class="blocks-item-description">{{excerpt description}}</p>

                  </a>

                </li>

              {{else}}

                {{#each sections}}

                  <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">

                    <a href='{{url}}' class="blocks-item-link">

                      <h4 class="blocks-item-title">

                        {{name}}

                        {{#if internal}}

                          <span class="icon-lock" title="{{t 'internal'}}"></span>

                        {{/if}}

                      </h4>

                      <p class="blocks-item-description">{{excerpt description}}</p>

                    </a>

                  </li>

                {{/each}}

              {{/if}}

            {{/each}}

          </ul>

          {{pagination}}

        </section>

     

        {{#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">

                  <a href="{{url}}">

                    {{title}}

                  </a>

                </li>

              {{/each}}

            </ul>

          </section>

        {{/if}}

      </section>




      {{#if help_center.community_enabled}}

        <section class="section community">

          <h2>{{t 'community'}}</h2>

          {{#link 'community' class='community-link'}}

            {{t 'join_conversation'}}

          {{/link}}

     

          <div class="community-image"></div>

        </section>

      {{/if}}

    </div>

     

     

    0
  • Sushant A
    Community Moderator

    Hi @...

    Welcome to the zendesk community!!

    You need to define category ids in the categories block and then insert the icons. Try this code 

    <section class="section hero">
       <div class="hero-inner">
          {{search submit=false instant=true class='search search-full'}}
       </div>
    </section>
    <div class="container">
       <section class="section knowledge-base">
          <section class="categories blocks">
             <ul class="blocks-list">
                {{#each categories}}
                {{#if ../has_multiple_categories}}
                <!-- Enterprise plan-->
                {{#is id 204094368}}
                <li class="blocks-item">
                   <a href='{{url}}' class="blocks-item-link">
                      <img width="250px" height="250px" src="https://i0.wp.com/www.newsgram.com/wp-content/uploads/2019/09/dancing-dave-minion-510835_1280-696x464.jpg" alt="ent-plan"/>
                   </a>
                </li>
                {{/is}} 
               
                <!-- Authoring platform-->
                {{#is id 360004269834}}
                <li class="blocks-item">
                   <a href='{{url}}' class="blocks-item-link">
                     <img width="250px" height="250px" src="https://i0.wp.com/www.newsgram.com/wp-content/uploads/2019/09/dancing-dave-minion-510835_1280-696x464.jpg" alt="authoring-plat"/>
                   </a>
                </li>
                {{/is}} 
                
                <!-- team plan-->
                {{#is id 360001860393}}
                <li class="blocks-item">
                   <a href='{{url}}' class="blocks-item-link">
                      <img width="250px" height="250px" src="https://i0.wp.com/www.newsgram.com/wp-content/uploads/2019/09/dancing-dave-minion-510835_1280-696x464.jpg" alt="team-plan"/>
                   </a>
                </li>
                {{/is}} 
                   
                {{else}}
                {{#each sections}}
                <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
                   <a href='{{url}}' class="blocks-item-link">
                      <h4 class="blocks-item-title">
                         {{name}}
                         {{#if internal}}
                         <span class="icon-lock" title="{{t 'internal'}}"></span>
                         {{/if}}
                      </h4>
                      <p class="blocks-item-description">{{excerpt description}}</p>
                   </a>
                </li>
                {{/each}}
                {{/if}}
                {{/each}}
             </ul>
             {{pagination}}
          </section>
          {{#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">
                   <a href="{{url}}">
                   {{title}}
                   </a>
                </li>
                {{/each}}
             </ul>
          </section>
          {{/if}}
       </section>
       {{#if help_center.community_enabled}}
       <section class="section community">
          <h2>{{t 'community'}}</h2>
          {{#link 'community' class='community-link'}}
          {{t 'join_conversation'}}
          {{/link}}
          <div class="community-image"></div>
       </section>
       {{/if}}
    </div>

    Note: Replace icons as per your need in img src.



    Hope this helps!!

    -sushant

    0
  • Vaishali Kirpekar

    Sushant, thanks a lot! Sharing below what I noticed and what I'm trying to achieve. 

    Yesterday in my copy of the live theme, I was able to insert icons and use IDs. However, the formatting changes from rows to stacks - the 3 icons appear stacked instead of being in a single row.

    Please see learner.coursera.help/hc for what I'm aiming to have and let me know how to mimic that if you've any suggestions. 

    I am trying to

    • Remove the rectangles, the button like experience.
    • Have icons and category names. 
    • Move the announcement from above the banner to below the banner like this.  

    I don't want to lose categories names when I get icons in, which is happening in both cases in the above code you shared and what I tried yesterday as below: 

    <section id="home_header">
    <div class="search-header">
    <div class="narrow-container">
    <h1 style="font-size: 44px; line-height: 60px;color: #000000;">{{'Enterprise Help Center'}}</h1>
    <div class="wide-container">


    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="row" style="margin-bottom: 10px;">
    <section id="home_categories">
    <div class="wide-container">

    <div class="column" style="margin-bottom: 10px;">

    <div class="category category-right" onclick="window.location.href='https://business.coursera.help/hc/en-us/categories/204094368-Enterprise-Plan'; ga('send', 'event', 'Home', 'click', 'ABC');" tabindex="0" role="link">

    <img style="width:75px" src="{{asset 'Briefcase.svg'}}">
    <div class="category category-left" >
    </div>
    </div>
    <div class="col-xs-3 col-sm-4 col-md-3 col-lg-3" style="margin-bottom: 15px;">
    <div class="category category-center" >
    <div class="category category-right" onclick="window.location.href='https://business.coursera.help/hc/en-us/categories/360001860393-Team-Plan'; ga('send', 'event', 'Home', 'click', 'ABC');" tabindex="0" role="link">

    <img style="width:75px" src="{{asset 'Group.svg'}}">

    </div>
    </div> <div class="col-xs-3 col-sm-4 col-md-3 col-lg-3" style="margin-bottom: 15px;">
    <div class="category category-right" onclick="window.location.href='https://business.coursera.help/hc/en-us/categories/360004269834-Authoring-Platform'; ga('send', 'event', 'Home', 'click', 'ABC');" tabindex="0" role="link">
    <img style="width:75px" src="{{asset 'Book.svg'}}">

    </div>
    </div>

    Below: With your code all squares appear in a row with icons inside, but category names are missing. Thanks again! 

     

     

     

     

    0
  • Sushant A
    Community Moderator

    @...

    You need to add some custom CSS to format your icons and display them in one row.


    0
  • pijoc49983

    @Christin - You can modify and consolidate your classes and segments without contacting any of the code. In the Guide Admin settings search for "three bars" and in the event that you float on the bars it will say "Organize Content". Go there and simplified your classes and segments around and those progressions will reflect in the Help Center. Expectation this makes a difference.

    0

Por favor, entrar para comentar.

Não encontrou o que estava procurando?

Nova publicação
Powered by Zendesk