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

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>

Thank you both for your help! I appreciate it.

In addition to the incredibly helpful post by Ifra Saqlain (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. 

@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

Hi Ifra & Greg - I appreciate your responses.

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

Ifra Saqlain, 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

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

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?