Tip: Displaying Subsection list on Category page

8 Commentaires

  • Amy Gracer
    Actions pour les commentaires Permalien

    @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 - Community Manager
    Actions pour les commentaires Permalien

    This is fantastic.

    Thanks for sharing Amy :)

    0
  • Rebecca McMurry
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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
    Actions pour les commentaires Permalien

    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

     

    0
  • Brett - Community Manager
    Actions pour les commentaires Permalien

    Thanks for sharing your fix Heather :) 

    0
  • Amy Gracer
    Actions pour les commentaires Permalien

    @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

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk