How do I display sub-sections as blocks - just as sections are displayed in the homepage?

Answered

9 Comments

  • Greg Katechis
    Zendesk Developer Support Team

    Hi Matias! The images that you shared are from this article and from what I can tell, the gist for subsections will do exactly what you're looking for. Just in case I'm misunderstanding, could you let me know what that code example is missing?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi @Matias Ricci Brochiero,

    The given code snippet is for the subsections for the homepage, you can add the code anywhere on the home_page.hbs file. I'm using Copenhagen Theme.

     <ul class="blocks-list">
    {{#each categories}}
    {{#each sections}}
    {{#if sections}}
    {{#each sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    {{/each}}
    </ul>

     

    Screenshot for the same:

     

     

    Output is:

     

     

    Thanks

    Team

    0
  • Matt

    Hi Ifra & Greg - I appreciate your responses.

    @..., I've tried those, but when I add them to my code nothing happens. Everything seems to be the same.

    @..., maybe I wasn't clear enough. I want sections & subsections to be displayed as blocks not only on my homepage (sections there are already blocks by default) but also in the subsequent section pages. 

    Thanks again for your time. Looking forward to your help,

    Matt

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    @Matias Ricci Brochiero,

    Have a look at the code:

     

    1). Homepage suctions & subsections code.

     <ul class="blocks-list">
    {{#each categories}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">
    {{name}}
    </span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>

    {{#if sections}}
    {{#each sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    {{/each}}
    </ul>

     

     

    Screenshot for the same:

     

     

    Output would be: Sections & subsections are showing as a block on homepage.

     

     

    2). Code snippet for section page.

       <ul class="blocks-list">
    {{#if section.sections}}
    {{#each section.sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    </ul>

     

    Screenshot for the same:

     

    Output would be :

     

     

    When you add the subsection code on your HBS files, pay attention on the class-name.

    <ul class="blocks-list">:                      blocks-list

    <li class="blocks-item">:                        blocks-item

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

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

     

     

    These are default classes which create the blocks for the section, subsection if you use sequently as I did above with <ul>, <li>, <a> & <span> tags.

    You can use subsection code on category, section and homepage with the those classes to create the blocks on any template.

     

     

     

    You only need to follow this structure with the same/default classes  to get the subsection as a block.

    For the section page
    ----------------------

    <ul class="blocks-list">
    {{#if section.sections}}
    {{#each section.sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    </ul>


    For the category page
    -----------------------
    <ul class="blocks-list">
    {{#if sections}}
    {{#each sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    </ul>

     

    If any confusion do let me know :)

    Thanks

    Team

     

    1
  • Greg Katechis
    Zendesk Developer Support Team

    In addition to the incredibly helpful post by @... (thank you!), I also wanted to mention that if you haven't made any modifications to your help center at all, the only reason that your sections would be showing on the home page is if you only had one category. Once you have more than one category that contains visible articles to the user, the categories will show on the home page instead. 

    0
  • Matt

    Thank you both for your help! I appreciate it.

    0
  • Peter Toprac

    Hi,

    Thanks for the code Ifra Saqlain

    After adding this code into category_page.hbs, I can see sections as blocks, but they are also visible as links below the blocks.

    How to exclude links below, and only have blocks displayed?

    For the category page
    -----------------------
    <ul class="blocks-list">
    {{#if sections}}
    {{#each sections}}
    <li class="blocks-item">
    <a href="{{url}}" class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    </ul>
    1
  • Peter Toprac

    To make it clear, I just want sections shown in blocks when a category is opened. I don't need articles shown.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    The code I provided above is only for the sections as blocks. 

     

     

    I think I should have explained a little more about it. 

    Remove all code of sections and article and paste the provided code inside the wrapper as shown in the screenshot and then see the result.

     

     

    Result:

     

     

    If any issue then share the screenshot here.

    Thanks :)

     

     

     

    0

Please sign in to leave a comment.

Powered by Zendesk