Tip: Displaying Subsection list on Category page

13 Commentaires

  • Brett Bowser
    Zendesk Community Team

    This is fantastic.

    Thanks for sharing Amy :)

    0
  • Rebecca McMurry

    I am confused where to put that code snippet. Do I paste the snippet after the first {{/if}} or the second? Wherever I seem to paste it I keep getting the error: "{{ `else` }} .. is not permitted in this context" on that last {{else}}.

    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <p>
    <i class="section-empty"><a href="{{url}}">{{t 'empty'}}</a></i>
    </p>
    {{/if}}
    </section>
    {{else}}

    0
  • Amy Gracer
    Community Moderator

    Hi Rebecca,

    I have since changed my code around a bit. 

    I suggest you delete the offending {{else}} and see if it allows you to publish. 

    If not, please take a look at my updated code below, starting from the section-content (beneath the section description). 

    Please let me know how this works for you. I will also review the Tip above and modify the code if needed. 

    Hope this helps....


    {{#if section.articles}}

    <ul class="article-list">

    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">

    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>

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

    {{/each}}
    </ul>
    {{/if}}


    {{pagination}}

    <div class="section-tree">
    {{#each section.sections}}

    <section class="section">
    <h3 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </h3>

    {{#if articles}}

    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">

    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>

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

    {{/each}}
    </ul>

    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}


    {{/if}}

    </section>

    {{/each}}



    </div>

    </section>
    </div>
    </div>

     

    0
  • Heather Firth

    I've tried all this and it isn't working at all.

    I keep getting "not possible to access 'section' in 'section.articles'

    0
  • Heather Firth

    OK. So I figured this out.

    On your category_page.hbs template you need to find this bit of code:

    <div class="section-tree">
    {{#each sections}}
    <section class="section">
    <h3 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h3>

    and directly underneath it paste this bit of code:

    {{#if sections}}
    <ul class="section-list">
    {{#each sections}}
    <li class="section-list-item">
    <a href="{{url}}" class="section-tree-title">{{name}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{/if}}

     

    I then played around with the style.css and added this:

    .article-list {
    margin-left: 30px !important;
    }

    .section-list-item {
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    padding: 15px 0;
    }

    .section-list-item a {
    color: $text_color;
    }

     

    .section-list-item:before {
    content: '\002B';
    margin:0 5px 0 -15px;
    color: #d40054;
    }

    .section-list {

    list-style-type: none;
    padding-left: 18px;

    text-align: left;

    }

    You can use this site to find the character that you want to appear in front of your sections and articles:https://www.compart.com/en/unicode/category/So

     

    1
  • Amy Gracer
    Community Moderator

    @Heather. Thank you! I will look into what you have, compare to my implementation, and update article as necessary. I'm sorry you ran into some trouble with it the first time around, but glad you got it working well!

    1
  • Brett Bowser
    Zendesk Community Team

    Thanks for sharing your fix Heather :) 

    0
  • Amy Gracer
    Community Moderator

    @Heather and @Brett, I updated the article to match my live site. I made quite a few changes between when I published this tip an when we went live last month.

    0
  • saumya sunder

    https://support.zendesk.com/hc/en-us/community/posts/360004412767/comments/360008303313

    This worked for me! What do I do if I need to change the formatting from + - to expand and collapse buttons?

    TIA

    0
  • Marci Abraham

    Thanks for this tip! I'm getting an error message when I try to publish, which says "internal does not exist". It seems the rest of you were able to get it working with that...and it seems to be spelled correctly....any ideas?

     

    0
  • Marci Abraham

    Just in case anyone else stumbles into this thread as I did, I have an update on what worked for me.

    First, I realized that "internal" above means internal articles. Apparently, that option does not exist in curly brackets code for this particular context. Or maybe something else is messing it up. But everything I tried had similar errors, so this just wasn't working for me.

    After more poking around, I discovered this:

    https://gist.github.com/chucknado/6a1ee9593aa522a40898b57d6d704ca0

    I copied one small section of that code and pasted it into my category page template.

     

    Under the 

    {{#each sections}}

    section of the code, I simply pasted this

    <div class="section-tree">

    {{#each sections}}
    <section class="section">
    <h3 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </h3>
    </section>
    {{/each}}
    </div>

     

    after the two nested "if" statements. This screenshot shows how I ended up modifying it to match what's on the sections page (added the svg right-chevron icon). I also added a new CSS class so I could style it almost the sections page without breaking the sections page. But the actual code to get the list of sections to appear was quite short and simple.

     

     

     Here is how it ended up looking on my site. (This is a barely modified Copenhagen, btw.)

     

    0
  • Nicole S.
    Zendesk Community Team

    Thanks for coming back and sharing your solution, Marci!

    0
  • Erica Clayton

    huge, HUGE thanks to all of y'all who contributed to this post.  You all saved me from totally destroying my own help center since I don't really know what I'm doing when it comes to updating the templates, but I have big dreams.  

    1

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk